vue和element-ui使用

上一篇已经创建好一个vue项目。https://mp.csdn.net/postedit/80926242

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

1.先创建vue项目,我准备把项目放在e盘下:E:\Work\RegisterProject;
在这里插入图片描述
命令行进入这个目录:
在这里插入图片描述
创建一个基于 webpack 模板的新项目

(1)vue init webpack register(项目名)
在这里插入图片描述
需要yes按Enter健就可以了,不需要输入n,然后按Enter健。
在这里插入图片描述
创建完成:在目录中可看到
在这里插入图片描述
运行:命令行进入到刚创建好的目录:cd register
在这里插入图片描述
运行:npm run dev
在这里插入图片描述
成功:
在这里插入图片描述
在浏览器输入:http://localhost:8080/ 我的是http://localhost:8081/(那是因为我已经打开另一个vue项目,80端口已经被占用,第一次的一般不会被占用,输入http://localhost:8080/ 就可以了)。

出现这个界面说明vue项目创建成功:
在这里插入图片描述
现在vue引入Element

1.打开cmd,进入到当前刚创建的vue项目目录
在这里插入图片描述
在当前目录中运行:npm i element-ui -S
在这里插入图片描述
我使用webstrom打开刚创建的项目;file-open
在这里插入图片描述
如图所示:
在这里插入图片描述
改变项目目录中的main.js文件;

初始main.js文件:
在这里插入图片描述
改成:
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)
如图所示:
在这里插入图片描述
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)

你将看到如下页面:
在这里插入图片描述
成功的引入了Element!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/249826.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

javaweb学习6——自定义标签

声明&#xff1a;本文只是自学过程中&#xff0c;记录自己不会的知识点的摘要&#xff0c;如果想详细学习JavaWeb&#xff0c;请到孤傲苍狼博客学习&#xff0c;JavaWeb学习点此跳转 本文链接&#xff1a;https://www.cnblogs.com/xdp-gacl/p/3916946.html https://www.cnblogs…

vscode配置vue环境

一、安装VSCode、NodeJS VSCode&#xff1a;https://code.visualstudio.com/ NodeJS&#xff1a;https://nodejs.org/en/ 二、打开VSCode&#xff0c;安装常用插件 如图所示&#xff08;安装后重新加载即可&#xff09;: 三、项目中添加.vscode文件夹&#xff0c;文件夹中添…

vue调用顺序(初学版) index.html → main.js → app.vue → index.js → components/组件 测试

关于它是怎么调用运作的&#xff1a;https://mp.csdn.net/postedit/86134414 一. 准备工作&#xff1a; 1.下载webstorm&#xff0c;安装vue。 2.创建项目&#xff0c;cd到要放项目的文件夹下 vue init webpack vue_test 3.安装各种包 npm install 4.运行 cd vue_test …

NO.8:自学python之路------并行socket网络编程

摘要 一到放假就杂事很多&#xff0c;这次的作业比较复杂&#xff0c;做了一个周&#xff0c;进度又拖了。不过结果还不错。 正文 粘包 在上一节中&#xff0c;如果连续发送过多数据&#xff0c;就可能发生粘包。粘包就是两次发送的数据粘在一起被接收&#xff0c;损坏了数据的…

vue项目中主要文件的加载顺序(index.html、App.vue、main.js)

先后顺序&#xff1a; index.html > App.vue的export外的js代码 > main.js > App.vue的export里面的js代码 > Index.vue的export外的js代码 测试的页面代码块&#xff1a; 文件的加载先后顺序&#xff1a; Index.vue的mounted()中的输出没有执行。why&#…

凸包算法

转载自&#xff1a;https://blog.csdn.net/bone_ace/article/details/46239187 凸包问题的五种解法 2015年05月29日 17:58:51 阅读数&#xff1a;33660前言&#xff1a; 首先&#xff0c;什么是凸包&#xff1f; 假设平面上有p0~p12共13个点&#xff0c;过某些点作一个多边形&a…

一个优雅的占位图解决方案。适用于 UITableView 和 UICollectionView。

FMListPlaceholder 项目地址&#xff1a;https://github.com/yfming93/FMListPlaceholder 一个优雅的占位图解决方案。适用于 UITableView 和 UICollectionView。 一行代码处理空列表占位图逻辑 0x001 与其他的同类三方库对比的优点&#xff1a; 首次进入列表占位图是不显示的。…

vue中 关于$emit的用法

1、父组件可以使用 props 把数据传给子组件。 2、子组件可以使用 $emit 触发父组件的自定义事件。 vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运行 fn&#xff1b; 例如&#xff1a;子组件&#xff1a; <template><di…

vue-transition动画

demo点击显示与消失 <div id"demo"><button v-on:click"show !show">Toggle</button><transition name"fade"><p v-if"show">hello</p></transition> </div> <script> new V…

Java String:重要到别人只能当老二的字符串类

字符串&#xff0c;是Java中最重要的类。这句肯定的推断不是Java之父詹姆斯高斯林说的&#xff0c;而是沉默王二说的&#xff0c;因此你不必怀疑它的准确性。 关于字符串&#xff0c;有很多的面试题&#xff0c;但我总觉得理论知识绕来绕去没多大意思。你比如说&#xff1a;Str…

Java基础教程:多线程基础(3)——阻塞队列

Java基础教程&#xff1a;多线程基础&#xff08;3&#xff09;——阻塞队列 快速开始 引入问题 生产者消费者问题是线程模型中的经典问题&#xff1a;生产者和消费者在同一时间段内共用同一存储空间&#xff0c;生产者向空间里生产数据&#xff0c;而消费者取走数据。 模拟情景…

001.Linux开机启动过程

相关Linux启动过程解析&#xff0c;此作为通用启动参考&#xff1a; 转载于:https://www.cnblogs.com/itzgr/p/10285833.html

【01】《正则表达式必知必会》(已看)(仅存放)

【01】《正则表达式必知必会》 共149页。扫描版&#xff0c;中文版。Sams Teach Yourselef Regular Expressions in 10 minutesBen Forta著。杨涛 翻译【】魔芋&#xff1a;这本书已经没有用了。内容已吸收。内容较为基础&#xff0c;也很全面。** 附件列表 链接&#xff1a;ht…

什么是高并发,如何避免高并发

之前我将高并发的解决方法误认为是线程或者是队列可以解决&#xff0c;因为高并发的时候是有很多用户在访问&#xff0c;导致出现系统数据不正确、丢失数据现象&#xff0c;所以想到 的是用队列解决&#xff0c;其实队列解决的方式也可以处理&#xff0c;比如我们在竞拍商品、转…

到底多大才算高并发?

一、什么是高并发 定义&#xff1a; 高并发(High Concurrency)是使用技术手段使系统可以并行处理很多请求。关键指标&#xff1a; -响应时间(Response Time) -吞吐量(Throughput) -每秒查询率QPS(Query Per Second) -每秒事务处理量TPS(Transaction Per Second) -同时在…

eclipse安装maven插件

1、在线安装插件 a.打开eclipse&#xff0c;菜单“Help”-“Install New Software...” b.在Work with 地址栏输入&#xff1a;http://download.eclipse.org/releases/对应eclipse版本名称 c.在filter框中输入maven d.选择“Collaboration”-“m2e - Maven Integration for Ecl…

VS2017 网站打包发布生成的文件中包含.pdb文件,解决办法

右键点击项目属性&#xff0c;选择打包/发布 Web&#xff0c;勾选 排除生成的调试符号&#xff1a; 再次发布&#xff0c;就不会再生成.pdb文件 转载于:https://www.cnblogs.com/JoinLet/p/10297254.html

分布式学习路线

由于分布式系统所涉及到的领域众多&#xff0c;知识庞杂&#xff0c;很多新人在最初往往找不到头绪&#xff0c;不知道从何处下手来一步步学习分布式架构。 本文试图通过一个最简单的、常用的分布式系统&#xff0c;来阐述分布式系统中的一些基本问题。 负载均衡分布式缓存分…

IDEA开发vue.js卡死问题

在执行cnpm install后会在node_modules这个文件下面生成vue的相关依赖文件&#xff0c; 这个时候当执行cnpm run dev命令时&#xff0c;会导致IDEA出现卡死的问题&#xff0c;解决方法如下&#xff1a; 转载于:https://www.cnblogs.com/heqiuyong/p/10301925.html

各种缓存介绍

说起缓存相关技术&#xff0c;老多了&#xff0c; memcache、redis、squid、varnish、web cache、 CDN等等。缓存技术五花八门&#xff0c;但这些技术间有什么共性的地方&#xff0c;又有什么不同的地方呢&#xff1f;答案肯定是有的&#xff0c;这次为大家分享及整理一下缓存方…