认识

安装

yarn add element-ui

引入

普通引入

---

• 在 main.js 中引入 element-ui 全部组件和样式

  :::details 点击查看代码

  import Vue from 'vue'
  import App from './App.vue'
  import router from './router'
  import store from './store'
  import ElementUI from 'element-ui';
  import 'element-ui/lib/theme-chalk/index.css';
  
  Vue.use(ElementUI);
  Vue.config.productionTip = false
  
  new Vue({
  router,
  store,
  render: h => h(App)
  }).$mount('#app')
  

  :::

• home.vue 中使用组件

  :::details 点击查看代码

  <template>
  <div class="home">
      <el-button>测试</el-button>
  </div>
  </template>
  
  <script>
  export default {
  components:{
  },
  name: 'Home',
  }
  </script>
  

  :::

按需引入

---

Vite 按需引入

UI库组件自动按需引入配置: 配置好这个后，后续开发使用UI库组件无需手动引入，且为按需加载

• 安装所需依赖

  yarn add element-plus -S 
  
  yarn add unplugin-vue-components vite-plugin-style-import -D

• 具体配置

  :::details 点击查看代码

  import { defineConfig } from 'vite';
  import vue from '@vitejs/plugin-vue';
  import vueJsx from '@vitejs/plugin-vue-jsx';
  import StyleImport from 'vite-plugin-style-import';
  import ViteComponents from 'unplugin-vue-components/vite';
  import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
  
  export default ({ mode }) => {
      return defineConfig({
          plugins: [
              vue(),
              vueJsx(),
              StyleImport({
                  libs: [
                      {
                          libraryName: 'element-plus',
                          esModule: true,
                          resolveStyle: (name) => {
                              return `element-plus/lib/theme-chalk/${name}.css`;
                          },
                      },
                  ],
              }),
              ViteComponents({
                  dirs: ['src'],
                  dts: true,
                  resolvers: [ElementPlusResolver()],
              }),
          ],
          css: {},
          resolve: {},
          optimizeDeps: {},
          build: {},
          server: {},
      });
  };

  :::

Webpack 按需引入

通过babel-plugin-component，按需引入组件和样式，以达到减小项目体积的目的

• 安装 babel-plugin-component

  yarn add babel-plugin-component -D

• 配置 .babelrc 和 babel.config.js

  plugins: [
      [
      "component",
      {
          "libraryName": "element-ui",
          "styleLibraryName": "theme-chalk"
      }
      ]
  ]

• home.vue 中引入、使用组件

  :::details 点击查看代码

  <template>
  <div class="home">
      <el-button>测试</el-button>
  </div>
  </template>
  
  <script>
  import {Button} from 'element-ui'
  export default {
  components:{
      'el-button':Button
  },
  name: 'Home',
  }
  </script>

  :::