vue-cli 使用

• 【命令行查看版本号】 node -v npm -v

• 【升级npm（可选操作）】 npm install -g npm

• 【全局安装 webpack】 npm install webpack -g

• 【webpack 4.X 开始，需要安装 webpack-cli 依赖】 npm install webpack webpack-cli -g

• 【查看版本号】 webpack -v

• 【全局安装vue-cli】 npm install -g vue-cli

• 【查看版本号】 vue -V

创建vue-cli项目

• 【下载模板】 vue init webpack vue-demo

1. 在 npm 环境下安装 vue-cli,进入工程文件所在的文件夹目录，输入npm install vue-cli -g _vue-cli 已经升级到 3.0，参考vue-cli 3.0

2. vue init webpack my-app(项目名称)

3. 使用 vue-cli 创建 vue 项目 常用的就是 webpack 这个模板名称，代码如下:

   • vue init webpack my-project （用法： vue init <template-name> <project-name>）

   template-name:

   1. webpack //一个全面的 webpack+vue-loader 模板

   2. webpack-simple // 一个简单 webpack+vue-loader 的模板，不包含其他功能。

   3. browserify // 一个全面的 Browserify+vueify 的模板，功能包括热加载，linting,单元检测。

   4. browserify-simple // 一个简单 Browserify+vueify 的模板，不包含其他功能。

   5. pwa // 基于 webpack 模板的 vue-cli 的 PWA 模板

   6. simple // 一个最简单的单页应用模板 执行指令后，会让用户输入几个基本的选项，如图所示 需要注意的是项目的名称不能大写，不然会报错。

   7. Project name :项目名称 ，如果不需要更改直接回车就可以了。注意：这里不能使用大写。

   8. Project description:项目描述，默认为 A Vue.js project,直接回车，不用编写。

   9. Author：作者，如果你有配置 git，他会读取.ssh 文件中的 user。

   10. Install vue-router? 是否安装 vue 的路由插件，Y 代表安装，N 无需安装，下面的命令也是一样的。

   11. Use ESLint to lint your code? 是否用 ESLint 来限制你的代码错误和风格

   12. setup unit tests with Karma + Mocha? 是否需要安装单元测试工具 Karma+Mocha。

   13. Setup e2e tests with Nightwatch?是否安装 e2e 来进行用户行为模拟测试。

   14. Should we run npm install for you after the project has been created?(recommended)npm 询问你使用 npm 安装还是 yarn 安装包依赖，我这里选择的是 npm，yarn 更快更好，使用 yarn 之前确保你的电脑已经安装 yarn。

3. 根据提示，待模板加载完成之后,执行下面两条命令

cd my-project

npm run dev   // dev代表下图框选的内容

运行成功后，将鼠标放到运行结果中的 http://localhost:8080，就会提示用“Alt+点击”即可访问；