三步完成在vue2.x中安装element-ui

环境

vue2.x
element-ui

安装配置三部曲

这个是全局引入，后期再补充按需引入，可以看看官网的解释

1. 命令行运行

yarn add element-ui

2. 在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);

3. 在页面入口文件App.vue中加入element-ui官网中的按钮代码测试一下

 <el-button type="primary">主要按钮</el-button>

最后的效果：

完整代码

1. 完整的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>

2. 完整的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组件库

安装过程中遇到的问题

找不到node_modules/async-validator/es/index.js文件