环境
vue2.x
element-ui
安装配置三部曲
这个是全局引入,后期再补充按需引入,可以看看官网的解释
- 命令行运行
yarn add element-ui
- 在vue项目内的程序入口文件main.js 中引入element-ui及其样式文件
import ElementUI from "element-ui"; // 2.1引入结构
import "element-ui/lib/theme-chalk/index.css"; // 2.2引入样式
Vue.use(ElementUI);
- 在页面入口文件App.vue中加入element-ui官网中的按钮代码测试一下
<el-button type="primary">主要按钮</el-button>
最后的效果:
完整代码
- 完整的App.vue文件:
<template>
<div id="app">
<el-button type="primary">主要按钮</el-button>
</div>
</template>
<script>
export default {
name: "App",
};
</script>
<style lang="less">
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
body {
background-color: #c1ceca;
}
nav {
padding: 0.3623rem;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
}
</style>
- 完整的main.js文件:
import Vue from "vue";
import App from "./App.vue";
import ElementUI from "element-ui"; // 1引入结构
import "element-ui/lib/theme-chalk/index.css"; // 2引入样式
Vue.config.productionTip = false;
Vue.use(ElementUI);
new Vue({
render: (h) => h(App),
}).$mount("#app");
注意
不同版本的vue对应的element组件库是不同的!
- vue2.x对应element-ui组件库
- vue3.x对应element-plus组件库