Vue - Vue-CLI to create a project

Foreplay

Before, when we used webpack be packaged, webpack.config.js configuration are our own handwriting. The Vue-CLI is provided by the official, the project used to build scaffolding tools, it is a standard tool vue.js development, it has been integrated webpack, it built a lot of good common configuration, making us more when using vue development projects standardization.

The official document: https: //cli.vuejs.org/zh/

installation

Vue-CLI need node.js more than 8.9 version

Global installed Vue-CLI

npm install -g @vue/cli

After successful installation, you can use the command line command vue, such as viewing the currently installed version:

VUE - Version
 # or uppercase V 
VUE -V

If after performing the above, the command line prompt 'vue' not an internal or external command

Solution: Configure environment variables

1. Review the installation directory of global nmp root -g
2. My computer into a global installation directory, find vue.cmd
3. Right Computer, Properties -> Advanced System Settings - "environment variable, where the path vue.cmd adding environment variables, click" OK "

You create a project using Vue-CLI

Run vue create command to create a new project, the implementation of which will be generated in the directory in which directory

vue create the project name

After the execution will let you select the first item is the default, and the second is a custom project

Create a default project

Will be prompted to select the default (default) or manually (Manually), the default configuration is ideal for rapid prototyping to create a new project, and manually set offers more options.

Here select default, the time may be relatively long, and so passed (if prompted to wait until ENTER to proceed down the line).

After installing the last two commands

Both commands execute

Access executing the above address, if you can see the following page to start the project successfully

Create a custom project

在 E:\vue\npm-demo 目录下打开命令行窗口，输入以下命令进行新建项目，项目名是 vue-cli-demo2

vue create vue-cli-demo2

选择 Manually select features 手动选择自定义配置进行创建项目

如下图，根据项目需求, 选择哪些配置选项

注意：按空格键是选中或取消， a 键是全选，i是反选

/*
Bable, （常用）解决兼容性问题,支持 ES6 的代码转译成浏览器能识别的代码
TypeScript, 是一种给 JavaScript 添加特性的语言扩展,增加了很多功能,微软开发的
Progressive Web App (PWA) Support, 渐进式的Web应用程序支持
Router, （常用）是 vue-router 路由。
Vuex, 是Vue.js应用程序的状态管理模式+库 （常用）。
CSS Pre-processors, （常用）支持 CSS 预处理器, Sass/Less预处理器。
Linter / Formatter, （常用）支持代码风格检查和格式化。
Unit Testing, 支持单元测试。
E2E Testing, 支持 E2E 测试。
*/

选择后按回车键, 会提示: 是否使用 history 模式的路由, 按回车即可