Web | 在VueCli中添加ElementUI插件

in Web with 0 comment

请输入图片描述

在VueCli中添加ElementUI插件

1.CL4配置

Vue 提供了一个CLI,为单页面应用 (SPA) 快速搭建繁杂的脚手架。CLI4的配置流程大致总结了流程如下:

打开终端:

2.项目目录介绍

├── README.md
├── index.html
├── package.json
├── src
│   ├── App.vue
│   ├── assets
│   │   ├── img
│   │   └── logo.png
│   ├── requst.js // 封装post请求配置文件
│   ├── components
│   │   └──Helloworld.vue
│   ├── views
│   │   ├── About.vue
│   │   └── Home.vue
│   ├── main.js
│   ├── router // 路由配置文件
│   │   └── router.js  
│   └── store
│       └── store.js  
└── babel.config.js

3.添加elementui插件

​ 在项目开发中,使用框架和组件会极大的便利开发过程,elemenui是基于vue的一套组件库,其较为多样的组件为开发带来便利(轮子哥:不要重复造轮子),elementui也为cli脚手架提供了一个插件(传送门),无需使用npm安装便可迅速使用组件。

​ 我们也可以通过在终端进入vuecli项目并输入vue add element指令将组件添加到vue项目中:

vue add element

​ (1)在安装过程中,尽量选择fully install(便利开发,若选择性安装则每使用一个组件需在element.jsmain.js引入

​ (2)尽量不选择sass安装

​ (3)选择zh中文字体完成组件的添加

​ 完成添加之后便可以愉快的享受组件带来的便利啦 !!!

评论区