使用 vue-cli(脚手架)搭建项目
一、使用 vue-cli(脚手架)搭建项目
1) Vue-cli 是 vue 官方提供的用于搭建基于 vue+webpack+es6 项目的脚手架工具
2) 在线文档:https://github.com/vuejs/vue-cli
3) 操作: (mypro 是自定义名称)
npm install -g vue-cli vue init webpack mypro cd mypro npm install npm run dev 访问: localhost:
二、项目结构分析
mypro
|-- build : webpack 相关的配置文件夹(基本不需要修改) |-- config: webpack 相关的配置文件夹(基本不需要修改) |-- index.js: 指定的后台服务的端口号和静态资源文件夹 |-- node_modules |-- src : 源码文件夹 |-- main.js: 应用入口 js |-- static: 静态资源文件夹 |-- .babelrc: babel 的配置文件 |-- .editorconfig: 通过编辑器的编码/格式进行一定的配置 |-- .eslintignore: eslint 检查忽略的配置 |-- .eslintrc.js: eslint 检查的配置 |-- .gitignore: git 版本管制忽略的配置 |-- index.html: 主页面文件 |-- package.json: 应用包配置文件 |-- README.md: 应用描述说明的 readme 文件
三、编码测试与打包发布项目
1) 编码测试
npm run dev
访问:http://localhost:8080 编码, 自动编译打包(HMR), 查看效果
2) 打包发布
npm run build
npm install -g serve
serve dist
访问:http://localhost:5000
使用 vue-cli(脚手架)搭建项目的更多相关文章
- 使用Vue CLI脚手架搭建vue项目
本次是使用@vue/cli 3.11.0版本搭建的vue项目 1. 首先确保自己的电脑上的Node.js的版本是8.9版本或者以上 2. 全局安装vue/cli npm install @vue/cl ...
- 用 vue cli 脚手架搭建单页面 Vue 应用(进阶2)
1.配置 Node 环境. 自行百度吧. 安装好了之后,打开 cmd .运行 node -v .显示版本号,就是安装成功了. 注:不要安装8.0.0以上的版本,和 vue-cli 不兼容. 我使用的 ...
- 13. Vue CLI脚手架
一. Vue CLI 介绍 1. 什么是Vue CLI? Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.Vue CLI 致力于将 Vue 生态中的工具基础标准化.它确保了各种构建工 ...
- vue简单的脚手架搭建项目
第一步 node环境安装 1.如果本机没有安装node运行环境,下载node安装包进行安装 下载地址:https://nodejs.org/en/或者http://nodejs.cn/ 第二步 nod ...
- 1.vue脚手架搭建项目
前言: 在使用Vue-cli脚手架搭建项目之前,需要安装node.js和npm以及vue-cli. 开始搭建项目: 1.打开cmd win+R 2.转到要搭建的项目路径: g: cd Webapp/v ...
- vue-cli3.0 脚手架搭建项目的过程详解
1.安装vue-cli 3.0 ? 1 2 3 npm install -g @vue/cli # or yarn global add @vue/cli 安装成功后查看版本:vue -V(大写的V) ...
- vue-cli脚手架搭建项目简单入门一
搭建系统: Windows系统 简单了解Node.js.npm,安装Node.js,下载网址:http://nodejs.cn/download/ 查看node,npm安装成功与否.打开cmd命令行, ...
- VUE CLI环境搭建文档
VUE CLI环境搭建文档 1.安装Node.js 下载地址 https://nodejs.org/zh-cn/download/ 2.全局安装VUE CLI win+R键打开运行cmd窗口输入一下代 ...
- vue cli创建typescript项目
使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 npm install -g @vue-cli 创建项目 vue cre ...
随机推荐
- js个人笔记简记
正则表达式 创建正则表达式的两种方法: Var reg = new RegExp(‘’) Var reg = / a/ 后面三个参数g:全局匹配 i:不区分大小写 m:多行匹配 开头结尾有用 常见 ...
- 【2019年版】如何向SAP公司提交Message?
[2019年版]如何向SAP公司提交Message? 1,浏览器里输入如下网址: ,出现如下界面, 2,点击 'Visit the SAP Support Portal' 按钮.进入如下界面,去菜单M ...
- dijit/_WidgetBase
英文地址:http://dojotoolkit.org/reference-guide/1.10/dijit/_WidgetBase.html 介绍 dijit/_WidgetBase是Dijit包中 ...
- PHP代码篇(三)--常用方法
模块下不间断更新,PHP常用方法,欢迎留言! 一.递归删除指定目录下所有文件及文件夹 /** * 递归删除指定目录下所有文件及文件夹 * @param unknown $path,删除路径 */ fu ...
- vscode使用formate格式化less遇到的坑
就是这个家伙 我的代码 @input-padding-y : 8px;@input-padding-x : 12px; @input-padding-y-lg : @input-padding-y + ...
- [Go] gocron源码阅读-判断是否使用root用户执行
判断是linux系统,并且uid为0,allowRoot是通过命令行传参传进来的,通过flag包解析出来的,可以使用go run node.go -h看到这些参数 && !allowR ...
- 九、Swift对象存储服务(双节点搭建)
九.Swift对象存储服务(双节点搭建) 要求:Controoler节点需要2块空盘 Compute节点需要再加2块空盘 本次搭建采用Controller 和 Compute双节点节点做swift组件 ...
- react的路由权限控制
在使用路由的时候,有的时候我们的界面只能够在登录之后才可以看的到,这个时候就需要使用路由权限控制了 找了资料发现一个就是我使用的方法,一个是高阶组件. 原谅菜鸟看不太懂不会使用高阶组件………… 首先在 ...
- 2. Go语言—包概念
一.包的概念 和python一样,把相同功能的代码放到一个目录,称之为包 包可以被其他包引用(若包中变量/函数被其他包调用,名需大写) main包是用来生成可执行文件,每个程序只有一个main包 包的 ...
- 为了Runtime Broke 关了一堆东西
可是,好像还是不行啊?CPU还是用了 10-20% 还得写这个随笔,怕自己关东西关多了,以后还得回复. https://www.drivereasy.com/knowledge/runtime-bro ...