vue cli3中按需导入elementUI 配置

目前element官网介绍的按需导入方式,是使用vue cli2的,现在更新到3.0所需的配置稍有不同。具体如下:

element官网介绍地址:https://element.eleme.cn/#/zh-CN/component/quickstart

官网截图

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

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

这里需要注意的是官网上设置的"presets" 为 [["es2015", { "modules": false }]],我理解最新的应该为@babel/preset-env插件,所以这块要更改了。而且这个插件是默认装的。
vue cli 中浏览器兼容性有提到这点。https://cli.vuejs.org/zh/guide/browser-compatibility.html#browserslist

官网截图

从package.json依赖里面查不到@babel/preset-env插件,可以沿着@vue/cli-plugin-babel插件查找,里面一级一级就可以找到。


image.png

二、如果找不到@babel/preset-env,可以手动安装一下

npm install @babel/preset-env -D

或者暂时不安装,等把其他步骤都配置好,仍然不行,再安装一下也可以。(我做的时候,没有安装这步,直接将babel.config.js配置好即可。)

三、如果你只希望引入部分组件,比如 Button 和 Select,那么需要在 main.js 中写入以下内容:

import Vue from 'vue';
import { Button, Select } 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)
});

四、直接在App.vue中测试下,是否可以用button。


五、享受小小成功的喜悦即可。


photo.jpg

你可能感兴趣的:(vue cli3中按需导入elementUI 配置)