Vue Element 按需引入问题处理备忘

最近在学习VUE，目的是为了将大数据标签库系统的前台部分界面改造成VUE组件化的形式；在学习过程中；按照下载的视频边学边练。

在学习到Element UI按需引入时遇坑；特地记下来希望能备忘也希望能帮助到别人。

Element UI按需引入是官方文档是这么介绍的：

首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

然后，将 .babelrc 修改为：

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

接下来，如果你只希望引入部分组件，比如 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)
})

结果照着上面的步骤实操的时候发现一个问题；我用IDE创建的项目中并无.babelrc这个文件，没有那就创建呗；寻思类似配置文件应该能被组件加载到；结果并不是像我想象的那样；最后打开的页面使用Element UI时组件的样式丢失；也就是说按需引入是失败的。

后来看项目中包含babel.config.js这样一个文件，文件名字很明显的告知这个是babel的配置文件；我想应该是要修改这里；百度了一下Babel的配置；看了2篇文章；在这个JS中加入了几行代码；重新运行项目；问题解决。这么看官方文档还是很坑的；这种问题对于新手来说可能会困扰他们一个小时或者一天...

module.exports = {
  presets: [
    '@vue/app'
  ]
//以下为新加内容！  
,plugins: [
    [
      "component",
      {
        libraryName: "element-ui",
        styleLibraryName: "theme-chalk"
      }
    ]
  ]
//以上为新加内容！ 
}

本文由 huzd 创作，采用知识共享署名4.0 国际许可协议进行许可本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名最后编辑时间
为: 2019/08/21 11:12