1. Luego comenzamos con el entorno más simple:
- Instale node.js, descargue e instale node desde el sitio web oficial de node.js , el proceso de instalación es muy simple, hasta el "siguiente paso" (instalación tonta). Una vez completada la instalación, abra la herramienta de línea de comandos (win + r, y luego ingrese cmd), ingrese nodo -v, como se muestra a continuación, si aparece el número de versión correspondiente, la instalación es exitosa.
Debe explicarse aquí, porque después de descargar e instalar node.js en el sitio web oficial, ya viene con npm (herramienta de administración de paquetes) .También se debe tener en cuenta que la versión de npm es preferiblemente 3.xx o superior, para no afectar la posterior.
- Instale el espejo Taobao, abra la herramienta de línea de comando y copie esto (npm install -g cnpm --registry = https://registry.npm.taobao.org ) (la copia manual aquí es la que tiene el botón derecho del mouse, la razón específica no es mucho Explicación), la instalación aquí se debe a que el servidor npm que utilizamos es extraño. A veces instalamos "dependencias" muy lentamente, muy lentamente, así que usamos este cnpm para instalar las "dependencias" que dijimos que son necesarias. Una vez completada la instalación, ingrese cnpm -v, como se muestra en la figura a continuación, si aparece el número de versión correspondiente, la instalación es exitosa.
- Instale webpack, abra la herramienta de línea de comando e ingrese: npm install webpack -g, ingrese webpack -v después de que se complete la instalación, como se muestra en la figura a continuación, si aparece el número de versión correspondiente, la instalación es exitosa.
-
Instale la herramienta de construcción de andamios vue-cli, abra la herramienta de línea de comando e ingrese: npm install vue-cli -g, una vez completada la instalación, ingrese vue -V (tenga en cuenta que esta es la "V" mayúscula), como se muestra a continuación, si aparece el número de versión correspondiente, Significa que la instalación es exitosa.
Segundo, a través de los cuatro pasos anteriores, necesitamos preparar el entorno y las herramientas están listas, luego comenzar a usar vue-cli para construir el proyecto,
Primero instale los paquetes dependientes:
1. Crear una sola carpeta de proyecto py en pycharm
2. Abra la línea de comando e ingrese el comando: npm init -y ------------------ El proyecto de administración genera automáticamente un paquete de dependencia de archivo json para almacenar toda la información de dependencia
3. Instale herramientas para empaque y compresión: (herramienta de empaque global) -> npm install webpack webpack-cli -g -D
(Herramienta de empaquetado parcial) -> npm install webpack webpack-cli -g
4. Instale vue global scaffolding: npm i vue-cli -g
3. El proyecto comenzó a construirse:
1. Cree un proyecto (tenga en cuenta que "exprice" aquí es el nombre del proyecto se puede decir que se llama casualmente, pero lo principal es "no se puede usar chino"): vue init webpack project name
Resolver consejos de instalación:
$ vue init webpack exprice --------------------- Este es el comando para instalar vue scaffolding.
Esto instalará la versión Vue 2.x de la plantilla. ---- ----------------- Aquí hay una descripción del proyecto que creará una versión vue 2.x.
Para Vue 1.x use: vue init webpack # 1.0 exprice
? Nombre del proyecto (exprice) - ------------------- Nombre del proyecto
? Nombre del proyecto exprice
? Descripción del proyecto (un proyecto Vue.js) --------------- ------ Descripción del proyecto
? Descripción del proyecto Un proyecto Vue.js
? Autor Datura --------------------- Creador del proyecto
? Autor Datura
? Vue build ( Utilice las teclas de flecha)
? Vue build standalone
? Install vue-router? (Y / n) --------------------- Ya sea que instale Vue router, que luego es spa (¿Pero los módulos requeridos por la aplicación de la página)
? ¿Instalar vue-router? Sí
? Use ESLint para alinear su código? (S / n) n --------------------- Ya sea para habilitar las reglas de detección de eslint, personalmente recomiendo no
. Use ESLint para ¿puede indicar su código? No
? Configurar pruebas de unidad con Karma + Mocha? (S / n)
? Configurar pruebas de unidad con Karma + Mocha? Sí
? Configurar pruebas e2e con Nightwatch? (S / n) n -------- -------------------- Ya sea para habilitar las reglas de detección de eslint, aquí hay una recomendación personal muy rigurosa
¿ No ? ¿Configurar pruebas e2e con Nightwatch? Sí¿Deberíamos ejecutar `npm install` para usted después de que se haya creado el proyecto? (Recomendado) npm --------------------------- Creación del proyecto ¿Debo ejecutar npminstall para ti?
Analice e instale el comando de paso predeterminado:
vue-cli · Generado "exprice".
Para comenzar: --------------------- Aquí se explica cómo iniciar este servicio
cd exprice- ---------------------- Cambie a la ruta real del proyecto
npm install ------------------- ----- Instalar npm
npm run dev -------------------------- Comando para iniciar el proyecto
2. Siga el comando prompt cd para ingresar el directorio del proyecto creado (aquí está el nombre del proyecto que creó);
3. El proyecto de instalación depende de: npm install, porque el archivo package.json ya existe en el proceso de compilación automático, así que simplemente instale la dependencia aquí. No instale desde el espejo doméstico cnpm (causará que falten muchas bibliotecas dependientes más adelante), pero si realmente no logra instalar "a" horas, use: cnpm install
4. Instale el módulo de enrutamiento vue vue-router y el módulo de solicitud de red vue-resource, ingrese: cnpm install vue-router vue-resource --save.
4. El directorio "exprice" creado es el siguiente:
Pycharm deconstruye y muestra lo siguiente: Explico brevemente para qué sirven los distintos directorios:
-
Para iniciar el proyecto, ingrese: npm run dev Después de que el servicio se inicie con éxito, el navegador abrirá una "página de bienvenida" de forma predeterminada, como se muestra a continuación:
¡Hasta ahora, se ha construido un proyecto simple! ! ! !
Nota: Aquí está el puerto 8080 predeterminado iniciado por el servicio, así que asegúrese de que su puerto 8080 no esté ocupado por otros programas.
Fuente original: https://www.cnblogs.com/Hei-Tao-K/p/10208654.html