Comience su viaje de entrada vue
Crear un proyecto vue es muy simple, ¡solo hay unos pocos pasos a continuación!
1. Instala node.js
¡Abra el sitio web oficial https://nodejs.org/en y siga las instrucciones para descargar o instalar directamente según su sistema!
Es muy simple. Después de la instalación, abra el terminal para verificar. Si los siguientes comandos pueden generar el número de versión normalmente, ¡tendrá éxito!
$ node -v
$ npm -v
$ npx -v
2. Ejecute npm init vue@latest
Este paso ya es entrar oficialmente en la creación del proyecto vue, y además es muy sencillo, abre la terminal y ejecuta el siguiente comando, presiona Enter y sigue las indicaciones para ingresar el nombre del proyecto, y luego presiona Enter directamente para todos los siguientes elecciones!
$ npm init vue@latest
3. Ejecute cd vue-todo-list, npm i, npm run dev
¡Este paso es para comenzar a ejecutar el proyecto, y puede abrirlo en el navegador para explorar su proyecto vue!
¡Abra la terminal y solo necesita ejecutar 3 comandos!
$ cd vue-todo-list
$ npm i
$ npm run dev
4. Escribe tu código
Los comandos anteriores han preparado la estructura básica de directorios y archivos del proyecto. Ahora lo que debe hacer es usar componentes para construir e implementar aplicaciones de acuerdo con sus necesidades.
En este momento, debe abrir el documento oficial de vue https://cn.vuejs.org/guide/essentials/application.html y leer el documento mientras escribe el código. Aquellos con una gran capacidad de comprensión pueden leer el documento antes de ingresar la codificación, de modo que puedan saber aproximadamente qué módulos encontrar para lograr qué.
Ok, ¡ahora abre tu vscode y escribe el código!
5. Ejecute la compilación de ejecución de npm
¡El código codificado no solo se puede ver en su propia computadora, sino que también se puede mostrar para que otros lo vean!
¡Entonces es necesario empaquetar el proyecto y subirlo al servidor para su publicación! ¡Y solo se necesita un comando!
$ npm run build
6. Instale nginx en el servidor para publicar vue
Inicie sesión en un servidor como Alibaba Cloud o Tencent Cloud, instale nginx y luego modifique el archivo de configuración de nginx para agregar try_filesy rewriteEstas dos configuraciones son para evitar que aparezca la página 404 cuando el navegador actualiza el proyecto Vue cuando hay una 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;
}
}
