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 相关文章推荐
超级简单的图片防盗(HTML),好用
Apr 08 Javascript
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
May 24 Javascript
如何使用JS获取IE上传文件路径(IE7,8)
Jul 08 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
Oct 21 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
Apr 07 Javascript
JS+CSS简单树形菜单实现方法
Sep 12 Javascript
vue 文件目录结构详解
Nov 24 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
Jan 23 Javascript
echarts设置图例颜色和地图底色的方法实例
Aug 01 Javascript
vue微信分享的实现(在当前页面分享其他页面)
Apr 16 Javascript
vue中封装axios并实现api接口的统一管理
Dec 25 Vue.js
JS代码编译器Monaco使用方法
Jun 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
获得Google PR值的PHP代码
2007/01/28 PHP
40个迹象表明你还是PHP菜鸟
2008/09/29 PHP
PHP获取MySql新增记录ID值的3种方法
2014/06/24 PHP
php函数重载的替代方法--伪重载详解
2015/05/08 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
JavaScript入门教程(10) 认识其他对象
2009/01/31 Javascript
jquery attr 设定src中含有&amp;(宏)符号问题的解决方法
2011/07/26 Javascript
兼容IE和FF的图片上传前预览js代码
2013/05/28 Javascript
JS onmousemove鼠标移动坐标接龙DIV效果实例
2013/12/16 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
2017/03/06 Javascript
jquery实现图片平滑滚动详解
2017/03/22 jQuery
微信小程序 es6-promise.js封装请求与处理异步进程
2017/06/12 Javascript
vue学习教程之带你一步步详细解析vue-cli
2017/12/26 Javascript
NodeJS如何实现同步的方法示例
2018/08/24 NodeJs
微信小程序通过js实现瀑布流布局详解
2019/08/28 Javascript
JS数据类型分类及常用判断方法
2020/11/19 Javascript
[02:41]DOTA2英雄基础教程 亚巴顿
2014/01/02 DOTA
[02:37]2018DOTA2亚洲邀请赛赛前采访 VP.no[o]ne心中最强SOLO是谁
2018/04/04 DOTA
实例讲解Python的函数闭包使用中应注意的问题
2016/06/20 Python
Python多进程库multiprocessing中进程池Pool类的使用详解
2017/11/24 Python
python matplotlib画图库学习绘制常用的图
2019/03/19 Python
selenium获取当前页面的url、源码、title的方法
2019/06/12 Python
pytorch 求网络模型参数实例
2019/12/30 Python
python将unicode和str互相转化的实现
2020/05/11 Python
Python jieba库分词模式实例用法
2021/01/13 Python
Python之多进程与多线程的使用
2021/02/23 Python
使用CSS3制作饼状旋转载入效果的实例
2015/06/23 HTML / CSS
德国珠宝和手表在线商店:VALMANO
2019/03/24 全球购物
村党支部换届选举方案
2014/05/02 职场文书
青春无悔演讲稿
2014/05/08 职场文书
离婚协议书标准格式
2014/10/04 职场文书
2014三年级班主任工作总结
2014/12/05 职场文书
幼师自荐信范文
2015/03/06 职场文书
小学工作总结2015
2015/05/04 职场文书
中学生打架检讨书之500字
2019/08/06 职场文书
Python实现批量自动整理文件
2022/03/16 Python