因为最近公司开发一个很小的后台项目,所以考虑部分引入element的组件,因为第一次单独引入没有经验,网上看了很多都有这样那样的问题,个人感觉官网也没把我说明白(也许自己水平太低了),所以自己研究了一下亲测有效,如有错误欢迎指出。
安装vue-cli
npm install -g vue-cli创建项目projectName是你项目的名字
npm install webpack projectName进入项目目录
cd projectName初始化项目安装依赖
npm install安装elementui
npm install element-ui --save -dev首先确定项目是否有style-loader和babel-plugin-component 若没有npm一个
npm install xxx --save -dev-
简单粗暴点,找到.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-default" //1.4的老项目用这个,2.0的用theme-chalk,假设没效果看看官网又把默认的主题改 成那个了 跟着改一下应该就可以了 } ]] ], "comments":false, "env": { "test": { "presets": ["env", "stage-2"], "plugins": ["istanbul"] } } }
8.在webpack.base.conf.js加入下面一句
{ test: /\.css$/, loader: 'style-loader' },
9.在mian.js中引入
import { Button,Input } from 'element-ui' Vue.use(Button) Vue.use(Input)
10.然后就可以使用Button和Input了
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。