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 相关文章推荐
一个对于Array的简单扩展
Oct 03 Javascript
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
Apr 15 Javascript
JavaScript生成SQL查询表单的方法
Aug 13 Javascript
JS随机洗牌算法之数组随机排序
Mar 23 Javascript
详解Backbone.js框架中的模型Model与其集合collection
May 05 Javascript
JavaScript对Json的增删改属性详解
Jun 02 Javascript
用js读写cookie的简单方法(推荐)
Aug 08 Javascript
jQuery组件easyui对话框实现代码
Aug 25 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
Nov 22 Javascript
微信小程序 label 组件详解及简单实例
Jan 10 Javascript
浅谈Vue SPA 首屏加载优化实践
Dec 15 Javascript
Vue 递归多级菜单的实例代码
May 05 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验证码代码
2012/02/27 PHP
php数组的概述及分类与声明代码演示
2013/02/26 PHP
PHP获取当前所在目录位置的方法
2014/11/26 PHP
PHP实现恶意DDOS攻击避免带宽占用问题方法
2015/05/27 PHP
PHP编写登录验证码功能 附调用方法
2016/05/19 PHP
ThinkPHP中create()方法自动验证表单信息
2017/04/28 PHP
jQuery 性能优化手册 推荐
2010/02/23 Javascript
快速解决FusionCharts联动的中文乱码问题
2013/12/04 Javascript
javascript中的作用域和上下文使用简要概述
2013/12/05 Javascript
js判断字符是否是汉字的两种方法小结
2014/01/03 Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
2015/12/26 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
2016/04/06 Javascript
BootStrap3使用错误记录及解决办法
2016/12/22 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
2017/01/23 Javascript
jQuery使用JSONP实现跨域获取数据的三种方法详解
2017/05/04 jQuery
详解Angular的8个主要构造块
2017/06/20 Javascript
JS模拟浏览器实现全局搜索功能
2019/09/11 Javascript
Element的el-tree控件后台数据结构的生成以及方法的抽取
2020/03/05 Javascript
vue项目打包后请求地址错误/打包后跨域操作
2020/11/04 Javascript
Python机器学习之scikit-learn库中KNN算法的封装与使用方法
2018/12/14 Python
python中logging模块的一些简单用法的使用
2019/02/22 Python
基于python3监控服务器状态进行邮件报警
2019/10/19 Python
Python开发之身份证验证库id_validator验证身份证号合法性及根据身份证号返回住址年龄等信息
2020/03/20 Python
python输出结果刷新及进度条的实现操作
2020/07/13 Python
详解python os.path.exists判断文件或文件夹是否存在
2020/11/16 Python
html5中嵌入视频自动播放的问题解决
2020/05/25 HTML / CSS
计算机系毕业生推荐信
2013/11/06 职场文书
上级检查欢迎词
2014/01/18 职场文书
高三自我评价
2014/02/01 职场文书
保护环境的标语
2014/06/09 职场文书
销售人才自我评价范文
2014/09/27 职场文书
自愿离婚协议书范文2014
2014/10/12 职场文书
考研经验交流会策划书
2015/11/02 职场文书
《认识年月日》教学反思
2016/02/19 职场文书
教你如何让spark sql写mysql的时候支持update操作
2022/02/15 MySQL
RestTemplate如何通过HTTP Basic Auth认证示例说明
2022/03/17 Java/Android