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 相关文章推荐
Prototype Function对象 学习
Jul 12 Javascript
jquery绑定事件不生效的解决方法
Feb 11 Javascript
ie下$.getJSON出现问题的解决方法
Feb 12 Javascript
js实现四舍五入完全保留两位小数的方法
Aug 02 Javascript
JS上传图片预览插件制作(兼容到IE6)
Aug 07 Javascript
JS 获取HTML标签内的子节点的方法
Sep 21 Javascript
JavaScript数据结构之二叉树的计数算法示例
Apr 13 Javascript
微信小程序 input表单与redio及下拉列表的使用实例
Sep 20 Javascript
微信小程序实现时间预约功能
Nov 27 Javascript
javascript判断一个变量是数组还是对象
Apr 10 Javascript
redux.js详解及基本使用
May 24 Javascript
vue中实现点击变成全屏的多种方法
Sep 27 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在服务器执行exec命令失败的解决方法
2012/03/03 PHP
php操作redis缓存方法分享
2015/06/03 PHP
ThinkPHP里用U方法调用js文件实例
2015/06/18 PHP
对YUI扩展的Gird组件 Part-1
2007/03/10 Javascript
js 纯数字不重复排列的另类方法
2010/07/17 Javascript
JavaScript学习笔记记录我的旅程
2012/05/23 Javascript
jquerydom对象的事件隐藏显示和对象数组示例
2013/12/10 Javascript
原生ajax处理json格式数据的实例代码
2016/12/25 Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
2017/02/23 Javascript
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
2017/04/03 jQuery
nodejs入门教程六:express模块用法示例
2017/04/24 NodeJs
基于Vue实例对象的数据选项
2017/08/09 Javascript
解决webpack+Vue引入iView找不到字体文件的问题
2018/09/28 Javascript
Vue-Router基础学习笔记(小结)
2018/10/15 Javascript
vue 解决数组赋值无法渲染在页面的问题
2019/10/28 Javascript
vue中实现图片压缩 file文件的方法
2020/05/28 Javascript
Element InfiniteScroll无限滚动的具体使用方法
2020/07/27 Javascript
原生JS实现九宫格抽奖
2020/09/13 Javascript
如何利用python查找电脑文件
2018/04/27 Python
详解Django 中是否使用时区的区别
2018/06/14 Python
Python爬虫实现简单的爬取有道翻译功能示例
2018/07/13 Python
在Pycharm中对代码进行注释和缩进的方法详解
2019/01/20 Python
python模拟键盘输入 切换键盘布局过程解析
2019/08/15 Python
Django项目基础配置和基本使用过程解析
2019/11/25 Python
python实现发送QQ邮件(可加附件)
2020/12/23 Python
美国购买汽车零件网站:Buy Auto Parts
2018/04/02 全球购物
贝斯特韦斯特酒店集团官网:Best Western
2019/01/03 全球购物
以工厂直接定价的传奇性能:Ben Hogan Golf
2019/01/04 全球购物
运动会开幕式解说词
2014/02/05 职场文书
护士进修自我鉴定
2014/02/07 职场文书
商业融资计划书
2014/04/29 职场文书
酒店优秀员工事迹材料
2014/06/02 职场文书
学习焦裕禄同志为人民服务思想汇报
2014/09/10 职场文书
2014小学语文教师个人工作总结
2014/12/03 职场文书
匿名检举信范文
2015/03/02 职场文书
手把手教你从零开始react+antd搭建项目
2021/06/03 Javascript