脚本宝典收集整理的这篇文章主要介绍了vue+elementUI部分引入组件,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
因为最近公司开发一个很小的后台项目,所以考虑部分引入element的组件,因为第一次单独引入没有经验,网上看了很多都有这样那样的问题,个人感觉官网也没把我说明白(也许自己水平太低了),所以自己研究了一下亲测有效,如有错误欢迎指出。
安装vue-cli
npm install -g vue-cli
进入项目目录
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了
以上是脚本宝典为你收集整理的vue+elementUI部分引入组件全部内容,希望文章能够帮你解决vue+elementUI部分引入组件所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。