详解如何在vue项目中引入饿了么elementUI组件
在开发的过程之中,我们也经常会使用到很多组件库;vue 常用ui组件库:
https://blog.csdn.net/qq_36538012/article/details/82146649
今天具体说一说比较常用的;element ui框架的按钮组件,这款由饿了么前端开源的UI框架,一经面世,就收获大量程序员的芳心。在github 上更是高达29.8k的star早已说明一切。用于开发PC端的页面还是绰绰有余的。如果说你是用vue开发者,却没用过element UI,那你肯定不是合格的vue开发者。
官网地址:http://element-cn.eleme.io/#/zh-CN
1:安装node
端开发框架和环境都是需要 Node.js ,先安装node.js开发环境,vue的运行是要依赖于node的npm的管理工具来实现,下载https://nodejs.org/en/,安装完成之后,打开cmd开始输入命令。(我用的是win10系统,所以需要管理员权限,右键点击以管理员身份运行cmd),不然会出现很多报错。
2:查看node的版本号
下载好node之后,以管理员身份打开cmd管理工具,,输入 node -v ,回车,查看node版本号,出现版本号则说明安装成功。
输入命令: node -v
3:安装淘宝npm镜像
由于npm是国外的,使用起来比较慢,我们这里使用淘宝的cnpm镜像来安装vue.
淘宝的cnpm命令管理工具可以代替默认的npm管理工具。
输入命令:npm install -g cnpm --registry=https://registry.npm.taobao.org
4:安装全局vue-cli脚手架
淘宝镜像安装成功之后,我们就可以全局vue-cli脚手架,输入命令:cnpm install --global vue-cli 回车;验证是否安装成功,在命令输入vue,出来vue的信息,及说明安装成功;
输入命令:cnpm install --global vue-cli
5:开始进入主题,初始化一个vue项目
我这里是在d盘里面新建一个项目,先用d:
的命令,回车键进入d盘;回车键默认创建项目信息。
vue init webpack itemname
出现这样的提示,初始化成功
运行初始化demo,输入命令npm run dev;运行一下初始后的demo,弹出访问地址,如果没有问题则进行安装elementUI;准备好好之后,开始引入饿了么elementUI组件。
6:安装 elementUI
npm i element-ui -S
快捷键ctrl+c,终止批处理操 作吗(Y/N),在输入命令npm i element-ui -S
注意:安装过程中出现这样的bug的时候,需要解决
解决办法:尝试 删除项目中的 package-lock.json 文件 和 node_modules 文件夹,然后再尝试 npm install.
成功安装组件显示如下
7:在components文件夹下面创建test.vue文件,复制一段elementUI官方文档的代码,进行测试
<template><el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"><el-menu-item index="1">处理中心</el-menu-item><el-submenu index="2"><template slot="title">我的工作台</template><el-menu-item index="2-1">选项1</el-menu-item><el-menu-item index="2-2">选项2</el-menu-item><el-menu-item index="2-3">选项3</el-menu-item></el-submenu><el-menu-item index="3"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item></el-menu>
</template><script>export default {data() {return {activeIndex: '1',activeIndex2: '1'};},methods: {handleSelect(key, keyPath) {console.log(key, keyPath);}}}
</script>
8:在App.vue中引入test.vue
<template><div id="app"><img src="./assets/logo.png"><router-view/><Test></Test></div>
</template><script>import Test from './components/test.vue'export default {components:{Test,},name: 'App'
}
</script><style>
#app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>
9:再次运行,组件中的效果如下:
输入命令:
npm run dev
原文作者:祈澈姑娘
技术博客:https://www.jianshu.com/u/05f416aefbe1
90后前端妹子,爱编程,爱运营,爱折腾。
坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。
转载于:https://www.cnblogs.com/wangting888/p/9701299.html
详解如何在vue项目中引入饿了么elementUI组件相关推荐
- 详解如何在vue项目中使用lodop打印插件,以及样式打印预览缺失的问题(底部)
C-Lodop是一个免费云服务程序,可接受来自其它平台浏览器的JavaScrip语句实现远程打印. 目前是各家软件公司进行手机或微信远程打印的流行解决方案. 和其它"云打印"概念相 ...
- jq的插件 vue中引用_详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
本篇文章主要介绍了详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件,具有一定的参考价值,有兴趣的可以了解一下 使用vue-cli构建的vue项目,webpack的配置文 ...
- 如何在Vue项目中引入ArcGIS JavaScript API 创建三维可视化地图(含vue项目创建教程)
新手上路之在Vue项目中引入ArcGIS API 视频教程 B站搜索 X北辰北,感谢up主无私的教学~ B站地址:https://www.bilibili.com/video/BV18E411K7B ...
- 如何在vue项目中引入html页面
在vue项目中引入html页面的两种方法 第一种:/static/page.html 第二种:通过iframe嵌入 第一种:/static/page.html 在static或public文件夹下,新 ...
- 如何在Vue项目中引入腾讯验证码服务
什么是腾讯验证码?它长这个样子--? 最近公司项目要求引入腾讯云验证,要求是这样的:为了防止别人恶意刷短信验证码,当用户短时间内多次获取验证码的时候,需要调用腾讯验证码,验证成功后会继续自动发送验证码 ...
- 如何在vue项目中引入video.js插件
借鉴了不少文章,照着来净报错,恼了自己给自己留一篇绝不报错的! 参考文章:https://www.jianshu.com/p/8b8023c7ed37 一.安装 $ npm install video ...
- 如何在 vue 项目中引入 html 文件
这里以 vue-cli3 为例子,在pubilc目录下引入html就行了 如果需要查看的可用下面的方法 1 window.open(`/ssh-terminal-template/index.html ...
- 在vue项目中引入高德地图及其UI组件的方法
https://www.jb51.net/article/146789.htm 转载于:https://www.cnblogs.com/sweeeper/p/11282700.html
- vue ajax highcharts,在vue项目中引入highcharts图表的方法(详解)
npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个char ...
最新文章
- 微服务采用何种远程调用方式?
- dubbo服务化最佳实践
- nginx日志统计分析的相关常用命
- Linux系统编程 -- 多线程之基于阻塞队列生产者与消费者模型
- python无头浏览器兼容问题_docker+python无头浏览器爬虫
- DAC杂谈二 ——ADC和DAC常用技术术语
- C语言随机数10到999990,C语言程序设计(高清pdf) 丹尼斯 里奇
- 【Spark】(task5)SparkML基础(分类 | 聚类模型)
- “No Problem”没问题,不客气的其他英语表达方式
- 首发创新微信聊天内容制作生成器微信小程序源码下载支持多种制作
- 小学知识三角函数和差化积
- 洛谷 P3388 【模板】割点(割顶) 根+非根+dfn[]+low[]+不一样的Tarjan算法
- 5G 空口信令分析指导书
- java序列化3-序列化设计防坑点
- 记-微服务CPU100%排查之windows版
- davinci 达芬奇BI工具
- STL-priority_queue用法(重点: 升序,小根堆)
- 《Python编程与实战》学习笔记
- 学习委员(班长、团支书)查作业软件,查人+重命名
- OSTA-LINUX3-操作题练习题整理
热门文章
- oracle内存结构(PGA、SGA)
- 观察者模式(Head First设计模式学习2)
- integer expression expected或者unary operator expected
- java限制金额控制_JavaMail 限额管理
- js 单精度浮点数转10进制_确保前端 JavaScript 浮点数精度的四则运算方法
- 实现ip数据包抓取并分析_一些网站https证书出现问题的情况分析
- cad无法加载arx文件_CAD文件损坏?无法打开?试试这8个方法吧
- 第一篇:稳定性之如何理解高可用?
- 对于早期Servlet内核你清楚吗,这些基础的东西,不能忘哦
- ElasticSearch概述(一)——简介