[JavaScript知识库] vue element-ui按需引入

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> vue element-ui按需引入 -> 正文阅读

[JavaScript知识库]vue element-ui按需引入

.babelrc文件不存在，按需引入报错

首先运行官网推荐的开发依赖：
npm install babel-plugin-component -D
然后官网提示在.babelrc中添加，但是没有
实际上此文件已更名为 babel.config.js

//babel.config.js 原本的内容：
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

我们需要将此文件进行追加

//	babel.config.js	来源于尚硅谷
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    //这里官网粘贴追加的.依然会报错
    // ["es2015", { "modules": false }],
    //必须这样写。来源于尚硅谷
    ["@babel/preset-env", { "modules": false }]
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

然后就可以使用按需引入了。正确的配置下按需引入是不需要引入css的。babel已解析css

//elementUi 全部引入
// import 'element-ui/lib/theme-chalk/index.css';
// import ElementUI from 'element-ui';
// Vue.use(ElementUI);

//elementUi按需引入
import {Button,Row,DatePicker} from 'element-ui';
Vue.prototype.$ELEMENT = { size: 'small', zIndex: 10};
//      以下两种方式均可（Vue.component和 Vue.use），css文件无需引入
// Vue.component(Button.name,Button);//  Button.name 会解析成 el-button
 Vue.component(Row.name,Row);
// Vue.component(DatePicker.name,DatePicker);
// ...

Vue.use(Button)
//Vue.use(Row)
Vue.use(DatePicker)