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 相关文章推荐
jQuery1.5.1 animate方法源码阅读
Apr 05 Javascript
如何用ajax来创建一个XMLHttpRequest对象
Dec 10 Javascript
Chrome下ifame父窗口调用子窗口的问题示例探讨
Mar 17 Javascript
JavaScript常用小技巧小结
Dec 29 Javascript
jQuery中:animated选择器用法实例
Dec 29 Javascript
JavaScript设计模式经典之工厂模式
Feb 24 Javascript
基于javascript实现九九乘法表
Mar 27 Javascript
深入浅析JavaScript中with语句的理解
May 12 Javascript
AngularJS基础 ng-copy 指令实例代码
Aug 01 Javascript
原生js轮播(仿慕课网)
Feb 15 Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
May 20 Javascript
Node.js操作MongoDB数据库实例分析
Jan 19 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的日期与时间函数技巧
2008/04/24 PHP
elgg 获取文件图标地址的方法
2010/03/20 PHP
PHP中include/require/include_once/require_once使用心得
2016/08/28 PHP
Laravel自定义 封装便捷返回Json数据格式的引用方法
2019/09/29 PHP
php获取是星期几的的一些常用姿势
2019/12/15 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
jquery选择器之基本过滤选择器详解
2014/01/27 Javascript
jQuery子属性过滤选择器用法分析
2015/02/10 Javascript
JQuery用户名校验的具体实现
2016/03/18 Javascript
js输出数据精确到小数点后n位代码
2016/07/02 Javascript
浅谈javascript的url参数parse和build函数
2017/03/04 Javascript
JavaScript订单操作小程序完整版
2017/06/23 Javascript
微信小程序多列选择器range-key使用详解
2020/03/30 Javascript
微信小程序promsie.all和promise顺序执行
2017/10/27 Javascript
5分钟教你用nodeJS手写一个mock数据服务器的方法
2019/09/10 NodeJs
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
2020/02/11 Javascript
[01:00:11]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第一场 2月7日
2021/03/11 DOTA
python更新列表的方法
2015/07/28 Python
Python多层嵌套list的递归处理方法(推荐)
2016/06/08 Python
Python代码打开本地.mp4格式文件的方法
2019/01/03 Python
spark dataframe 将一列展开,把该列所有值都变成新列的方法
2019/01/29 Python
Python进阶之全面解读高级特性之切片
2019/02/19 Python
python3.6使用tkinter实现弹跳小球游戏
2019/05/09 Python
opencv 获取rtsp流媒体视频的实现方法
2019/08/23 Python
材料专业大学毕业生自荐书
2014/07/02 职场文书
党员作风建设自查报告
2014/10/23 职场文书
2014幼儿园小班工作总结
2014/11/10 职场文书
成绩单评语
2015/01/04 职场文书
拾金不昧感谢信
2015/01/21 职场文书
语文教师个人工作总结
2015/02/06 职场文书
保管员岗位职责
2015/02/14 职场文书
办公室行政主管岗位职责
2015/04/09 职场文书
南阳市白酒市场的调查报告
2019/11/08 职场文书
Python竟然能剪辑视频
2021/05/25 Python
详解CSS故障艺术
2021/05/25 HTML / CSS
Go语言基础切片的创建及初始化示例详解
2021/11/17 Golang