Apresente a instalação e o uso do Vue-cli em detalhes

Ver-cli

Em primeiro lugar, uma coisa deve ficar clara: Vue-CLI ≠ Vue, Vue-CLI é uma ferramenta Vue.

1. Componente de arquivo único

Em muitos projetos Vue, usamos Vue.component para definir componentes globais e, em seguida, usamos new Vue ({el: '# container'}) para especificar um elemento de recipiente em cada página. Essa abordagem funciona bem em muitos projetos de pequeno e médio porte, onde JS é usado apenas para aprimorar visualizações específicas. Mas quando em projetos mais complexos, ou quando seu front-end é totalmente orientado por JS, as seguintes deficiências se tornarão muito óbvias:

• Todos os componentes são colocados no mesmo arquivo html
• Não há etapa de construção, você não pode usar o npm para gerenciar o projeto
• Falta de realce de sintaxe e dicas
• Não há suporte de estilo css para um único componente

Em resposta aos problemas acima, o framework vue lançou ferramentas de vue-cliprojeto 生成. O Vue-cli é um sistema completo para desenvolvimento rápido baseado em Vue.js e está comprometido em padronizar a base da ferramenta no ecossistema Vue. Ele garante que várias ferramentas de construção possam ser conectadas sem problemas com base em configurações padrão inteligentes, para que você possa se concentrar em escrever aplicativos em vez de passar dias emaranhado em problemas de configuração.

2. Instalação de ferramentas

Vue-cli 3.x ou superior requer Node.js 8.9 ou superior (v10 ou superior é recomendado).

Site: http://npmjs.com

## 安装
npm install -g @vue/cli

## 安装成功后，检查
vue --version
vue -V
#  Vue和VueCLI是两回事

## 卸载  其实这个不经常使用的
npm uninstall -g @vue/cli

Se precisar instalar outras versões, você pode usar npm install -g @vue/cli@版本号o método para especificar a versão.

Se a versão mais recente não for instalada com sucesso, você pode tentar as três maneiras a seguir para resolver o problema:

• Desconecte a rede e use pontos de acesso para compartilhar o tráfego para executar comandos de instalação
• Instale outras versões
• Mude para a fonte de espelho npm, mude para taobao

3. Crie um projeto

# 首先需要进入到对应的目录中(英文目录不要有空格及中文),执行如下命令
# 如果当前你的终端工作路径带有中文或者空格，你可以使用`cd 路径`形式进行路径切换，切换到符合要求的路径中
vue create 项目名称(创建时会自己以对应的项目名称生成目录)
## 例
vue create myproject
# 上述命令中，可以允许变的就是`myproject`部分

As etapas a seguir são tomadas Vue CLI v4.5.6como exemplo, apenas para referência, em uso real, configure de acordo com suas próprias necessidades

• Seleção predefinida

O primeiro é o projeto Vue 2 padrão que integra babel e eslint, o
segundo é o Vue 3 padrão (versão de visualização), que integra babel e eslint, e o
terceiro é um tipo personalizado

• Selecione a função predefinida (selecione de acordo com suas próprias necessidades de projeto)

• Escolha a versão Vue

• Selecione a ESlintconfiguração (se habilitado)

• Escolha eslintrecursos adicionais

• Se deve configurar de forma independente

• Se deve salvar a predefinição para esta operação

• Projeto criado com sucesso

4. Introdução à estrutura de diretórios

• src (o diretório principal e muitas operações no período posterior são concluídas neste diretório )
  • main.js: arquivo de entrada de projeto / programa (o código JavaScript neste arquivo será executado)
  • App.vue: componente raiz (raiz de tudo)
  • componentes: 功能componentes personalizados
  • ativos: diretório de recursos estáticos (fotos, vídeos, áudios, etc. são recursos estáticos)
  • visualizações: (não existe um projeto recém-criado, ele será usado mais tarde) para armazenar os 视图componentes

5. Operação e precauções do projeto

### 5.1. Início e parada do projeto

Conforme mostrado na figura acima, após a criação do projeto, somos solicitados a acompanhar as operações:

• Insira o diretório do projeto na linha de comando
• Execute o npm run servecomando para iniciar o projeto

Depois de executar os comandos acima, veremos os seguintes efeitos, o que significa que o projeto foi executado com sucesso:

Nota: O número da porta padrão começará em 8080. Se você iniciar outros projetos novamente, ele ouvirá em 8081, 8082 ....

Se você precisar interromper um projeto em execução, pode escolher um dos dois métodos a seguir:

• Feche o terminal
• Pressione a combinação de teclas Ctrl + C(Cancelar) no terminal , selecione Ye digite 回车(conforme mostrado abaixo)

5.2. Sobre ESlint

ESlint é usado para padronizar a codificação de projetos.Projetos grandes geralmente são desenvolvidos por várias pessoas.Para evitar alguns hábitos de programação pessoal 坑自己坑别人, ESlint é usado no projeto para 紧箍咒forçar os desenvolvedores a prestar atenção às especificações do código. Por exemplo, sem usar ESlint, JS nos permite declarar um invariante, mas não usá-lo. Se ESlint for usado, o seguinte erro será relatado no caso acima:

Em relação ao relatório de erro do ESlint, há uma referência de erro, que pode ser consultada no seguinte endereço: https://cn.eslint.org/docs/rules/