Presente la instalación y el uso de Vue-cli en detalle

View-cli

En primer lugar, una cosa debe quedar clara: Vue-CLI ≠ Vue, Vue-CLI es una herramienta de Vue.

1. Componente de archivo único

En muchos proyectos de Vue, usamos Vue.component para definir componentes globales, y luego usamos new Vue ({el: '# container'}) para especificar un elemento contenedor en cada página. Este enfoque funciona bien en muchos proyectos pequeños y medianos, donde JS solo se usa para mejorar vistas específicas. Pero cuando se trata de proyectos más complejos, o cuando su interfaz está completamente impulsada por JS, las siguientes deficiencias se volverán muy obvias:

• Todos los componentes se colocan en el mismo archivo html
• No hay ningún paso de compilación, no puede usar npm para administrar el proyecto
• Falta de resaltado de sintaxis y sugerencias
• No hay soporte de estilo CSS para un solo componente

En respuesta a los problemas anteriores, el marco vue ha lanzado herramientas de vue-cliproyecto 生成. Vue-cli es un sistema completo para el desarrollo rápido basado en Vue.js y está comprometido a estandarizar la base de herramientas en el ecosistema Vue. Garantiza que varias herramientas de construcción se puedan conectar sin problemas en función de configuraciones predeterminadas inteligentes, para que pueda concentrarse en escribir aplicaciones en lugar de pasar días enredado en problemas de configuración.

2. Instalación de herramientas

Vue-cli 3.xo superior requiere Node.js 8.9 o superior (se recomienda v10 o superior).

Sitio web: http://npmjs.com

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

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

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

Si necesita instalar otras versiones, puede utilizar npm install -g @vue/cli@版本号el método para especificar la versión.

Si la última versión no se instaló correctamente, puede probar las siguientes 3 formas de solucionarlo:

• Desconecte la red y use puntos de acceso para compartir el tráfico para ejecutar comandos de instalación
• Instalar otras versiones
• Cambie a la fuente de espejo npm, cambie a taobao

3. Crea un proyecto

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

Los siguientes pasos se toman Vue CLI v4.5.6como ejemplo, solo como referencia, en uso real, configure de acuerdo con sus propias necesidades

• Selección de preajustes

El primero es el proyecto Vue 2 predeterminado que integra babel y eslint, el
segundo es el Vue 3 predeterminado (versión preliminar), que integra babel y eslint, y el
tercero es un tipo personalizado.

• Seleccione la función preestablecida (seleccione según las necesidades de su propio proyecto)

• Elija la versión de Vue

• Seleccione la ESlintconfiguración (si está habilitada)

• Elija eslintcaracterísticas adicionales

• Ya sea para configurar de forma independiente

• Ya sea para guardar el preajuste para esta operación

• Proyecto creado con éxito

4. Introducción a la estructura de directorios

• src (el directorio principal y muchas operaciones en el período posterior se completan en este directorio )
  • main.js: archivo de entrada del proyecto / programa (se ejecutará el código JavaScript de este archivo)
  • App.vue: componente raíz (raíz de todo)
  • componentes: 功能componentes personalizados
  • activos: directorio de recursos estáticos (imágenes, videos, audios, etc.son recursos estáticos)
  • vistas: (no hay un proyecto recién creado, se usará más adelante) para almacenar los 视图componentes

5. Operación y precauciones del proyecto

### 5.1. Inicio y parada del proyecto

Como se muestra en la figura anterior, una vez creado el proyecto, se nos solicita que realicemos un seguimiento de las operaciones:

• Ingrese al directorio del proyecto en la línea de comando
• Ejecute el npm run servecomando para iniciar el proyecto

Después de ejecutar los comandos anteriores, veremos los siguientes efectos, lo que significa que el proyecto se ejecuta correctamente:

Nota: El número de puerto predeterminado comenzará desde 8080. Si inicia otros proyectos nuevamente, escuchará en 8081, 8082 ....

Si necesita detener un proyecto en ejecución, puede elegir cualquiera de los dos métodos siguientes:

• Cierra la terminal
• Presione la combinación de teclas Ctrl + C(Cancelar) en el terminal , luego seleccione Yy escriba 回车(como se muestra a continuación)

5.2. Acerca de ESlint

ESlint se usa para estandarizar la codificación de proyectos. Los proyectos grandes generalmente son desarrollados por varias personas. Para evitar algunos hábitos de programación personales 坑自己坑别人, ESlint se usa en el proyecto para 紧箍咒obligar a los desarrolladores a prestar atención a las especificaciones del código. Por ejemplo, sin usar ESlint, JS nos permite declarar un invariante pero no usarlo. Si se utiliza ESlint, se informará el siguiente error en el caso anterior:

En cuanto al informe de errores de ESlint, existe una referencia de error, que se puede consultar en la siguiente dirección: https://cn.eslint.org/docs/rules/