vue引入Element，pc端组件库

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_30109365/article/details/80886556

1.创建vue基本框架，

2.在对应项目的路径终端下输入 ： npm i element-ui -S

3.代码导入后，在src –> main.js 中全局引入

css是必引入的 import ‘element-ui/lib/theme-chalk/index.css’;

控件的引入有二种方式

第一。 import ElementUI from ‘element-ui’; 一次全部引入，方便但部分控件未用到，导致项目过大
第二。import { Button } from ‘element-ui’; 用到什么控件，引入什么控件，麻烦但节约项目大小，优雅引入

//import ElementUI from 'element-ui';

import { Button,Swiper } from 'element-ui'; //用什么引入上面

import 'element-ui/lib/theme-chalk/index.css';

Vue.use(Button,Swiper);   //用什么引入上面

下面是终端加载Element和运行的代码图

完成上面步骤就可以实现 vue引入Element 的效果，

Element内包含下面等功能，并没有全部放上， Element官网路径

Tabs 标签页

Breadcrumb 面包屑

Dropdown 下拉菜单

Steps 步骤条

Dialog 对话框

Tooltip 文字提示

Popover 弹出框

Card 卡片

Carousel 走马灯

Collapse 折叠面板