Después de que el proyecto vue2.0 esté en línea, se verá como lo que ve al ingresar. Refrescarse tampoco ayuda. Sólo ayuda si apagas el terminal móvil antes de entrar. ¿Qué pasó?
Anteriormente usamos nodejs y vuecli para crear un proyecto vue, lo cual es muy conveniente para lograr operaciones integradas de front-end y back-end. Sin embargo, para mejorar la eficiencia del desarrollo, debemos confiar en algunos complementos que nos ayuden a mejorar la eficiencia del desarrollo. Por eso, hoy presentaremos varios complementos de vue excelentes y aprenderemos a crear los suyos propios.
Segundo componente de archivo único
Cuando hablamos de que nodejs crea fácilmente la primera novela corta de la aplicación vue, en este artículo creamos un Apply nativo de vue, el efecto es el que se muestra a continuación:
Así que ahora necesitamos reemplazar la página predeterminada con otros componentes de Vue para su visualización. Primero, creamos varios archivos js, como se muestra en la imagen:
Luego creamos un componente vue y configuramos sus propiedades, como se muestra en la siguiente imagen:
Luego agregamos el componente a En el componente del portal, como se muestra en la siguiente figura:
En este momento, el componente de prueba se puede aplicar a la página del proyecto. Iniciemos la aplicación como se muestra:
En este punto, el contenido de la página se actualiza. De hecho, esto equivale a convertir nuestro vue en un componente de archivo separado. Antes de aprender vue, siempre confiamos en la existencia de archivos html. Sin embargo, si desea ejecutarlo en nodejs, también puede utilizar el componente de archivo único. Por supuesto, los componentes de un solo archivo son el método de escritura que recomendamos firmemente.
Tres. Componentes de la interfaz de usuario
Como todos sabemos, el front-end concede gran importancia a la experiencia del usuario y la experiencia visual, por lo que existen muchas bibliotecas de componentes de la interfaz de usuario, como Elementui, vant, iview, Vuetify, Mint UI, etc. . A continuación, presentaremos dos bibliotecas de componentes de UI diferentes basadas en PC y terminales móviles respectivamente, y simplemente las usaremos para apreciar el encanto de los componentes de UI.
1. Componentes de la interfaz de usuario de la PC 1). ElementUi
El marco de interfaz de usuario abierto del equipo de front-end es, con diferencia, la mejor biblioteca de componentes de interfaz de usuario en el escritorio. No sólo tiene una interfaz hermosa, sino que también es fácil de usar. Instalémoslo. Primero, abra cmd en el directorio del proyecto y luego ingrese el comando:
npm i element-ui -S
Simplemente espere tranquilamente a que se descargue la biblioteca de componentes. Luego introducimos el componente en el componente vue y reconstruimos la estructura del componente, como se muestra en la siguiente figura:
Para que pueda agregar algunos elementos elegantes.
2). Ant Design Company
El propósito es desarrollar la interfaz del sistema de administración backend, de la siguiente manera:
npm install iview - save
Instalar Una vez completada, la importación está lista para usar, como se muestra a continuación:
Como puede ver, podemos usar múltiples bibliotecas de componentes al mismo tiempo.
3).iview
Se utiliza principalmente para desarrollar interfaces back-end, de la siguiente manera:
npm install iview - save
Además, iview Weapp también es un buen marco de interfaz de usuario, pero se utiliza principalmente para el desarrollo de subprogramas WeChat.
2. Componentes móviles 1). Hacer débil
La razón por la que se lanzó primero es que no solo admite terminales móviles, sino que también admite terminales de PC. Es compatible con múltiples terminales y puede lograr una interfaz muy hermosa sin escribir CSS. Primera descarga, como se muestra a continuación:
instalación npm-verificación de guardado
2).vant
Descargue e instale de la siguiente manera:
Mecanismo de prevención del país
3) Mint UI
también es una biblioteca de componentes móviles desarrollada por el equipo de front-end. Primero, descargue e instale, como se muestra a continuación:
npm i mint-ui - save
Cuatro.
Complemento
Como puede ver, si queremos usar cada biblioteca de componentes, debemos descargarla, luego importarla al archivo js de entrada principal main.js y agregarla al proyecto usando el Método Vue.use. Esto logra el efecto global. Comencemos el viaje de escribir un complemento. Primero, cree una carpeta para colocar el complemento y luego cree los siguientes archivos, como se muestra en la figura:
Lo que se crea arriba es un directorio y un archivo del complemento, y luego escribiremos una página vue de un solo archivo, de la siguiente manera:
Luego exportamos un archivo de una sola página en forma modular, como se muestra en la siguiente figura:
Luego registramos el complemento. acabamos de escribir, como se muestra en la figura:
Finalmente, lo aplicamos al archivo app.vue, como se muestra en la figura:
En este punto, el complemento que escribimos se puede aplicar a la página, como se muestra en la figura:
Resumen de verbo (abreviatura de verbo)