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 相关文章推荐
firefox中JS读取XML文件
Dec 21 Javascript
JS判断表单输入是否为空(示例代码)
Dec 23 Javascript
使用node.js 获取客户端信息代码分享
Nov 26 Javascript
JavaScript多图片上传案例
Sep 28 Javascript
JavaScript 监控微信浏览器且自带返回按钮时间
Nov 27 Javascript
JavaScript表单验证的两种实现方法
Feb 11 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
Feb 21 Javascript
canvas绘制一个常用的emoji表情
Mar 30 Javascript
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
JS简单获取并修改input文本框内容的方法示例
Apr 08 Javascript
Mac下安装vue
Apr 11 Javascript
vue表单验证之禁止input输入框输入空格
Dec 03 Vue.js
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
轻松入门: 煮好咖啡的七个诀窍
2021/03/03 冲泡冲煮
967 个函式
2006/10/09 PHP
PHP对MongoDB[NoSQL]数据库的操作
2013/03/01 PHP
基于php上传图片重命名的6种解决方法的详细介绍
2013/04/28 PHP
解析PHP中ob_start()函数的用法
2013/06/24 PHP
PHP如何将log信息写入服务器中的log文件
2015/07/29 PHP
php有效防止图片盗用、盗链的两种方法
2016/11/01 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
基于Node.js的强大爬虫 能直接发布抓取的文章哦
2016/01/10 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
2016/01/17 Javascript
JS排序方法(sort,bubble,select,insert)代码汇总
2016/01/30 Javascript
JS实现页面数据无限加载
2016/09/13 Javascript
简单实现IONIC购物车功能
2017/01/10 Javascript
Bootstrap缩略图与警告框学习使用
2017/02/08 Javascript
jquery.tableSort.js表格排序插件使用方法详解
2020/08/12 Javascript
Vue 进阶之路(三)
2019/04/18 Javascript
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
2019/05/21 Javascript
浅谈layer弹出层按钮颜色修改方法
2019/09/11 Javascript
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
2019/09/16 Javascript
windows实现npm和cnpm安装步骤
2019/10/24 Javascript
详解element-ui动态限定的日期范围选择器代码片段
2020/07/03 Javascript
Vue使用screenfull实现全屏效果
2020/09/17 Javascript
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
2020/11/04 Javascript
[10:18]2018DOTA2国际邀请赛寻真——Fnatic能否笑到最后?
2018/08/14 DOTA
快速解决安装python没有scripts文件夹的问题
2018/04/03 Python
读取json格式为DataFrame(可转为.csv)的实例讲解
2018/06/05 Python
11个Python Pandas小技巧让你的工作更高效(附代码实例)
2019/04/30 Python
ipython和python区别详解
2019/06/26 Python
Python统计学一数据的概括性度量详解
2020/03/03 Python
css3学习之2D转换功能详解
2016/12/23 HTML / CSS
中层干部竞争上岗演讲稿
2014/01/13 职场文书
公司中秋节活动方案
2014/02/12 职场文书
幸福中国演讲稿
2014/09/12 职场文书
个人政治思想总结
2015/03/05 职场文书
行政答辩状范文
2015/05/21 职场文书
大学生入党自我鉴定范文
2019/06/21 职场文书