基本使用:npm i element-ui
main.js:
/**
* 该文件是整个项目的入口文件
*/
import Vue from 'vue';
import App from './App.vue';
import ElementUI from 'element-ui';
// 引入Element全部样式
import 'element-ui/lib/theme-chalk/index.css';
// 关闭vue的生产提示
Vue.config.productionTip = false
Vue.use(ElementUI);
// 创建vue实例对象
new Vue({
// 完成了功能:将App组件放入容器中
render: h => h(App)
}).$mount('#app')
组件:
<template>
<div>
你好啊
<el-row>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</el-row>
</div>
</template>
<script>
// import SchoolName from './components/SchoolName';
// import StudentName from './components/StudentName';
export default {
name: 'App',
data() {
return {
}
},
methods: {},
// components: {SchoolName, StudentName}
}
</script>
<style></style>
按需引用:
第一步:npm install babel-plugin-component -D
第二步:babel.config.js 修改为:
{
"presets": [["@babel/preset-env", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
第三步:直接使用,具体看下方案例
babel.config.js:
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset',
["@babel/preset-env", { "modules": false }]
],
plugins: [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
main.js:
/**
* 该文件是整个项目的入口文件
*/
import Vue from 'vue';
import App from './App.vue';
import { Button, Select } from 'element-ui';
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
* Vue.use(Button)
* Vue.use(Select)
*/
// 关闭vue的生产提示
Vue.config.productionTip = false
// 创建vue实例对象
new Vue({
// 完成了功能:将App组件放入容器中
render: h => h(App)
}).$mount('#app')
组件内使用:
<template>
<div>
你好啊
<el-row>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</el-row>
</div>
</template>
<script>
// import SchoolName from './components/SchoolName';
// import StudentName from './components/StudentName';
export default {
name: 'App',
data() {
return {
}
},
methods: {},
// components: {SchoolName, StudentName}
}
</script>
<style></style>