vue-cli versión ver, actualizar, crear proyecto

vista de versión de vue-cli

vue -V

Vue-cli 3.0+ ya no usará vue-cli. Si instala 3.0, necesita usar nuevos comandos, de la siguiente manera:

npm install @vue/cli -g

Instalación y uso de vue / cli4

1. Si ha instalado la versión siguiente vue-cli3, primero debe desinstalarla. El comando es el siguiente:

//首先查看是否已安装过 vul-cli 和 vul-cli 的版本
vue -V
//如是有的话且版本小于3.0，就用下面命令卸载
npm uninstall vue-cli -g

2. Instale vue-cli 3.0 o superior (actualmente 4.5.8)

// 安装vue-cli  
npm install @vue/cli -g 
//也可使用cnpm 来安装 ，比较快（前提是使用了淘宝镜像）
cnpm install @vue/cli -g

3. Crea un proyecto

//1. 命令 回车
  vue create 项目名
//2.选择自定义配置
  Manually select features
//3.选择你需要的配置（用空格选中）
  Babel (必选)
  TypeScript（项目中使用ts开发的话，就勾选）
  Progressive Web App (PWA) Support  (接口缓存，优化项目)
  Router
  Vuex 
  CSS Pre-processors (css预处理器，需要)
  Linter / Formatter (代码格式，一般默认选中)
  Unit Testing (代码测试)
  E2E Testing（需求界面测试）
//4.根据你选的配置进行Y/N选择
//5.选择完之后，就可以运行项目  
npm run serve

4. Crear instrucciones de configuración del proyecto

   babel:
   Analiza nuestro código es6, ¿por qué usarlo? Esto se debe a que algunos navegadores IE, e incluso versiones inferiores de otros navegadores, no pueden reconocer el código es6, pero hay muchos códigos es6 en vue. En este momento, podemos usar la herramienta babel para traducir nuestro código es6 en navegación. El código reconocido por el dispositivo. Entonces debes elegir.

   
   Si TypeScript se desarrolla utilizando TypeScript en el proyecto, elija

   Aplicación web progresiva (PWA)
   Las aplicaciones web progresivas (aplicaciones web progresivas)
   son una experiencia que combina la mejor web y las mejores aplicaciones. A partir de la primera visita en la pestaña del navegador, son muy útiles para los usuarios y no requieren instalación. A medida que los usuarios establecen gradualmente una relación con la aplicación, esta se vuelve cada vez más poderosa. Incluso en una web en bloque, puede cargarse rápidamente, enviar notificaciones push relevantes, tener un icono en la pantalla de inicio y cargar como una experiencia superior a pantalla completa.

   Enrutamiento del
   enrutador, elíjalo si es necesario o impórtelo más tarde

   
   Almacén Vuex , elija si es necesario o preséntelo más tarde

   Preprocesador CSS
   seleccione preprocesador CSS

   
   Verificación de formato y estilo de código de Linter / Formatter

   a. ESLint con prevención de errores
   solo configura las reglas recomendadas utilizando el sitio web oficial de ESLint

   b. La configuración de ESLint + Airbnb
   utiliza las reglas recomendadas por el sitio web oficial de ESLint + la configuración de terceros de Airbnb

   c. ESLint + La configuración estándar
   utiliza las reglas recomendadas por el sitio web oficial de ESLint + Configuración estándar de terceros

   d. ESLint + Prettier
   utiliza las reglas recomendadas por el sitio web oficial de ESLint + Configuración de terceros de
   Prettier Prettier es principalmente para la unificación de estilos. Herramienta de formato de código

   Prueba de
   código de prueba unitaria

   E2E Testing Prueba de
   interfaz de demanda

   elegir características adicionales de pelusa
   verificación de código
   Pelusa al guardar ( marcar en guardar)
   Pelusa y corregir en la confirmación (verifique cuando se corrija y confirme)

   ¿Dónde prefiere colocar config de Babel
   , PostCSS, ESLint, etc.? Configuración de tienda
   en los archivos de configuración específicos (guardar en otro archivo de configuración especial)
   un En package.json (guardar en el interior package.json)