利用vue+elementUI实现部分引入组件的方法详解


Posted in Javascript onNovember 22, 2017

前言

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'
},

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" ,重新安装即可,这就可以启动了

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
FCK调用方法..
Dec 21 Javascript
js 文件引入实现代码
Apr 23 Javascript
JavaScript入门之事件、cookie、定时等
Oct 21 Javascript
用队列模拟jquery的动画算法实例
Jan 20 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
Jan 23 Javascript
jQuery EasyUI提交表单验证
Jul 19 Javascript
基于Vue.js实现数字拼图游戏
Aug 02 Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
Jul 06 Javascript
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
Aug 16 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
Sep 29 Javascript
vue cli 3.0 搭建项目的图文教程
May 17 Javascript
vue spa应用中的路由缓存问题与解决方案
May 31 Javascript
通过一个简单的例子学会vuex与模块化
Nov 22 #Javascript
第一个Vue插件从封装到发布
Nov 22 #Javascript
详细分析单线程JS执行问题
Nov 22 #Javascript
jquery实现回车键触发事件(实例讲解)
Nov 21 #jQuery
Angular实现双向折叠列表组件的示例代码
Nov 21 #Javascript
bootstrap表格内容过长时用省略号表示的解决方法
Nov 21 #Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
Nov 21 #Javascript
You might like
PHP下对数组进行排序的函数
2010/08/08 PHP
PHP文件读写操作之文件读取方法详解
2011/01/13 PHP
PHP应用JSON技巧讲解
2013/02/03 PHP
PHP的运行机制与原理(底层)
2015/11/16 PHP
jQuery AJAX回调函数this指向问题
2010/02/08 Javascript
推荐10个超棒的jQuery工具提示插件
2011/10/11 Javascript
改进版通过Json对象实现深复制的方法
2012/10/24 Javascript
基于jquery库的tab新形式使用
2012/11/16 Javascript
jquery设置控件位置的方法
2013/08/21 Javascript
JavaScript表单通过正则表达式验证电话号码
2014/03/14 Javascript
果断收藏9个Javascript代码高亮脚本
2016/01/06 Javascript
javascript中使用未定义变量或值的情况分析
2016/07/19 Javascript
JS实现复选框的全选和批量删除功能
2017/04/05 Javascript
jdk1.8+vue elementui实现多级菜单功能
2020/09/24 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
2020/10/24 Javascript
Vant 中的Toast设置全局的延迟时间操作
2020/11/04 Javascript
Vue实现圆环进度条的示例
2021/02/06 Vue.js
[01:15:44]首部DOTA2纪录片今日23时全网上映
2014/03/19 DOTA
低版本中Python除法运算小技巧
2015/04/05 Python
使用python实现rsa算法代码
2016/02/17 Python
Python中的默认参数实例分析
2018/01/29 Python
Python编程argparse入门浅析
2018/02/07 Python
Python 虚拟空间的使用代码详解
2019/06/10 Python
python判断单向链表是否包括环,若包含则计算环入口的节点实例分析
2019/10/23 Python
详解KMP算法以及python如何实现
2020/09/18 Python
实习教师自我鉴定
2013/12/09 职场文书
经验丰富大学生村干部自我鉴定
2014/01/22 职场文书
党的群众路线教育实践活动总结报告
2014/04/28 职场文书
学生党员公开承诺书
2014/05/28 职场文书
关于国庆节的演讲稿
2014/09/05 职场文书
工地食品安全责任书
2015/05/09 职场文书
公务员处分决定书
2015/06/25 职场文书
Python还能这么玩之只用30行代码从excel提取个人值班表
2021/06/05 Python
redis中lua脚本使用教程
2021/11/01 Redis
在Windows Server 2012上安装 .NET Framework 3.5 所遇到的问题
2022/04/29 Servers
Java实现简单小画板
2022/06/10 Java/Android