ElementUI组件库安装与基本使用

ElementUI官方网址:Element - 网站快速成型工具

1.安装:在命令行执行

npm install [email protected]

如图

ElementUI组件库安装与基本使用_第1张图片

 

2.在入口函数引入ElementUI组件库

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

3.构建vue基本框架

4.样例

引入组件:

ElementUI组件库安装与基本使用_第2张图片

定义组件文件:

ElementUI组件库安装与基本使用_第3张图片 

 在官网寻找所需组件

ElementUI组件库安装与基本使用_第4张图片

在App.vue根组件中使用标签引用Element

ElementUI组件库安装与基本使用_第5张图片 

 常见组件:

表格:

找到所需表格模板

ElementUI组件库安装与基本使用_第6张图片

 加入到vue项目中

ElementUI组件库安装与基本使用_第7张图片

按ctrl+s保存后的效果

ElementUI组件库安装与基本使用_第8张图片 

其他组件也类似,至此你已经是一个合格的cv工程师

ElementUI组件库安装与基本使用_第9张图片 

 

 

你可能感兴趣的:(elementui,前端,javascript)