Vue 实现 Element 的按需引入

Posted 2021-03-18 kldn208

使用 Vue-Cli 脚手架创建 Vue 项目实现 Element 的按需引入

1. 安装 element-ui 和 babel-plugin-component 和 babel-preset-es2015 依赖

   • npm intall element-ui --save
   • npm install babel-plugin-component -D
   • npm install babel-preset-es2015 -D

2. 修改 .babelrc 文件

   • {
       "presets": [["es2015", { "modules": false }]],
       "plugins": [
         [
           "component",
           {
             "libraryName": "element-ui",
             "styleLibraryName": "theme-chalk"
           }
         ]
       ]
     }

3. 在 main.js 文件下，按需引入组件，且挂在到 Vue 实例上

   • import {
       Butto（组件名）
     } from 'element-ui'
     
     Vue.use(Button)

4. 在 template 中便可使用 Button 组件

   • <template>
       <div>
        <el-button type='primary'>按钮</el-button>
       </div>
     </template>