Use vue-cli3 to create a project


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

Insert picture description here
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's life cycle diagram

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 = {
    
    
  
}

5. Information

Vue CLI Official Website | Configuration Reference

vue-cli3 configuration file

Guess you like

Origin blog.csdn.net/weixin_43974265/article/details/112753394