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中的call实现继承
Jan 22 Javascript
jQuery中实现动画效果的基本操作介绍
Apr 16 Javascript
快速解决jQuery与其他库冲突的方法介绍
Jan 02 Javascript
javascript实现判断鼠标的状态
Jul 10 Javascript
javascript拖拽应用实例(二)
Mar 25 Javascript
jquery实现下拉框多选方法介绍
Jan 03 Javascript
JavaScript &amp; jQuery完美判断图片是否加载完毕
Jan 08 Javascript
js 转义字符及URI编码详解
Feb 28 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
Apr 17 Javascript
webpack4.x开发环境配置详解
Aug 04 Javascript
websocket4.0+typescript 实现热更新的方法
Aug 14 Javascript
详细分析React 表单与事件
Jul 08 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 define的第二个参数使用方法
2013/11/04 PHP
PHP按指定键值对二维数组进行排序的方法
2015/12/22 PHP
PHP实现自动发送邮件功能代码(qq 邮箱)
2017/08/18 PHP
PHP实现一个限制实例化次数的类示例
2019/09/16 PHP
宝塔面板在NGINX环境中TP5.1如何运行?
2021/03/09 PHP
javascript 常用关键字列表集合
2007/12/04 Javascript
Jquery公告滚动+AJAX后台得到数据
2011/04/14 Javascript
Javascript 面向对象编程(一) 封装
2011/08/28 Javascript
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
2013/06/24 Javascript
js实现缓冲运动效果的方法
2015/04/10 Javascript
js显示文本框提示文字的方法
2015/05/07 Javascript
JavaScript中的some()方法使用详解
2015/06/09 Javascript
angular.bind使用心得
2015/10/26 Javascript
浅谈Javascript数组(推荐)
2016/05/17 Javascript
详解JavaScript对象类型
2016/06/16 Javascript
AngularJS 单元测试(二)详解
2016/09/21 Javascript
js通过指定下标或指定元素进行删除数组的实例
2017/01/12 Javascript
Vuex利用state保存新闻数据实例
2017/06/28 Javascript
详解开源的JavaScript插件化框架MinimaJS
2017/10/26 Javascript
基于Vuex无法观察到值变化的解决方法
2018/03/01 Javascript
微信小程序用户信息encryptedData详解
2018/08/24 Javascript
微信小程序实现简易table表格
2020/06/19 Javascript
vue+iview动态渲染表格详解
2019/03/19 Javascript
VUE 解决mode为history页面为空白的问题
2019/11/01 Javascript
python中string模块各属性以及函数的用法介绍
2016/05/30 Python
Python连接Redis的基本配置方法
2018/09/13 Python
Python实现的服务器示例小结【单进程、多进程、多线程、非阻塞式】
2019/05/23 Python
梅尔倒谱系数(MFCC)实现
2019/06/19 Python
Django中的cookie和session
2019/08/27 Python
详解Python 实现 ZeroMQ 的三种基本工作模式
2020/03/24 Python
python list的index()和find()的实现
2020/11/16 Python
Boutique 1美国:阿联酋奢侈时尚零售商
2017/10/16 全球购物
一分钟演讲稿
2014/04/30 职场文书
保护地球的标语
2014/06/17 职场文书
mysql 8.0.24 安装配置方法图文教程
2021/05/12 MySQL
mysql 获取时间方式
2022/03/20 MySQL