1. A figura explica brevemente para que serve cada diretório:
Estrutura geral: A estrutura do projeto de um vue-cli é a seguinte, na qual a pasta src precisa ser dominada, então este artigo também foca nos arquivos nela contidos. Quanto aos outros arquivos relacionados, basta dar uma olhada.
Quarto, a subdivisão da estrutura do arquivo
1, build - [configuração do webpack]
O arquivo de compilação é principalmente a configuração do webpack. O arquivo de inicialização principal é dev-server.js. Quando entramos em npm run dev, a primeira coisa a ser iniciada é dev-server.js. Ele verificará as versões do node e do npm, carregará o arquivo de configuração e inicie o serviço.
2, config - [configuração do projeto vue]
O arquivo de configuração está relacionado principalmente à configuração do projeto. O que normalmente usamos é configurar a porta de escuta quando a porta entrar em conflito, empacotar o caminho de saída e a nomenclatura, etc.
3, node_modules - [pacote de dependências]
Dentro de node_modules está o pacote de dependências do projeto, que inclui muitas dependências básicas, e você também pode instalar outras dependências conforme necessário.
O método de instalação é abrir o cmd, entrar no diretório do projeto, digitar npm install [nome do pacote de dependência] e pressionar Enter.
Em dois casos, instalaremos as dependências por conta própria:
(1) A operação do projeto não possui o pacote de dependências: por exemplo, o css-loader usado pelo projeto para carregar css externo, o salto de rota vue-loader, etc. (exemplo de método de instalação: npm install css-loader)
(2) Instalar plug-ins: como vux (biblioteca de componentes móveis baseada em WEUI), vue-swiper (plug-in de carrossel)
Nota: Às vezes, a versão de dependência especificada é instalada e as informações do número da versão precisam ser adicionadas após o nome do pacote de dependência. Por exemplo, para instalar o vue-loader da versão 11.1.4, digite npm install [email protected]. 4
4, src - [arquivo principal do projeto]
O arquivo principal do projeto já foi explicado brevemente antes. Em seguida, vamos nos concentrar em main.js, App.vue e index.js do roteador.
5. Explicação detalhada do código de andaime
Vamos dar uma olhada nos arquivos principais no diretório do projeto criado:
1. index.html——[página inicial]
Não há nada a dizer sobre isso, é uma página html simples, onde id='app' está relacionado à configuração do escopo vue posteriormente.
index.html é o mesmo que outro html, mas geralmente define apenas um nó raiz vazio. A instância definida em main.js será montada sob o nó raiz e o conteúdo será preenchido por componentes vue
2. Arquivo: Hello.vue
Nota: No arquivo *.vue, escreva o código html na tag do template, e o filho direto do template pode ter apenas uma tag. O estilo é escrito na tag style e o código js é escrito no script.
3. Arquivo: App.vue - [componente raiz]
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/> //这里是用来展示路由页面内容的，如果想用跳转就用<router-link to='xxx'></router-link>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>Uma página vue geralmente consiste em três partes: template (modelo), js (script) e estilo (estilo):
【modelo】
O modelo pode conter apenas um nó pai, o que significa que o div de nível superior pode ter apenas um (por exemplo, o div cujo nó pai é #app não tem nós irmãos)
<router-view></router-view> é a visualização do sub-roteador e as seguintes páginas de rota são exibidas aqui. Para usar uma analogia, <router-view> é semelhante a um slot. Ao pular para uma rota, a página sob a rota será inserida nesse slot e renderizada e exibida.
【roteiro】
O Vue geralmente é escrito em es6 e exportado com o padrão de exportação. Os itens a seguir podem conter dados de dados, ciclo de vida (montado, etc.), métodos (métodos), etc. Para a sintaxe específica, consulte o documento vue.js. I também usará exemplos para ilustrá-lo mais tarde.
【estilo】
O estilo é encapsulado pela tag de estilo <style></style>, que afeta o global por padrão. Se você deseja definir o escopo para funcionar apenas sob este componente, você precisa adicionar escopo à tag, <style scoped> </style>
Para importar arquivos css externos, primeiro instale o pacote de dependências css-loader para o projeto, abra cmd, insira o diretório do projeto, insira npm install css-loader e pressione Enter. Após a conclusão da instalação, você pode importar os arquivos css necessários na tag de estilo, por exemplo:
<estilo>
import './assets/css/public.css'
</style>
Dessa forma, podemos encapsular os estilos sob o estilo, escrevê-los na pasta css e, em seguida, introduzi-los na página para uso, e toda a página vue parece mais concisa.
4. Arquivo: main.js——[arquivo de entrada]
Este arquivo js é a entrada principal para a configuração da página principal. Principalmente usando o modelo de introdução modular do ES6
main.js apresenta principalmente a estrutura vue, componentes raiz e configurações de roteamento e define a instância vue. Os componentes:{App} no código a seguir é o componente raiz introduzido App.vue
Você também pode introduzir plug-ins mais tarde, é claro, você precisa instalar plug-ins primeiro.
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue' // 引入vue文件
import App from './App'// 引入同目录下的App.vue模块
import router from './router'// 引入vue的路由
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',//定义作用范围就是index.html里的id为app的范围内
router,//引入路由
components: { App },//注册引入的组件App.vue
template: '<App/>'//给Vue实例初始一个App组件作为template 相当于默认组件
})5. roteador——[configuração de roteamento]
Na pasta do roteador, há um index.js, que é o arquivo de configuração de roteamento
import Vue from 'vue' //引用vue文件
import Router from 'vue-router' //引用vue路由模块，并赋值给变量Router
import HelloWorld from '@/components/HelloWorld' //英文HelloWorld.vue模版，并赋值给变量HelloWorld,这里是“@”相当于“../”
Vue.use(Router) //使用路由
export default new Router({
routes: [ //进行路由配置，规定“/”引入到HelloWorld组件
{
path: '/',
name: 'HelloWorld', //这个name暂时不知道用啥用，根据官方文档说的是方便排错的
component: HelloWorld //注册HelloWorld组件
}
]
})A rota com o caminho '/' é definida aqui, e a página correspondente a esta rota é o componente HelloWorld, então quando acessamos http://localhost:8080/#/ na url do navegador, o componente Hello é renderizado
Da mesma forma, podemos configurar várias rotas, como '/index', '/list', etc. Claro, devemos primeiro importar o componente e, em seguida, definir a rota para o componente.
Nota: Se você precisar adicionar componentes, defina o arquivo xx.vue no arquivo de componentes e escreva o código; se você precisar configurar o roteamento, você precisa configurar o "caminho" de roteamento em index.js; você também precisa clique no salto para usar a tag <router-link></router-link>.
Graças ao autor original pela explicação detalhada, este artigo é reproduzido de: Vue scaffolding (vue-cli) construção e estrutura de diretórios explicação detalhada -cli scaffolding build tool, abra a ferramenta de linha de comando e digite: npm install vue-cli -g , após a conclusão da instalação, digite vue -V ( 
https://www.cnblogs.com/goloving/p/8693189.html