ElementUI组件的安装和使用
ElementUI是一款为Vue.js设计的UI库,提供了丰富的组件,例如表单、表格、布局等。
安装ElementUI:
npm install element-ui --save
在Vue项目中使用ElementUI:
- 完整引入(在
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)
})
按需引入(使用babel-plugin-component):
首先安装babel-plugin-component:
npm install babel-plugin-component -D
然后配置.babelrc
文件:
{
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
在main.js
中按需引入ElementUI组件:
import Vue from 'vue'
import { Button, Select } from 'element-ui'
import App from './App.vue'
Vue.use(Button)
Vue.use(Select)
new Vue({
el: '#app',
render: h => h(App)
})
在Vue组件中使用ElementUI组件:
<template>
<div>
<el-button type="primary">点击我</el-button>
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</template>
<script>
export default {
data() {
return {
value: '',
options: [{ label: '选项1', value: '1' }, { label: '选项2', value: '2' }]
}
}
}
</script>
以上是ElementUI的安装和使用的基本步骤,具体组件的属性和事件可以参考ElementUI官方文档。
评论已关闭