Directorio de artículos
1. Introducción
Hay una gran diferencia entre vue-cli3 y vue-cli2
- vue-cli 3 se basa en webpack 4, vue-cli 2 se basa en webapck 3
- El principio de diseño de vue-cli 3 es " 0 configuración ", eliminando los archivos de configuración en el directorio raíz y directorios como build y config
- vue-cli 3 proporciona
vue uicomando, proporciona una interfaz de usuario visual - Se eliminó la carpeta estática, se agregó una carpeta pública y se movió index.html a public
2. Crear proyecto
El comando para crear el proyecto : vue create 项目名称, A continuación, debe seleccionar la configuración relevante. Este blog está escrito en detalle: https://www.cnblogs.com/dotnet261010/p/11534564.html
3. Estructura de directorio
Su código main.js es así
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
Los ejemplos no se crearon aquí el properties, pero agregaron un $mount(’#app’)método de instancia posterior , la instancia para montar manualmente el ID del elemento dom de la aplicación.
Y si elige el modo Runtime + Compiler cuando usa el scaffolding vue-cli2 para construir el proyecto, su main.js es el siguiente:
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
new Vue({
el: '#app',
render: h => h(App)
})
De hecho, elel rol y $mountel rol de las mismas funciones se montan en la instancia raíz vue en un elemento html. El sitio web oficial de vue lo explica de esta manera: si la instancia de Vue no recibe la opción el al crear una instancia, está en el estado "desmontado" y no tiene elementos DOM asociados. Puede estar acostumbrado vm.$mount()a montar la instancia desmontada manualmente.
Diagrama del ciclo de vida de Vue
sitio web oficial de vue | vm. $ mount ()
4. ¿A dónde fue el archivo de configuración?
node_modules-> @vue-> cli-service, los archivos de configuración están todos en esta carpeta de servicio de cli.
En circunstancias normales, no modificaremos los archivos en node_modules, pero ¿y si no estamos satisfechos con esta configuración y queremos modificarla? vue.config.jsDebe crear un archivo (debe tener este nombre) en el directorio raíz del proyecto y luego agregar la configuración que desee. Al empaquetar, fusionará automáticamente la información de configuración de este archivo con la información de configuración en node_modules / @ vue / cli-service .
module.exports = {
}