在Vue-cli生成的项目中使用 element-ui,按照官方的指导
npm i element-ui -D
执行之后,查看package.json,element-ui 加在了 "devDependencies"中,好像感觉那里不对,也跟官方的项目模板的package.json不一致,就删了重来
npm uninstall element-ui
npm install element-ui --save
要想使用element-ui,按照官方的文档,需要在main.js中加入
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css' Vue.use(ElementUI)
在 webpack.base.conf.js 中的 module->loaders 块中加入配置:
module: {
loaders: [
...
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
...
]
},
运行 npm run dev 发现没有style-loader,需要安装
npm install style-loader -save-dev
安装好之后,运行npm run dev,报错:
ERROR in ./~/css-loader!./~/style-loader!./~/css-loader!./~/element-ui/lib/theme-default/index.css
Module build failed: Unknown word (5:1) 3 | // load the styles
4 | var content = require("!!./../../../css-loader/index.js!./index.css");
> 5 | if(typeof content === 'string') content = [[module.id, content, '']];
| ^
6 | // add the styles to the DOM
7 | var update = require("!./../../../style-loader/addStyles.js")(content, {});
8 | if(content.locals) module.exports = content.locals; @ ./~/element-ui/lib/theme-default/index.css 4:14-133 13:2-17:4 14:20-139
折腾了半天,搞不定,就不瞎折腾了,老老实实的在index.html加样式和脚本引用
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css"> <script src="https://unpkg.com/element-ui/lib/index.js"></script>
先使用CDN上的文件,等熟了之后再使用本地库!
搞上面的这些东西,瞎折腾了半天时间!
2016年11月23日19:52:09 更新
悲催,使用脚本方式,Vue也需要用脚本方式使用
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
2016年11月24日17:30:47 更新
临时解决方案,样式文件直接在index.html引入:
<link rel="stylesheet" href="//unpkg.com/element-ui/lib/theme-default/index.css">
脚本在main.js中导入:
import Element from 'element-ui';
Vue.use(Element);
暂时解决了问题。