Instalación de andamios Vue y nuevos proyectos (e introduzca element-ui y axios)

Uno, instale vue.js

1. Introducción

Vue.js (pronunciado / vjuː /, similar a view) es un marco progresivo para construir interfaces de usuario. A diferencia de otros marcos de trabajo pesados, Vue adopta un diseño de desarrollo incremental de abajo hacia arriba. La biblioteca principal de Vue solo se enfoca en la capa de vista y es muy fácil de aprender y muy fácil de integrar con otras bibliotecas o proyectos existentes. Por otro lado, Vue es totalmente capaz de impulsar aplicaciones complejas de una sola página desarrolladas con componentes de un solo archivo y bibliotecas compatibles con el ecosistema Vue.

El objetivo de Vue.js es implementar el enlace de datos de respuesta y los componentes de vista combinados a través de la API más simple posible.

Vue.js es un marco del modo MVVM. Si los lectores tienen experiencia angular, pronto podrán comenzar con Vue.

Características de vue.js:

• Fácil de usar: ¿ya conoce HTML, CSS, JavaScript? ¡Lea la guía ahora para comenzar a crear aplicaciones!

• Flexible: pila de tecnología progresiva de núcleo pequeño y simple, suficiente para hacer frente a aplicaciones de cualquier escala.

• Alta eficiencia: tamaño de ejecución de 16 kb min + gzip, DOM virtual superrápido, la optimización más sencilla

2. Configuración del entorno

Entorno de desarrollo recomendado por Vue:

• Node.js: entorno de ejecución javascript (tiempo de ejecución), diferentes sistemas ejecutan directamente varios lenguajes de programación

• npm: Administrador de paquetes en Nodejs. Dado que el uso de npm en China será muy lento, se recomienda utilizar el espejo Taobao NPM (http://npm.taobao.org/)

  $ npm install -g cnpm --registry=https://registry.npm.taobao.org

• webpack: Su objetivo principal es preparar todos los recursos estáticos que deben publicarse en el navegador a través de la sintaxis CommonJS, como la combinación y el empaquetado de recursos.

• vue-cli: plantilla de proyecto de Vue generada por el usuario

3. Instale node.js

Descargue e instale el nodo desde el sitio web oficial de node.js, el proceso de instalación es muy simple, todo el camino hasta el "siguiente paso" está bien (instalación tonta).
Una vez completada la instalación, abra la herramienta de línea de comandos e ingrese el nodo -v, como se muestra en la figura siguiente. Si aparece el número de versión correspondiente, la instalación se realizó correctamente.

El administrador de paquetes npm está integrado en el nodo, por lo que escribir directamente npm -v mostrará la información de la versión de npm como se muestra en la siguiente figura.

4. Instale cnpm

Debido a que algunos recursos de npm están bloqueados o son recursos externos, a menudo se produce un error al instalar paquetes dependientes con npm, por lo que todavía necesito la réplica nacional de npm — cnpm.

Ingrese npm install -g cnpm --registry = http: //registry.npm.taobao.org en la línea de comando y espere hasta que se complete la instalación como se muestra a continuación.

Una vez finalizado, podemos usar cnpm en lugar de npm para instalar paquetes dependientes. Si desea obtener más información sobre cnpm, consulte el sitio web oficial de Taobao npm mirror.

5. Instale la herramienta de andamios vue-cli

1) Ver la información histórica de la versión de vue-cli e implementar la instalación y desinstalación

Antes de la instalación, utilice el siguiente comando para comprobar si se ha instalado vue-cli. Si está instalado, puede comprobar la versión de instalación específica. Si hay un registro de instalación, debe desinstalarlo con el comando de desinstalación que se describe más adelante.

//-V是大V，书写小v会报错
vue -V

Hasta ahora, el andamio vue-cli se ha actualizado a la versión 4.X. Puede utilizar el comando npm para ver directamente toda la información del andamio vue-cli.

npm view @vue/cli versions  --json

Utilice comandos para consultar toda la información de la versión de 3.0+.

Presta atencion aqui

La instalación del comando npm es diferente para 3.0+ y por debajo de 3.0.
Si instala o desinstala versiones anteriores a la 3.0, utilice el siguiente comando:

//安装3.0以前的vue-cli版本
npm install vue-cli -g

//卸载3.0以前的vue-cli版本
npm uninstall vue-cli -g

Instale o desinstale el comando vue-cli para 3.0+

//安装3.0+版本
npm install @vue/cli -g

o

//安装3.0+版本
npm install  -g @vue/cli

//卸载3.0+版本
npm uninstall @vue/cli -g

o

//卸载3.0+版本
npm uninstall  -g @vue/cli

Utilice el comando anterior para instalar directamente la última versión de forma predeterminada.

2) Instale la versión especificada de vue-cli

Si una determinada versión de vue-cli está instalada y existen otros problemas de compatibilidad, debe degradar e instalar otras versiones, siga el siguiente proceso de comando:

//查看vue-cli历史版本
npm view @vue/cli versions  --json

//卸载已经安装的版本注意是vue-cli3.0+，命令有些区别
//卸载3.0+版本
npm uninstall -g @vue/cli

//重新安装指定版本
npm install -g @vue/cli@4.5.6

La última @ anterior es la versión histórica específica especificada, si no se especifica, la última versión se instalará de forma predeterminada.

3), use cnpm para instalar vue-cli

En el 2) pequeño paso, use el comando npm para instalar vue-cli, debido a que cnpm está instalado en el cuarto título anterior, puede usar el siguiente comando para instalar

//安装vue-cli
cnpm install -g @vue/cli@4.5.6

//重新安装指定版本
cnpm install -g @vue/cli@4.5.6

Esto completa el uso de Taobao mirror para instalar vue-cli, porque la biblioteca de recursos utilizada por npm puede tener un proceso de instalación lento o un error en el proceso de instalación debido a factores como la red, intente usar npm para la instalación, pero desinstale debe usar el comando npm y no puede ser reemplazado por cnpm.
Una vez completada la instalación, puede usar vue -V (esta V está en mayúscula) para ver el número de versión

vue -V

(Se sustituye el método de instalación cnpm anterior) Por supuesto, si no desea instalar cnpm, pero puede reemplazar directamente la biblioteca de recursos configurada por npm con el espejo de Taobao. Luego, use el comando npm para hacer referencia directamente al espejo del recurso de Taobao. biblioteca.
Entrada de terminal:

npm info vue

El resultado es el siguiente:

Ver información de vue.

 npm config get registry

Se puede ver que la biblioteca de recursos de npm (registro) corresponde a la dirección predeterminada: https://registry.npmjs.org/

Utilice el siguiente comando para modificar el registro predeterminado al espejo de Taobao

npm config set registry http://registry.npm.taobao.org

Una vez que la modificación sea exitosa, se instalará directamente desde la biblioteca de recursos de Taobao cuando se use el comando nmp para instalar, y la velocidad y la estabilidad están garantizadas.

6. Cree el proyecto con vue-cli

1), use la interfaz gráfica vue ui para construir un nuevo proyecto

vue-cli3.0 + agrega una herramienta de gestión de proyectos visual, después de que se complete la instalación global de cli3.0 +, puede ingresar directamente el comando en cmd: se puede iniciar vue ui, la dirección predeterminada es localhost: 8000
, consulte para: usar la GUI de vue-cl4 Crear un proyecto de vue e introducir elementUI

2), use la línea de comando para construir un nuevo proyecto

• Si se va a construir un nuevo proyecto en la carpeta del nodo del Disco E, debe usar el comando en la figura siguiente para ingresar a la carpeta del nodo

• Crear proyecto

Use vue create <nombre del proyecto> para crear el proyecto

vue create vuetest

vuetest es el nombre del proyecto, el resultado de la ejecución del comando es como se muestra en la siguiente figura

• Seleccione Seleccionar funciones manualmente (configuración manual)
  Nota: Use el cursor para cambiar hacia arriba y hacia abajo, use el espacio para seleccionar y use Enter para confirmar
  . Seleccione las opciones en la
  siguiente figura y presione Enter. Luego, ingrese la siguiente figura y seleccione la versión 3.X de vue.js. Después de que el automóvil
  ingresa a la imagen de abajo, le pregunta si debe usar el modo de historial, es decir, si hay un número # en la URL, donde y no aparece # en la dirección URL , presione Enter para ingresar a la imagen de abajo,
  seleccione el modo Menos y presione Enter para ingresar a la imagen de abajo

Seleccione ESLint + Prettier, presione Enter para ingresar a la imagen de abajo

Cuando elija guardar, verifique Lint al guardar, presione Entrar para ingresar a la siguiente figura

Elija escribir el archivo de configuración en el archivo package.json, presione Enter para ingresar a la siguiente figura,
elija no guardar esta configuración en el archivo, después de no guardar, cada nuevo proyecto reconfigurará los parámetros seleccionados anteriormente, espere la siguiente interfaz para mostrar la instalación terminada.
En este momento, ingrese el comando de solicitud en la figura para ejecutar el servicio

//进入vuetest目录
cd vuetest
//运行生产模式服务
npm run serve

Cuando aparece el mensaje de la figura siguiente, puede acceder a través de la dirección de la figura para
acceder a loacalhost: 8080 y luego puede abrir la interfaz predeterminada.Como se muestra en la figura siguiente,
se ha completado la construcción de un nuevo proyecto.

Para la introducción de parámetros como enrutador (enrutamiento) y vuex (administración del estado de vue), consulte el siguiente artículo.
Portal 1
Portal 2
Portal 3
De hecho, se crea usando la línea de comando y los pasos y parámetros de vue La creación de la interfaz de usuario es la misma, pero se usa Una ventaja de la creación de interfaz gráfica es que puede romper automáticamente los archivos git y realizar la administración de versiones.

7. Hacer referencia a Element-UI en el nuevo proyecto

Aquí use vue ui para aumentar la dependencia del complemento Element-UI
Primero abra la entrada de la línea de comando

vue ui

Cuando aparezca la siguiente interfaz, se abrirá automáticamente un panel de control del proyecto vue ui en el navegador,
luego haga clic en la flecha hacia abajo en la esquina superior izquierda para seleccionar el administrador del proyecto
y haga clic en Importar para importar el vuetest del proyecto recién construido en el artículo anterior

y regresar a la interfaz del panel del proyecto, en la esquina superior izquierda En el cuadro desplegable en la esquina, seleccione el proyecto vuetest que acaba de importar
, luego el complemento en el menú de la izquierda, luego haga clic en el botón Agregar complemento en la parte inferior a la derecha de la interfaz derecha
y , a continuación, consulte element-ui para buscar, seleccione el complemento del cuadro rojo
en la figura siguiente para instalarlo . Haga clic e ingrese en los pasos de 1234. Una vez completada la instalación, recuerde hacer clic para completar la transferencia disponible de inmediato .

De acuerdo con el proceso normal, después de instalar y reiniciar el servicio, visite localhost: 8080 y podrá ver que la siguiente interfaz
aparece en el texto del cuadro rojo y el botón el-button, la instalación es exitosa.

Sin embargo, después de varias instalaciones y experimentos con versiones inferiores, la versión 4.x ahora informa un error sobre la compatibilidad de element-ui. Cada vez que se abre el sistema, la página está en blanco y la consola generará el siguiente error.
Según el prompt, supongo que no se puede obtener Vue. Por ejemplo, debería ser que element-ui aún no ha sido compatible con 4.x, por lo que se recomienda encarecidamente reducir la versión de vue-cli a 3.X.

8. Axios de referencia en el nuevo proyecto

Antes de instalar axios, haga una introducción a axios.
Dado que vue abandonó el mantenimiento de la biblioteca oficial vue-resource en la versión alta, se recomienda usar axios para implementar los datos de interacción de front-end y back-end en el proyecto vue. Usualmente usamos la biblioteca axios, que es una biblioteca http basada en promesas que puede ejecutarse en el lado del navegador y en node.js. Tiene muchas características excelentes, como interceptar solicitudes y respuestas, cancelar solicitudes, convertir json, defensa del lado del cliente contra cSRF, etc. Entonces axios necesita que lo estudiemos detenidamente, aquí hay un documento oficial para el aprendizaje.
portal de documentos chino oficial axios

1), la relación entre axios y vue-axios

Axios es una biblioteca, no un complemento de terceros en Vue. Cuando lo usa, no puede instalar el complemento a través de Vue.use (). Debe estar vinculado al prototipo:

import Vue from 'vue'
import axios from ‘axios’
//绑定到vue原型链上，直接使用Vue.$axios.get或this.$axios.get
Vue.prototype.$axios = axios

Uso específico: El
uso anterior también es muy general, pero como persona con trastorno obsesivo compulsivo, todavía me gusta el método de usar el complemento element-ui en Vue, usando el método Vue.use () para cargar y evitar modificar directamente El Prototipo.
vue-axios. Es un pequeño contenedor que integra axios en Vue.js y se puede instalar como un complemento.
documentación vue-axios

2) Desinstalación e instalación de axios y vue-axios

Antes de la instalación, eche un vistazo a la documentación de vue-axios sobre la compatibilidad de las versiones vue.js y vue-axios:

VueJS \ VueAxios	1.x	2.x	3.x
1.x	✔	✔	❌
2.x	✔	✔	❌
3.x	❌	❌	✔

Hoy es 19 de octubre de 2020. Hoy eché un vistazo a la versión de vue-axios que es 3.X, lo que significa que si estoy usando vue 2.X, necesito instalar la versión 2.x de vue-axios ., De lo contrario, se informa de un error por incompatibilidad.
Puede ver la información histórica de la versión en el documento vue-axios. La imagen a
continuación es parte del historial de la última versión: Luego, los métodos de desinstalación e instalación se describen a continuación:

• Si axios ya está instalado en el proyecto, use el siguiente comando para desinstalar axios primero

$npm uninstall  axios

• Si axios y vue-axios ya están instalados en el proyecto, porque la versión no es compatible o necesita ser reinstalada, use el npm uninstallcomando para desinstalar axios y vue-axios por separado, o use el siguiente comando para desinstalar de una vez

$npm uninstall  axios vue-axios

• Si la versión de vue que está utilizando es 2.X (se puede ver en "dependencias" de package.json), debe instalar la versión 2.1.5 de vue-axios

$cnpm install --save axios vue-axios@2.1.5

En el comando anterior, use @ 2.1.5 después de vue-axios para especificar la versión específica de vue-axios que se instalará. Después de que la instalación sea exitosa, puede ver la información de la versión de vue-axios y axios instalados en las "dependencias "de package.json.

• Si la versión de vue que está utilizando es 3.X (se puede ver en "dependencias" de package.json), debe instalar la versión 3.x de vue-axios

$cnpm install --save axios vue-axios

Debido a que la última versión es 3.X, puede usar el comando de instalación predeterminado, no es necesario que especifique el número de versión para vue-axios.

3) Referencia de axios y vue-axios en Vue

Hacer referencia a axios y vue-axios en mian.js, usando el complemento a través del método global Vue.use () es equivalente a llamar al método de instalación:

import Vue from 'vue'

import axios from 'axios'

import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

Referencia de uso específico: la
figura anterior muestra que hay tres métodos de referencia al usar axios, a saber, Vue.axios, this.axios y this. $ Http.

Después de instalar axios, vue-axios puede ver el código fuente de vue-axios en node_modules / _vue-axios / src / index.js bajo el proyecto Vue. El uso del método de escritura de complementos de Vue está más en línea con el entorno ecológico general de Vue.