1. What is Vue CLI
If you just write a few Vue Demo programs, then you don't need Vue CLI.
If you are developing a large project, then you need, and must use Vue CLI
- When using Vue.js to develop large-scale applications, we need to consider things such as code directory structure, project structure and deployment, hot reloading, code unit testing and so on.
- If each project has to complete these tasks manually, it is not efficient or inefficient, so we usually use some scaffolding tools to help complete these things.
What does CLI mean?
- CLI is Command-Line Interface, translated as command line interface, but commonly known as scaffolding.
Vue CLI is an official vue.js project scaffolding - Use vue-cli to quickly build a Vue development environment and corresponding webpack configuration.
What does the scaffold look like?
2. Prerequisites for using Vue CLI-Node
Install NodeJS
- You can download and install it directly on the official website.
- Website: http://nodejs.cn/download/
Detect installed version
- Node and NPM are automatically installed by default
- Node environment requires version 8.9 or higher
What is NPM?
- The full name of NPM is Node Package Manager
- It is a NodeJS package management and distribution tool that has become an unofficial standard for publishing Node modules (packages).
- In the future, we will often use NPM to install some dependency packages during the development process.
cnpm install
- Since it is very slow to directly use the official image of npm in China, Taobao NPM image is recommended here.
- You can use Taobao's customized cnpm (gzip compression support) command line tool to replace the default npm:
npm install -g cnpm --registry=https://registry.npm.taobao.org - So you can use the cnpm command to install the module:
cnpm install [name]
3. Prerequisites for using Vue CLI-Webpack
Vue.js official scaffolding tool uses webpack template
- All resources will be compressed and other optimization operations
- It provides a complete set of functions in the development process, which can make us efficient in the development process.
Global installation of Webpack
npm install webpack -g
Fourth, the use of Vue CLI
4.1 Install Vue scaffolding
Execute npm install -g @vue/clicommands, stuck solution:
vue-cli is already slow to install (because it is downloaded from a foreign server), so you can use Taobao mirror to install
- Install cnpm, you can check whether it is installed by cnpm --version, if it is not an external command, execute the
npm install cnpm -g --registry=https://registry.npm.taobao.orgcommand to install cnpm
2. Execute the cnpm install -g @vue/cli command to install the scaffolding. 
Note: The version installed above is the version of Vue CLI3. If you need to initialize the project in the way of Vue CLI2, it is not possible.
4.2 Pull 2.x template:
Execute cnpm install @vue/cli-init -gcommand
4.3 Vue CLI2 initialization project
vue init webpack my-project
4.4 Vue CLI3 initialization project
vue create my-project
Five, Vue CLI2 detailed explanation
Six, detailed directory structure
Seven, the difference between Runtime-Compiler and Runtime-only
In order to use vue init webpack 项目名称the emergence of the following options to create a project of the course:
a brief summary
- If you still use template in future development, you need to choose Runtime-Compiler
- If you use the .vue folder in your future development, you can choose Runtime-only
Eight, render and template
Runtime-Compiler and Runtime-only:
Why is there such a difference?
- We need to understand how the Vue application runs.
- How the templates in Vue are finally rendered into real DOM.
Let's look at a picture below.
Vue program running process:
Nine, the use of render function
十、npm run build
Eleven, npm run dev
12. Modify the configuration: alias webpack.base.conf.js
