vue | 使用elementUi按需引入组件的方法及问题

按需引入elementUi组件的方法

1.安装elementUi组件库

npm i element-ui -S

2.安装 babel-plugin-component

npm install babel-plugin-component -D

3.修改.babelrc文件

{ "presets": [["env", {
    "modules": false,
    "targets": {"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]}
   }],
   "stage-2"],
 "plugins": [
    "transform-runtime",
    ["component",
    {
    "libraryName":"element-ui",
    "styleLibraryName":"theme-chalk"   //2.0的用theme-chalk
    }
    ]
    ],
 "comments":false,   
 "env": {
 "test": {
  "presets": ["env", "stage-2"],
  "plugins": ["istanbul"]
 }
 }
}

这里需要注意 注释所在行的代码,"theme-chalk"在官方文档中是"theme-default",但是现在官方已经修改theme-default文件为theme-chalk,所以需要注意一下.

4.在mian.js中引入

import { Message  } from 'element-ui' 

Message.install = function (Vue, options) {
  Vue.prototype.$message = Message
}

Vue.use(Message )

这里以 Message组件为事例,因为 Message存在特殊性,所以需要 Message.install这段代码

按需引入elementUi遇到的问题

当我完成上述步骤的操作方法后,出现报错:Can't resolve 'element-ui/lib/theme-default/base.css',此时正是引入步骤的第三步注意事项中所解决的问题,但是依然报错,让我百思不得其解,最后重新启动了一下项目 npm run dev命令才好用,所以有时候不能完全相信自动编译,还需要手动重启试试.