Artigo Diretório
1. Introdução
Há uma grande diferença entre vue-cli3 e vue-cli2
- vue-cli 3 é baseado em webpack 4, vue-cli 2 é baseado em webapck 3
- O princípio de design do vue-cli 3 é " configuração 0 ", removendo os arquivos de configuração no diretório raiz e diretórios como build e config
- vue-cli 3 fornece
vue uicomando, fornece uma interface de usuário visual - Removida a pasta estática, adicionada uma pasta pública e movido index.html para público
2. Criar Projeto
O comando para criar o projeto : vue create 项目名称, Em seguida, você precisa selecionar a configuração relevante. Este blog está escrito em detalhes: https://www.cnblogs.com/dotnet261010/p/11534564.html
3. Estrutura do diretório
Seu código main.js é assim
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
Os exemplos não foram criados aqui nas propriedades, mas adicionaram um $mount(’#app’)método de instância posterior , a instância para montar manualmente o ID do elemento dom do aplicativo.
E se você escolher o modo Runtime + Compiler ao usar o scaffolding vue-cli2 para construir o projeto, seu main.js será o seguinte:
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
new Vue({
el: '#app',
render: h => h(App)
})
Na verdade, ela função e $mounta função das mesmas funções são montadas na instância raiz vue em um elemento html. O site oficial do vue explica isso desta maneira: se a instância do Vue não receber a opção el ao instanciar, ela está no estado "desmontado" e não tem elementos DOM associados. Você pode ser usado vm.$mount()para montar manualmente a instância desmontada.
Diagrama do ciclo de vida de Vue
vue site oficial | vm. $ mount ()
4. Para onde foi o arquivo de configuração?
node_modules-> @vue-> cli-service, os arquivos de configuração estão todos nesta pasta cli-sevice.
Em circunstâncias normais, não modificaremos os arquivos em node_modules, mas e se não estivermos satisfeitos com esta configuração e quisermos modificá-la? Você precisa criar um arquivo vue.config.js(deve ter este nome) no diretório raiz do projeto e, em seguida, adicionar a configuração desejada. Ao empacotar, ele mesclará automaticamente as informações de configuração desse arquivo com as informações de configuração em node_modules / @ vue / cli-service .
module.exports = {
}