Home >Web Front-end >Vue.js >What is Vue CLI? Let's talk about the configuration and use of vue cli
What is Vue CLI? The following article will give you an in-depth introduction to vue cli and talk about the configuration and use of vue cli. I hope it will be helpful to you!
If you just write a few Vue Demo programs, then you don't need Vue CLI. (Learning video sharing: vuejs video tutorial)
If you are developing a large-scale 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 loading, code unit testing, etc.
If each project has to complete these tasks manually, it will be 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 officially released vue.js project scaffolding
Use vue-cli You can quickly build a Vue development environment and corresponding webpack configuration.
URL: http://nodejs.cn/download/
Detect the installed version
The Node environment requires version 8.9 or higher
What is NPM?
is a NodeJS package management and distribution tool that has become an unofficial standard for publishing Node modules (packages).1.3. Prerequisites for using Vue CLI - WebpackIn the future, we will often use NPM to install some dependency packages during the development process.
cnpm安装 由于国内直接使用 npm 的官方镜像是非常慢的,这里推荐使用淘宝 NPM 镜像。 你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:npm install -g cnpm --registry=https://registry.npm.taobao.org 这样就可以使用 cnpm 命令来安装模块了: cnpm install [name]
It will compress all resources and perform optimization operationsIt provides a complete set of functions during the development process, which can make our development process efficient.
Global installation of Webpack
npm install webpack -g1.4.Using Vue CLI
npm install -g @vue/cli
Note: The version installed above is the Vue CLI3 version. If you need to initialize the project according to the Vue CLI2 method, you cannot.
Vue CLI2 initialization project
vue init webpack my-project
Vue CLI3 initialization project
vue create my-project2. Vue CLI2
##2.2. Detailed explanation of directory structure
2.3. The difference between Runtime-Compiler and Runtime-only
1. If after During development, if you still use template, you need to select Runtime-Compiler
2.4.render and template
Why is there such a difference?
We need to first understand how the Vue application runs. How the template in Vue is finally rendered into the real DOM.
Let’s look at the picture below
2.5. Vue program running process
2. The design principle of vue-cli 3 is "0 configuration". Remove the build and config directories under the root directory of the configuration file3.2. Detailed explanation of directory structure3. vue-cli 3 provides the vue ui command, providing Visual configuration is made more user-friendly
4. The static folder is removed, the public folder is added, and index.html is moved to public
Start the configuration server: vue ui
[Related video tutorial recommendations:
web front-endThe above is the detailed content of What is Vue CLI? Let's talk about the configuration and use of vue cli. For more information, please follow other related articles on the PHP Chinese website!