基本使用:npm i element-uimain.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>