利用vue+elementUI实现部分引入组件的方法详解
前言
vue.js的UI组件库，在git上有多个项目，我见的使用者比较多的是iView和Element.两个组件库，组件都很丰富。
官网的介绍
- iView:一套基于Vue.js的高质量UI组件库
- Element，一套为开发者、设计师和产品经理准备的基于Vue2.0的组件库，提供了配套设计资源，帮助你的网站快速成型。
两者各有优缺点，不多评论，根据自己的需求，我最后使用了Element。因为最近公司开发一个很小的后台项目，所以考虑部分引入element的组件，因为第一次单独引入没有经验，网上看了很多都有这样那样的问题，个人感觉官网也没把我说明白（也许自己水平太低了），所以自己研究了一下亲测有效，如有错误欢迎指出。
实现方法
1、安装vue-cli
npminstall-gvue-cli
2、创建项目projectName是你项目的名字
npminstallwebpackprojectName
3、进入项目目录
cdprojectName
4、初始化项目安装依赖
npminstall
5、安装elementui
npminstallelement-ui--save-dev
6、首先确定项目是否有style-loader和babel-plugin-component若没有npm一个
npminstallxxx--save-dev
7、简单粗暴点，找到.babelrc把原文件内容全部删除，粘贴下面代码
{"presets":[["env",{
"modules":false,
"targets":{"browsers":[">1%","last2versions","notie<=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报错
在main.js里面引入import'element-ui/lib/theme-default/index.css'中报错，无法启动项目，这是把package.json里面的webpack改成"webpack":"beta",重新安装即可，这就可以启动了
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对毛票票的支持。