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 相关文章推荐
Js获取事件对象代码
Aug 05 Javascript
jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法)
Oct 20 Javascript
JS函数验证总结(方便js客户端输入验证)
Oct 29 Javascript
Internet Explorer 11 浏览器介绍:别叫我IE
Sep 28 Javascript
JQuery 使用attr方法实现下拉列表选中
Oct 13 Javascript
JavaScript动态添加css样式和script标签
Jul 19 Javascript
jQuery通过ajax快速批量提交表单数据
Oct 25 Javascript
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
Nov 29 Javascript
跨域解决之JSONP和CORS的详细介绍
Nov 21 Javascript
全网小程序接口请求封装实例代码
Nov 06 Javascript
JS模拟实现京东快递单号查询
Nov 30 Javascript
详解JVM系列之内存模型
Jun 10 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函数学习之PHP函数点评
2012/07/05 PHP
基于PHP编程注意事项的小结
2013/04/27 PHP
PHP SPL标准库之接口(Interface)详解
2015/05/11 PHP
利用PHP将图片转换成base64编码的实现方法
2016/09/13 PHP
javascript Zifa FormValid 0.1表单验证 代码打包下载
2007/06/08 Javascript
javascript操作cookie_获取与修改代码
2009/05/21 Javascript
JS 文件传参及处理技巧分析
2010/05/13 Javascript
基于jquery的blockui插件显示弹出层
2011/04/14 Javascript
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
2011/10/06 Javascript
JavaScript网页定位详解
2014/01/13 Javascript
使用纯javascript实现经典扫雷游戏
2015/04/23 Javascript
jquery解析json格式数据的方法(对象、字符串)
2015/11/24 Javascript
jquery解析XML及获取XML节点名称的实现代码
2016/05/18 Javascript
深入理解JS函数的参数(arguments)的使用
2016/05/28 Javascript
JS百度地图搜索悬浮窗功能
2017/01/12 Javascript
简单谈谈Javascript函数中的arguments
2017/02/09 Javascript
微信小程序实现移动端滑动分页效果(ajax)
2017/06/13 Javascript
解决vue打包后vendor.js文件过大问题
2019/07/03 Javascript
vue使用一些外部插件及样式的配置代码
2019/11/18 Javascript
Python中xrange与yield的用法实例分析
2017/12/26 Python
Jupyter notebook远程访问服务器的方法
2018/05/24 Python
Python os.rename() 重命名目录和文件的示例
2018/10/25 Python
使用pyinstaller打包PyQt4程序遇到的问题及解决方法
2019/06/24 Python
python爬虫中多线程的使用详解
2019/09/23 Python
python基于plotly实现画饼状图代码实例
2019/12/16 Python
利用python批量爬取百度任意类别的图片的实现方法
2020/10/07 Python
关于python scrapy中添加cookie踩坑记录
2020/11/17 Python
美国乡村商店:Plow & Hearth
2016/09/12 全球购物
SmartBuyGlasses英国:购买太阳镜和眼镜
2018/01/29 全球购物
英国在线玫瑰专家:InterRose
2019/12/01 全球购物
计算机专业个人求职自荐信
2013/09/21 职场文书
市场营销大学生职业规划书
2014/02/25 职场文书
乡镇交通安全实施方案
2014/03/29 职场文书
2015年小学中秋节活动总结
2015/03/23 职场文书
中学图书馆工作总结
2015/08/11 职场文书
nginx location 带斜杠【 / 】与不带的区别
2022/04/13 Servers