vue cli3---elementUI 按需导入(babel.config.js)

在使用vue cli3脚手架时,需要按需导入element-ui 组件,步骤如下:

1. 安装element-ui

npm i element-ui -S

 2. 按需导入需要安装,babel-plugin-component

npm install babel-plugin-component -D

 3.官网提供的是,将 .babelrc 修改为:

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

 注意:项目中没有.babelrc文件,无需新建.babelrc文件,直接可以在babel.config.js中配置即可,如下:

module.exports = {
  presets: [
    '@vue/app',
    ["@babel/preset-env", { "modules": false }]
  ],
  plugins: [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

 这里需要注意:

需要安装最新的babel编译插件“@babel/preset-env”,检查一下自己项目插件版本,如果不是最新版,可执行以下命令安装
npm install @babel/preset-env -D

 4.在main.js中导入你需要的部分组件,如Button

import Vue from 'vue';
import { Button } from 'element-ui';
import App from './App.vue';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

new Vue({
  el: '#app',
  render: h => h(App)
});

 5. 在App.vue中,加入以下代码

<template>
  <div id="app">
    <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>
  </div>
</template>

 如果在浏览器中运行,出现如下样式,说明按需导入配置成功:

vue cli3---elementUI 按需导入(babel.config.js)

 

上一篇:vue cli3——eslint配置


下一篇:Vue-cli3 更新 vue create is a Vue CLI 3 only command and you are using Vue CLI 2.9.6.