Prefácio:
Se você deseja desenvolver uma plataforma, não precisa apenas dominar a tecnologia de back-end, mas também exibi-la por meio da página de front-end, que não apenas obtém um efeito estético, mas também facilita nossa operação para obter um bom desempenho. efeito interativo.
Aqui entrei em contato com o framework front-end Vue. Existem muitas bibliotecas úteis de componentes front-end baseados em Vue no mercado, como Ele.me Mint UI para aplicativos, We UI para páginas da web e miniaplicativos WeChat no Tencent WeChat , e servindo interfaces de PC. iView UI, layUI para todos os níveis, e o Element UI lançado por Ele.me, que está prestes a aprender, é usado principalmente para a estrutura de exibição da interface do navegador;
1. Instale o node.js
Instale node-v12.18.2-x64.msi no diretório "Pacote de instalação de software"
Endereço de download: https://nodejs.org/dist/v10.16.3/node-v10.16.3-x64.msi
Na janela do terminal, verifique se o nó ou npm correspondente está instalado:
nó -v
npm -v
2. Instale o Taobao cnpm
NPM Mirror_NPM Download Address_NPM Installation Tutorial-Alibaba Open Source Mirror Station
Abra o terminal e execute o seguinte comando:
npm install -g cnpm --registry= https://registry.npm.taobao.org
Consultar informações do cnpm: cnpm -v
3. Instale o andaime vue-cli
#使用npm
npm install -g @vue/cli
#或者使用淘宝npm镜像源（建议使用cnpm）
cnpm install -g @vue/cliSe o seguinte erro for relatado durante o processo de instalação:
Para instalá-lo, você pode executar: npm install --save vue-runtime-helpers
Execute o seguinte comando:
npm install --save vue-runtime-helpers
4. Use vs code ou webstorm para criar projetos de engenharia
Recomenda-se instalar o git para gerenciamento de código-fonte
#创建项目
vue create 项目名
或者在webstorm里新建一个vue.js的项目
#如果使用gitbash
winpty vue.cmd create 项目名
#或者创建默认工程目录
vue create 项目名 --default
#用命令vue init webpack+项目名称
#来生成和初始化项目，推荐初始化项目名称到加入路由那处选择默认，之后全选no，之后npm初始化那里选推荐默认选项npm就好;
如下图所示： 
Digite vue na janela do terminal
Abra o diretório do projeto criado com um editor
5. Inicie o projeto
Método 1:
Abra o terminal e execute o seguinte comando:
cnpm executar servir
Método 2:
Vá para o diretório do projeto especificado para executar o projeto
diretório do projeto cd (cd my_vue)
cnpm executar servir
Relação de componentes:
diretório de componentes - armazena arquivos de subcomponentes
App.vue----arquivo de componente pai
- Quando o componente pai quiser usar o componente filho, preste atenção:
- Importar módulos de subcomponentes em <script>
- Declarar subcomponentes em componentes no padrão de exportação
- Referencie isso em modelos
resolução de diretório
| diretório/arquivo | ilustrar |
|---|---|
| configuração | Diretório de configuração, incluindo números de porta, etc. Podemos usar o padrão para iniciantes. |
| node_modules | Dependências do projeto carregadas pelo npm |
| origem | Aqui está o diretório que queremos desenvolver, basicamente tudo a ser feito está neste diretório. Ele contém vários diretórios e arquivos:
|
| estático | Diretório de recursos estáticos, como imagens, fontes, etc. |
| teste | Diretório de teste inicial, pode ser excluído |
| arquivos .xxxx | Estes são alguns arquivos de configuração, incluindo configuração de sintaxe, configuração de git, etc. |
| index.html | Arquivo de entrada inicial, você pode adicionar algumas metainformações ou códigos estatísticos. |
| pacote.json | Arquivo de configuração do projeto. |
| README.md | Documentação do projeto, formato de remarcação |