利用利用vue+elementUI实现部分引入组件的方法详解实现部分引入组件的方法详解
主要给大家介绍了关于利用vue+elementUI实现部分引入组件的相关资料,以及介绍了vue引入elementUI报错的
解决方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧。
前言前言
vue.js的UI组件库,在git上有多个项目,我见的使用者比较多的是iView和Element.两个组件库,组件都很丰富。
官网的介绍官网的介绍
iView: 一套基于 Vue.js 的高质量 UI 组件库
Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助你的网站快速成
型。
两者各有优缺点,不多评论,根据自己的需求,我最后使用了Element。因为最近公司开发一个很小的后台项目,所以考虑部分
引入element的组件,因为第一次单独引入没有经验,网上看了很多都有这样那样的问题,个人感觉官网也没把我说明白(也许
自己水平太低了),所以自己研究了一下亲测有效,如有错误欢迎指出。
实现方法实现方法
1、安装vue-cli
npm install -g vue-cli
2、创建项目projectName是你项目的名字
npm install webpack projectName
3、进入项目目录
cd projectName
4、初始化项目安装依赖
npm install
5、安装elementui
npm install element-ui --save -dev
6、首先确定项目是否有style-loader和babel-plugin-component 若没有npm一个
npm install xxx --save -dev
7、简单粗暴点,找到.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'
},
评论10