Vue series nine: el primer proyecto vue-cli

9.1 ¿Qué es vue-cli?

Se utiliza un andamiaje proporcionado oficialmente por vue-cli para generar rápidamente una plantilla de proyecto vue, la
  estructura de directorio predefinida y el código básico, al igual que cuando creamos un proyecto Maven, podemos elegir crear un proyecto esqueleto. el andamiaje, nuestro desarrollo es más rápido,
  la funcionalidad del proyecto

  • Estructura de directorio unificada
  • depuración local
  • despliegue en caliente
  • prueba de unidad
  • Embalaje integrado en línea

9.2, el entorno requerido

  • Node.js: http://nodejs.cn/download/
    La instalación es el siguiente paso sin cerebro, solo instálelo en su propio directorio de entorno
  • Git: https://git-scm.com/doenloads
    Espejo: https://npm.taobao.org/mirrors/git-for-windows/

Confirme que nodejs se instaló correctamente:

  • ¡ Ingrese bajo cmd para node -vver si el número de versión se puede imprimir correctamente!
  • ¡ Ingrese bajo cmd para npm -vver si el número de versión se puede imprimir correctamente!
    ¡Este npm es una herramienta de administración de paquetes, que es similar a la instalación del software apt en Linux!
      Si instala Node.js Taobao Mirror Accelerator (cnpm)
      , la descarga será mucho más rápida ~
# -g 就是全局安装
npm install cnpm -g

# 或使用如下语句解决npm速度慢的问题
npm install --registry=https://registry.npm.taobao.org

El proceso de instalación puede ser un poco lento~, ¡ten paciencia! Aunque cnpm está instalado, ¡trate de usarlo lo menos posible!
  Ubicación instalada:C:\Users\administrator\AppData\Roaming\npm

 

 

Cargando...
  Volver a cargar Desinstalar vue-cli

cnpm instal1 vue-cli-g
#测试是否安装成功#查看可以基于哪些模板创建vue应用程序,通常我们选择webpack
vue list

Cargando... Recarga cancelada

9.3 La primera aplicación vue-cli

1. Cree un proyecto Vue. Vamos a crear una carpeta vacía en la computadora. Crearé un nuevo directorio debajo de la unidad D.

D:\Project\vue-study;

2. Cree una aplicación vue basada en la plantilla del paquete web

#1、首先需要进入到对应的目录 cd D:\Project\vue-study
#2、这里的myvue是顶日名称,可以根据自己的需求起名
vue init webpack myvue

Puede elegir no en todo el camino;
  descripción:

  • Nombre del proyecto: nombre del proyecto, presione Entrar por defecto
  • Descripción del proyecto: descripción del proyecto, simplemente presione Entrar por defecto
  • Autor: el autor del proyecto, presione Entrar por defecto
  • Instale vue-router: ya sea para instalar vue-router, elija n para no instalar (debe agregarlo manualmente más adelante)
  • Use ESLint para filtrar su código: ya sea para usar ESLint para verificar el código, seleccione n para no instalar (debe agregarlo manualmente más tarde)
  • Configurar pruebas unitarias: relacionado con las pruebas unitarias, seleccione n para no instalar (debe agregarse manualmente más adelante)
  • Setupe2etests con Nightwatch: relacionado con las pruebas unitarias, seleccione n para no instalar (debe agregarlo manualmente más adelante)
  • Si ejecutamos npm install para usted después de que se haya creado el proyecto: inicialice directamente después de la creación, seleccione n, lo ejecutaremos manualmente; ¡ejecute el resultado!

(1) Inicializar y ejecutar

cd myvue
npm install
npm run dev

Una vez completada la ejecución, hay muchas más dependencias en el directorio.

Cuando hay un problema, puede ver el aviso para solucionarlo de la siguiente manera
Cargando... Vuelva a cargar para cancelar

 

Supongo que te gusta

Origin blog.csdn.net/qq_21137441/article/details/123768261
Recomendado
Clasificación