vue结合element-ui使用示例


Posted in Javascript onJanuary 24, 2019

这一篇主要是创建一个vue项目并结合饿了么框架element-ui。

1.先创建vue项目,我准备把项目放在e盘下:E:\Work\RegisterProject;

vue结合element-ui使用示例

命令行进入这个目录:

vue结合element-ui使用示例

创建一个基于 webpack 模板的新项目

(1)vue init webpack register(项目名)

vue结合element-ui使用示例

需要yes按Enter健就可以了,不需要输入n,然后按Enter健。

vue结合element-ui使用示例

创建完成:在目录中可看到

vue结合element-ui使用示例

运行:命令行进入到刚创建好的目录:cd register

vue结合element-ui使用示例

运行:npm run dev

vue结合element-ui使用示例

成功:

vue结合element-ui使用示例

在浏览器输入:http://localhost:8080/   我的是http://localhost:8081/(那是因为我已经打开另一个vue项目,80端口已经被占用,第一次的一般不会被占用,输入http://localhost:8080/ 就可以了)。

出现这个界面说明vue项目创建成功:

vue结合element-ui使用示例

现在vue引入Element

1.打开cmd,进入到当前刚创建的vue项目目录

vue结合element-ui使用示例

在当前目录中运行:npm i element-ui -S

vue结合element-ui使用示例

我使用webstrom打开刚创建的项目;file-open

vue结合element-ui使用示例

如图所示:

vue结合element-ui使用示例

改变项目目录中的main.js文件;

初始main.js文件:

vue结合element-ui使用示例

改成:

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.config.productionTip = false
Vue.use(ElementUI)

如图所示:

vue结合element-ui使用示例

3.然后在.vue文件里就直接可以用了

例如:在src/components/Hello.vue做一下修改

<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="text">文字按钮</el-button>
</div>
</template>
<script>
export default {
name: 'hello',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

运行:npm run dev(webstrom可以按Alt+F12键,输入npm run dev)

你将看到如下页面:

vue结合element-ui使用示例

成功的引入了Element!!

注意以下几个坑:

1.是否引入js与css文件

css文件是静态文件地址,安装教程安装地址不会出错

2.检查node的版本,是否node版本过低

3.检查以下你的npm版本 npm版本是否过低

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在IE中调用javascript打开Excel的代码(downmoon原作)
Apr 02 Javascript
JavaScript 计算图片加载数量的代码
Jan 01 Javascript
jQuery中bind,live,delegate与one方法的用法及区别解析
Dec 30 Javascript
Js+php实现异步拖拽上传文件
Jun 23 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
Sep 14 Javascript
基于JavaScript代码实现随机漂浮图片广告
Jan 05 Javascript
jQuery实现底部浮动窗口效果
Sep 07 Javascript
jQuery插件JWPlayer视频播放器用法实例分析
Jan 11 Javascript
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
Jun 25 Javascript
在vue中获取dom元素内容的方法
Jul 10 Javascript
vue slots 组件的组合/分发实例
Sep 06 Javascript
angular 表单验证器验证的同时限制输入的实现
Apr 11 Javascript
VUE+Element环境搭建与安装的方法步骤
Jan 24 #Javascript
JS实现带阴历的日历功能详解
Jan 24 #Javascript
微信小程序webview实现长按点击识别二维码功能示例
Jan 24 #Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
Jan 24 #Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
Jan 24 #Javascript
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)
Jan 24 #Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
Jan 24 #Javascript
You might like
PHP通过内置函数memory_get_usage()获取内存使用情况
2014/11/20 PHP
php 参数过滤、数据过滤详解
2015/10/26 PHP
laravel 判断查询数据库返回值的例子
2019/10/11 PHP
一个符号插入器 中用到的js代码
2007/09/04 Javascript
javascript 鼠标拖动图标技术
2010/02/07 Javascript
为jQuery.Treeview添加右键菜单的实现代码
2010/10/22 Javascript
Javascript 页面模板化很多人没有使用过的方法
2012/06/05 Javascript
jquery解析JSON数据示例代码
2014/03/17 Javascript
jquery库文件略庞大用纯js替换jquery的方法
2014/08/12 Javascript
jQuery EasyUI 布局之动态添加tabs标签页
2015/11/18 Javascript
JavaScript事件类型中UI事件详解
2016/01/14 Javascript
大型JavaScript应用程序架构设计模式
2016/06/29 Javascript
javascript回到顶部特效
2016/07/30 Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
2016/08/15 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
2016/08/18 Javascript
老生常谈JQuery data方法的使用
2016/09/09 Javascript
BootStrap树状图显示功能
2016/11/24 Javascript
[原创]JS基于FileSaver.js插件实现文件保存功能示例
2016/12/08 Javascript
JS闭包用法实例分析
2017/03/27 Javascript
如何在JavaScript中谨慎使用代码注释
2019/06/21 Javascript
Emberjs 通过 axios 下载文件的方法
2019/09/03 Javascript
OpenLayers3实现图层控件功能
2020/09/25 Javascript
python基础教程之序列详解
2014/08/29 Python
python+pandas+时间、日期以及时间序列处理方法
2018/07/10 Python
Python基础教程之异常详解
2019/01/10 Python
python如何通过twisted搭建socket服务
2020/02/03 Python
Python填充任意颜色,不同算法时间差异分析说明
2020/05/16 Python
使用 HTML5 Canvas 制作水波纹效果点击图片就会触发
2014/09/15 HTML / CSS
英国第二大营养品供应商:Vitabiotics
2016/10/01 全球购物
高性能钓鱼服装:Huk Gear
2019/02/20 全球购物
Steiff台湾官网:德国金耳釦泰迪熊
2019/12/26 全球购物
奥地利时尚、美容、玩具和家居之家:Kastner & Öhler
2020/04/26 全球购物
工厂保安员岗位职责
2014/01/31 职场文书
2014年采购员工作总结
2014/11/18 职场文书
综合实践活动报告
2015/02/05 职场文书
2015年保洁工作总结范文
2015/04/28 职场文书