版权声明:本文为博主原创文章,未经博主允许不得转载。 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 折叠面板