Vue项目引进ElementUI组件的方法


Posted in Javascript onNovember 11, 2018

环境要求

Nodejs

Nodejs

官网下载地址:http://nodejs.cn/download/具体安装参考其他资料

打开cmd命令行,输入npm -v,如果出现如下图的显示,说明已经安装正确。

Vue项目引进ElementUI组件的方法

如果安装版本比较老,想升级新版本

npm install npm -g

安装 webpack

安装webpack

npm install webpack -g

-g 表示安装为全局

Vue项目引进ElementUI组件的方法

安装 vue-cli

安装 vue 脚手架项目初始化工具 vue-cli

npm install vue-cli -g

Vue项目引进ElementUI组件的方法

淘宝镜像

npm使用的国外中央仓库,下载速度较慢,有的时候还会有部分文件被墙掉。

npm install -g cnpm --registry=https://registry.npm.taobao.org

Vue项目引进ElementUI组件的方法

建议使用淘宝镜像,安装完淘宝镜像以后可以使用 cnpm 代替 npm。例如webpack可使用如下命令:

cnpm install webpack -g .

创建Vue项目

vue init webpack +项目名称

Vue项目引进ElementUI组件的方法

运行vue

npm run dev

Vue项目引进ElementUI组件的方法

访问localhost:8080

Vue项目引进ElementUI组件的方法

引入ElementUI

打开项目 src\main.js 添加

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

Vue项目引进ElementUI组件的方法

package.json文件中添加

"element-ui": "^2.4.9"

Vue项目引进ElementUI组件的方法

重新npm install

Vue项目引进ElementUI组件的方法

测试是否安装完成

在App.vue中随意添加elementUI标签 如:

<el-input v-model="input" placeholder="请输入内容"></el-input>
data() {
return {
input: ''
}
}

Vue项目引进ElementUI组件的方法

保存后,打开网页显示出input即成功

Vue项目引进ElementUI组件的方法

总结

以上所述是小编给大家介绍的Vue项目引进ElementUI组件的方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 03 Javascript
js获取某元素的class里面的css属性值代码
Jan 16 Javascript
javascript简单实现滑动菜单效果的方法
Jul 27 Javascript
jQuery中使用animate自定义动画的方法
May 29 Javascript
AngularJS入门教程之更多模板详解
Aug 19 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
Nov 29 Javascript
jquery网页加载进度条的实现
Jun 01 jQuery
vue实现自定义多选与单选的答题功能
Jul 05 Javascript
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
Aug 06 Javascript
gulp构建小程序的方法步骤
May 31 Javascript
js实现时钟定时器
Mar 26 Javascript
swiper自定义分页器的样式
Sep 14 Javascript
webpack中如何使用雪碧图的示例代码
Nov 11 #Javascript
vue组件从开发到发布的实现步骤
Nov 11 #Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
Nov 11 #Javascript
基于Vue实现图片在指定区域内移动的思路详解
Nov 11 #Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
Nov 11 #Javascript
详解Vue 动态组件与全局事件绑定总结
Nov 11 #Javascript
详解如何在vue项目中使用eslint+prettier格式化代码
Nov 10 #Javascript
You might like
PHP中提问频率最高的11个面试题和答案
2014/09/02 PHP
php自定义中文字符串截取函数substr_for_gb2312及substr_for_utf8示例
2016/05/28 PHP
PHP在innodb引擎下快速代建全文搜索功能简明教程【基于xunsearch】
2016/10/14 PHP
php语法检查的方法总结
2019/01/21 PHP
javascript编程起步(第六课)
2007/02/27 Javascript
javascript Keycode对照表
2009/10/24 Javascript
ExtJs grid行 右键菜单的两种方法
2010/06/19 Javascript
JS连连看源码完美注释版(推荐)
2013/12/09 Javascript
JS实现可调整倒计时间代码分享
2015/08/18 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
2015/10/26 Javascript
js实现简单的省市县三级联动效果实例
2016/02/18 Javascript
JS之相等操作符详解
2016/09/13 Javascript
Vue.js实现简单动态数据处理
2017/02/13 Javascript
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
2017/03/23 jQuery
jQuery+SpringMVC中的复选框选择与传值实例
2018/01/08 jQuery
[原创]jquery判断元素内容是否为空的方法
2018/05/04 jQuery
JS高级技巧(简洁版)
2018/07/29 Javascript
小程序云开发部署攻略(图文教程)
2018/10/30 Javascript
JavaScript实现新年倒计时效果
2018/11/17 Javascript
小程序云开发教程如何使用云函数实现点赞功能
2019/05/18 Javascript
element-ui组件中input等的change事件中传递自定义参数
2019/05/22 Javascript
Python request设置HTTPS代理代码解析
2018/02/12 Python
解决python读取几千万行的大表内存问题
2018/06/26 Python
python单例模式实例解析
2018/08/28 Python
python GUI库图形界面开发之PyQt5信号与槽基础使用方法与实例
2020/03/06 Python
基于python 凸包问题的解决
2020/04/16 Python
Python xml、字典、json、类四种数据类型如何实现互相转换
2020/05/27 Python
Python StringIO及BytesIO包使用方法解析
2020/06/15 Python
如何用python爬取微博热搜数据并保存
2021/02/20 Python
澳大利亚优惠网站:Deals.com.au
2019/07/02 全球购物
项目考察欢迎辞
2014/01/17 职场文书
大学理论知识学习自我鉴定
2014/04/28 职场文书
运动会广播稿150字(9篇)
2014/09/20 职场文书
教师工作态度自我评价
2015/03/05 职场文书
利用python实时刷新基金估值(摸鱼小工具)
2021/09/15 Python
Java结构型设计模式之组合模式详解
2022/09/23 Java/Android