1.安装element-ui
npm i element-ui -S
2.安装按需引入必要插件
npm install babel-plugin-component -D
3.修改babel.config.js
module.exports = {
presets: ["@vue/app"],
plugins: [
// element官方教程
[
"component",
{
libraryName: "element-ui",
styleLibraryName: "theme-chalk"
}
]
]
};
4.在main.js中按需引入你要用到的组件,比如Button按钮
import Vue from 'vue'
import { Button, Input} from 'element-ui'
import App from './App.vue'
Vue.component(Button.name, Button)
Vue.component(Input.name, Input)
/* 或写为
* Vue.use(Button)
* Vue.use(Input)
*/
new Vue({
el: '#app',
render: h => h(App)
})
5.示例:在.vue文件中使用
<el-input v-model="input" placeholder="请输入内容"></el-input>
<el-button type="primary">主要按钮</el-button>
<script>
export default {
data() {
return {
input: ''
}
}
}
</script>