vue中使用ElementUI
程序员文章站
2022-07-01 18:09:33
...
Element官网地址:https://element.eleme.cn/#/zh-CN/component/quickstart
安装过程可以参考官网方式
全局安装:
npm i element-ui -S
在 main.js 中写入以下内容:
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
new Vue({
el: '#app',
render: h => h(App)
});
在新建组件中使用----table
<template>
<div>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: 'Topic',
data () {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
}
}
按需引入安装:
通过按需引入需要的组件,以达到减小项目体积的目的
npm i element-ui -S
npm install babel-plugin-component -D
找到文件夹下的 .babelrc文件中的plugins,并修改 修改为:
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
然後,只要引入项目中需要的组件就行
import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
* Vue.use(Button)
* Vue.use(Select)
*/
new Vue({
el: '#app',
render: h => h(App)
});
上一篇: vue快速入门之ElementUI的使用
下一篇: 文本摘要评测工具ROUGE的搭建和测试