Article Directory
1 Introduction
There is a big difference between vue-cli3 and vue-cli2
- vue-cli 3 is based on webpack 4, vue-cli 2 is based on webapck 3
- The design principle of vue-cli 3 is " 0 configuration ", the configuration files under the root directory, directories such as build and config are removed
- vue-cli 3 provides
vue uicommand, provides a visual user interface - Removed the static folder, added a public folder, and moved index.html to public
2. Create Project
The command to create the project:, vue create 项目名称Next, you need to select the relevant configuration. This blog is written in detail: https://www.cnblogs.com/dotnet261010/p/11534564.html
3. Directory structure
Its main.js code is like this
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
Examples vue not created here el properties, but added a later instance $mount(’#app’)method, the instance to manually mount the dom element id of the app.
And if you choose Runtime + Compiler mode when using vue-cli2 scaffolding to build the project, its main.js is as follows:
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
new Vue({
el: '#app',
render: h => h(App)
})
In fact, elthe role and $mountthe role of the same functions, are mounted to the root instance vue on one html element. The vue official website explains it like this: If the Vue instance does not receive the el option when instantiating, it is in the "unmounted" state and has no associated DOM elements. You may be used vm.$mount()to manually mount instance unmounted.
vue official website | vm.$mount()
4. Where did the configuration file go?
node_modules--> @vue--> cli-service, the configuration files are all in this cli-sevice folder.
Under normal circumstances, we will not modify the files in node_modules, but what if we are not satisfied with this configuration and want to modify it? You need to create a file vue.config.js(must have this name) in the project root directory , and then add the configuration you want. When packaging, it will automatically merge the configuration information of this file with the configuration information in node_modules/@vue/cli-service .
module.exports = {
}