Cómo utilizar vuecli
¿Qué es vue? Es un marco progresivo para crear interfaces de usuario (explicación en el sitio web oficial). ¿Qué es un marco progresista? La respuesta corta es defender lo mínimo. Estos son conceptos que sólo tú puedes ver y entender. Mil lectores tienen mil Hamlets, pero poca explicación. La documentación oficial de Vue es muy completa.
Utilice vue-cli para crear vue rápidamente.
Para proyectos, vue-cli es muy fácil de usar, pero algunas personas tendrán dolor de cabeza al instalar vue-cli y el contenido relacionado en el entorno de compilación inicial. También encontré bastantes dificultades al construir el entorno del proyecto vue-cli, por lo que escribí un tutorial sobre cómo construir el entorno y analicé cada paso tanto como fuera posible. Los amigos que lo necesiten pueden consultarlo. Si les gusta, pueden hacer clic para darle me gusta o seguirse. Espero que pueda ayudar a todos.
Ventajas del andamiaje vue-cli:
Existe un diseño de arquitectura de proyecto Vue maduro que puede inicializar rápidamente un proyecto Vue.
Vue-cli es un andamio con soporte oficial y se actualizará de forma iterativa en esta versión.
Vue-cli proporciona un servidor de prueba de nodo local, que se puede iniciar utilizando los comandos proporcionados por vue-cli.
Solución online integrada de packaging.
5. Tiene algunas ventajas, que incluyen modularización, traducción, preprocesamiento, carga en caliente, detección estática y pruebas automáticas. Con un uso profundo, descubrirá el poder de vue-cli.
Este tutorial está basado en el sistema Windows.
Lo siguiente comienza oficialmente a construir el andamio de vue-cli.
Herramientas de línea de comandos
Las herramientas de línea de comandos son la base de nuestro funcionamiento de npm. Esto es necesario. Muchos tutoriales no están escritos con claridad. Tan pronto como salieron esos tutoriales, se publicaron muchos comandos. Al principio, no sabía dónde utilizar la herramienta de línea de comandos. .
Herramienta de línea de comandos Git Bash
En 1.Windows, recomiendo usar la herramienta de línea de comandos Git Bash que viene con la herramienta de administración de escritorio de GitHub. Simplemente descargue e instale normalmente.
Ps: Por supuesto, si desea utilizar su propia herramienta de línea de comando cmd de terminal, puede hacerlo, pero no es tan conveniente como git bash.
Instalar node.js
1. Simplemente descargue e instale node.js normalmente desde el sitio web oficial chino de node.js. No hay nada especial a lo que prestar atención (instalación tonta).
2. Después de descargar e instalar node.js desde el sitio web oficial, ya tiene su propio npm (herramienta de administración de paquetes) y no es necesario instalar otro npm.
3. Preste atención a descargar node.js o superior para evitar el impacto de versiones inferiores.
4. Abra la herramienta de línea de comando (cualquier carpeta) e ingrese las líneas de comando nodo -v y npm -v como se muestra a continuación. Si aparece el número de versión correspondiente, la instalación se realizó correctamente.
Instalar imágenes de Taobao
Relacionado con Cnpm (Taobao Mirror):
Esta es una imagen completa de npmjs.org, utilizada para sincronizar módulos en npm.
La frecuencia de sincronización de cnpm es de 10 minutos (los módulos recién lanzados se están quedando atrás y la sincronización lleva tiempo, por lo que puede usar npm si no puede esperar).
El motivo para instalar cnpm: el servidor de npm está en el extranjero, por lo que a veces instalamos "módulos" muy lentamente.
El papel de cnpm: la imagen de Taobao sincroniza los módulos superiores a npm con los servidores domésticos, lo que mejora el tiempo que dedicamos a instalar módulos.
Una vez instalada la imagen de Taobao, se pueden utilizar las líneas de comando cnpm y npm sin conflictos.
Método de instalación: abra la herramienta de línea de comando e ingrese la línea de comando:
$ npm install -g cnpm - registro=pm Uso:
$ cnpm install [nombre]
Al instalar el módulo, simplemente reemplace npm con cnpm. Muchos codificadores en China utilizan cnpm. Personalmente recomiendo a todos que lo instalen.
Adjunto: sitio web espejo de Taobao,
Instalar paquete web
Método de instalación: abra la herramienta de línea de comando e ingrese la línea de comando:
npm install webpack -g
Ingrese webpack -v después de una instalación exitosa. Si aparece el número de versión correspondiente, la instalación se realizó correctamente.
Instale las herramientas de construcción de andamios vue-cli
Método de instalación: instalación global, en cualquier carpeta, ingrese la línea de comando:
npm install vue-cli -g
Una vez completada la instalación, ingrese la línea de comando vue -V para verificar el número de versión correspondiente:
Inicialice el proyecto vue a través de vue-cli.
A través de los pasos anteriores, hemos preparado el entorno y las herramientas necesarias para instalar el andamio. A continuación, podemos usar vue-cli para inicializar el proyecto.
Crea una nueva carpeta de vuetext para colocar el proyecto.
Haga clic derecho en la carpeta encima de la nueva carpeta, abra la herramienta de línea de comando e ingrese la línea de comando:
Vue init webpack vuetext1 (nombre del proyecto)
Nota: El nombre del proyecto no puede estar en letras mayúsculas ni en chino.
Explique este comando, lo que significa inicializar un proyecto vue, en el que webpack es la herramienta de compilación, es decir, todo el proyecto se basa en webpack. Entre ellos, vuetext1 es el nombre de toda la carpeta del proyecto. Esta carpeta se generará automáticamente en el directorio que especifique.
Análisis detallado de la configuración de la opción del proyecto de inicialización de vue-cli
$ vueinit web pack vuetext 1 - Comando para instalar vue-cli e inicializar el proyecto vue.
El directorio de destino existe. ¿Continuar? (s/n) y - Encuentra el directorio de vuetext1. ¿Quieres continuar?
El directorio de destino existe. ¿Continuar? Sí
Nombre del proyecto (vuetext1): nombre del proyecto (el valor predeterminado es el nombre de la carpeta), ps: el nombre del proyecto no puede estar en mayúsculas ni en chino; de lo contrario, se informará un error.
Nombre del proyecto vuetext1
Descripción del proyecto (proyecto avoe.js): descripción del proyecto, puede escribirla usted mismo.
Descripción del proyecto Proyecto Vue.js
Autor (obk oro 1) - creador del proyecto.
Autor OBKoro1
Construcción de Vue (use las teclas de flecha): elija un método de empaquetado. Hay dos métodos (en tiempo de ejecución e independiente), use el predeterminado.
Vue se construye de forma independiente
¿Instalar el enrutador Vue? (S/n) y -
¿Instalar el enrutador vue? Sí
¿Lint tu código con ESLint? (s/n) n -Ya sea para habilitar las reglas de detección de eslint, personalmente recomiendo seleccionar No aquí, porque varios códigos a menudo tienen errores y los principiantes todavía están preocupados por instalarlos.
¿Lint tu código con ESLint? No
¿Configurar pruebas unitarias con Karma + Mocha? (sí/no): si se deben instalar pruebas unitarias.
¿Configurar pruebas unitarias con Karma + Mocha? Sí
¿Configurar pruebas e2e con Nightwatch? (s/n)y)-Si se deben instalar las pruebas e2e.
¿Configurar pruebas e2e con Nightwatch? Sí
vue-cli generó "vuetext1".
Para empezar :) - ¿Cómo empezar?
CD vuetext 1) - Ingresa el proyecto que instalaste.
Instalación NPM) - Instalar dependencias del proyecto.
NPM ejecutar desarrollo): ejecutar el proyecto.
La documentación se puede encontrar en la documentación oficial de https://vue js-templates.github.io/webpack)-vue-CLI.
Ahora el proyecto vuetext1 se ha inicializado inicialmente y contiene algunos archivos, pero aún no se puede ejecutar correctamente.
3. Cómo ejecutar el proyecto
Ingrese a la carpeta que acaba de crear en el proyecto vuetext1 y haga clic derecho en la herramienta de línea de comando git bash en la carpeta del proyecto vuetext1.
Instalar dependencias del proyecto. Línea de comando: instalación de npm. Cuando se inicializa el proyecto, el archivo package.json ya existe. Puede usar npm install directamente para instalar las dependencias requeridas por el proyecto; de lo contrario, el proyecto no se ejecutará normalmente.
El directorio "vuetext1" creado es el siguiente:
Crear una estructura de proyecto completa
En este punto, hemos inicializado con éxito un proyecto vue usando vue- cli.
Inicie el proyecto:
Ejecute la línea de comando npm run dev en el directorio vuetext1 para iniciar el servicio. Una vez que el servicio se haya iniciado correctamente, el navegador abrirá una "Página de bienvenida" de forma predeterminada, como se muestra a continuación.
El proyecto vue-cli se ha lanzado con éxito.
Nota: El servicio predeterminado aquí es el puerto local 8080, así que asegúrese de que su puerto 8080 no esté ocupado por otros programas. Cuando se están ejecutando otros proyectos de Vue, puede usar ctrl+c para interrumpir la operación.
Creo que después de leer este caso, dominas el método. Para obtener contenido más interesante, preste atención a otros artículos relacionados en Gxl.
Lectura recomendada:
Cómo readline lee y escribe contenido línea por línea
Explicación detallada del uso de mutaciones y funciones de Vuex