Eu quero aprender vue! Então, como iniciar um novo projeto vue? Comece sua jornada de entrada no vue

Criar um projeto vue é muito simples, são apenas alguns passos abaixo!

1. Instale o node.js

Abra o site oficial https://nodejs.org/en e siga as instruções para baixar ou instalar diretamente de acordo com o seu sistema!
É muito simples. Após a instalação, abra o terminal para verificação. Se os seguintes comandos puderem gerar o número da versão normalmente, será bem-sucedido!

$ node -v
$ npm -v
$ npx -v

2. Execute npm init vue@latest

Esta etapa já está entrando oficialmente na criação do projeto vue e também é muito simples, abra o terminal e execute o seguinte comando, pressione Enter e siga os prompts para inserir o nome do projeto e pressione Enter diretamente para todos os próximos escolhas!

$ npm init vue@latest

3. Execute cd vue-todo-list, npm i, npm run dev

Esta etapa é para iniciar a execução do projeto, e você pode abri-lo no navegador para navegar pelo seu projeto vue!
Abra o terminal e só precisa executar 3 comandos!

$ cd vue-todo-list
$ npm i
$ npm run dev

4. Escreva seu código

Os comandos acima prepararam a estrutura básica de diretórios e arquivos do projeto, agora o que você precisa fazer é usar componentes para construir e implementar aplicações de acordo com suas necessidades.

Neste momento, você precisa abrir o documento vue oficial https://cn.vuejs.org/guide/essentials/application.html e ler o documento enquanto digita o código. Aqueles com forte capacidade de compreensão podem ler o documento antes de inserir a codificação, para que possam saber aproximadamente quais módulos encontrar para alcançar o quê.

Ok, agora abra seu vscode e digite o código!

5. Execute a compilação npm run

O código codificado não só pode ser visto em seu próprio computador, mas também exibido para outros verem!
Portanto, é necessário empacotar o projeto e carregá-lo no servidor para publicação! E leva apenas um comando!

$ npm run build

6. Instale o nginx no servidor para publicar o vue

Faça login em um servidor como Alibaba Cloud ou Tencent Cloud, instale o nginx e modifique o arquivo de configuração do nginx para adicionar try_filese rewrite. Essas duas configurações são para evitar que a página 404 apareça quando o navegador atualizar o projeto Vue quando houver uma página .

# nginx.conf
server {
    listen       80;
    server_name  _;

    location / {
        root   /var/www/build/vue-todo-list;
        #重点配置
        try_files $uri $uri/ @router;
        index  index.html index.htm;
    }
    #重点配置
    location @router {
    	rewrite ^.*$ /index.html last;
    	# 匹配所有	/index.html last;
	}

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }    
}