Construcción de proyecto Vue+element

prefacio

Ha habido algunos pequeños movimientos recientemente. Hay dos proyectos que necesitan ser avanzados, y las cosas de front-end tienen que ser retomadas.

ambiente

Dado que mi entorno actual sigue siendo vue2, este desarrollo sigue siendo principalmente vue2. Por supuesto, no es difícil cambiar. Simplemente no me molesto en configurar el entorno aquí. Es agotador. No puedo olvidar mi problema con la versión de iris cuando Un día jugué go.

creación de proyecto vue-cli

Mi versión local de vue sigue siendo 2.5x
, por lo que no puedo crear un proyecto. No puedo vue create o solo puedo vue init webpack name
. Solo quiero decir algunas cosas sobre la creación de proyectos. El primer npm es realmente lento, no se recomienda usarlo, se recomienda descargar cnpm primero.

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

Luego busque una ubicación adecuada para comenzar a crear nuestro proyecto.

Las palabras aquí siguen siendo las reglas antiguas. Después de los primeros sí, sugiero que primero seleccione el enrutamiento y luego ingrese nuestro proyecto después del no y
inserte la descripción de la imagen aquí
otro no
inserte la descripción de la imagen aquí
. Aquí, nos ayuda a generar el código de enrutamiento, pero lo hacemos. aquí Un pequeño cambio de imagen.

modernizar uno

Estructura del proyecto.
inserte la descripción de la imagen aquí

Adaptación II

inserte la descripción de la imagen aquí

Adaptar tres

cambiar el ícono
inserte la descripción de la imagen aquí

prueba

Puedes ver el efecto.
inserte la descripción de la imagen aquí
En este punto, se completa nuestra transformación básica del proyecto.
Luego importe nuestra biblioteca de componentes de elemento ui. (De hecho, en este momento, puedo optar por obtener directamente las dependencias del proyecto que escribí la última vez)

elemento 使用

Primero tenemos que descargar

cnpm i element-ui -S

En este caso, puede elegir agregar un -g y descargarlo globalmente.

luego importa el componente


/*引入element组件*/
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

inserte la descripción de la imagen aquí

instalar cargador

Este es principalmente el css que carga el elemento ui

cnpm install sass-loader node-sass --save-dev


prueba

ok, vamos a probarlo a continuación.
Introduce nuestra prueba de botón en nuestro componente.
inserte la descripción de la imagen aquí

inserte la descripción de la imagen aquí

Resumir

Volví a recordar el proceso y luego fui a los componentes.
Esta vez hay más tiempo, después de todo, no soy un novato, por lo que debería ser más rápido.

Supongo que te gusta

Origin blog.csdn.net/FUTEROX/article/details/123629133
Recomendado
Clasificación