vue中的小踩坑(01)
- 前言:
昨天算是使用vue2.0+element-ui做了一点小小的页面,可是源于其中遇到的问题,特地整理一下,以防自己还有其他的小伙伴们继续踩坑。
- 过程:
1.不知道大家有没有注意到,每次打开项目的时候,在地址栏总会莫名其妙的出现“#”字符,就比如:
http://localhost:8080/#/
其实,在项目中自己并没有在哪里设置加上“#”这个特殊字符。最后纠结了一下,终究明白了这是为什么:http://router.vuejs.org/zh-cn/essentials/history-mode.html

而在项目中,只需在注册路由的时候加上:mode: 'history',即:
const router = new VueRouter({
mode: 'history',
routes
})
于是便解决了地址上那个莫名的“#”了。
2.自己在使用element-ui的时候,还出现了样式引入不进去的问题,当时是这样写的:
import Vue from 'vue'
import App from './App'
//引入element-ui组件
import ElementUI from 'element-ui'import VueRouter from 'vue-router'
import routes from './router/index'
import Mock from './mock'
Mock.bootstrap(); Vue.use(ElementUI);
Vue.use(VueRouter); const router = new VueRouter({
// mode: 'history',
routes
}) // 实例化vue
new Vue({
router,
// store,//vuex 提供的
render: h => h(App)
}).$mount('#app') //手动地挂载一个未挂载的实例(#app)
可就是在页面上不出现ui的各种样式,最终直到再去看element-ui的官网时,才发现又是因为自己的粗心,才导致这个问题的:

原来自己在引用ui的时候,忘记了那句话,真是粗心!
- 后言:
虽然刚入手vue,但是苦于接触到新的技术并运用到工作中,等到项目完成之后还是有着小小的成就感。继续fighting for technology!
vue中的小踩坑(01)的更多相关文章
- 记录vue中一些有意思的坑
记录vue中一些有意思的坑 'message' handler took 401ms 在出现这个之前,我一直纠结于 是如何使用vue-router或者不使用它,通过类似的v-if来实现.结果却出现这个 ...
- vue项目移植tinymce踩坑
转载:https://segmentfault.com/a/1190000012791569?utm_source=tag-newest 2019-2-18 貌似这篇文章帮了大家一些小忙最近tinym ...
- Java 开发中如何正确踩坑
为什么说一个好的员工能顶 100 个普通员工 我们的做法是,要用最好的人.我一直都认为研发本身是很有创造性的,如果人不放松,或不够聪明,都很难做得好.你要找到最好的人,一个好的工程师不是顶10个,是顶 ...
- Vue.js provide / inject 踩坑
最近学习JavaScript,并且使用vuejs,第一次使用依赖注入,结果踩坑,差点把屏幕摔了..始终获取不到如组件的属性,provide中的this对象始终是子组件的this对象 慢慢也摸索到了些v ...
- 在 .NetCore 项目中使用 SkyWalkingAPM 踩坑排坑日记
SkyWalking 概述 SkyWalking 是观察性分析平台和应用性能管理系统.提供分布式追踪.服务网格遥测分析.度量聚合和可视化一体化解决方案.支持Java, .Net Core, PHP, ...
- Vue过渡mode属性踩坑
近期学习Vue的过渡效果的时候,mode属性的"in-out"."out-in"设置了不起作用,官网上的例子让我看了有点迷,问题解决后以此文记录之. 首先我们看 ...
- vue中eventbus被多次触发(vue中使用eventbus踩过的坑)【bus.$on事件被多次绑定】
问题描述:只要页面没有强制刷新,存在组件切换,bus.$on方法会被多次绑定,造成事件多次触发 触发bus.$on中绑定的方法.png bus.$on多次绑定.png 解决办法:在每次调用方法 ...
- vue.js使用typescript踩坑记
最近在把https://github.com/renrenio/renren-fast-vue这个项目转为typescript,在此记录一下遇到的小坑 name坑:属性该怎么给? 声明文件坑:如何解决 ...
- 在Vue中遇到的各种坑 及性能提升
Vue: (1) 没有再模板里引用data数据,会不会引起update.beforeUpdate生命周期函数的执行? 不会 (2)组件改成异步 (3)v-once (4)如果不用template ...
随机推荐
- win10无法使用内置管理员账户打开应用
win10无法使用内置管理员账户打开应用怎么办 听语音 | 浏览:42181 | 更新:2016-02-21 10:04 | 标签:WIN10 1 2 3 4 5 6 7 分步阅读 推荐视频 mo ...
- Android集成银联支付,提示java.lang.UnsatisfieldLinkError错误
尽管解决方法很简单,但还是记录一下吧. 最近做银联支付(Android),官方给的demo是eclipse的.按照官方(https://open.unionpay.com/ajweb/product) ...
- vshare
vshare 基于百度分享开发的支持VUE2.X的分享插件,为您带来更多的流量!提供多种风格按钮,代码加载更快,引入社会化流量,提升网页抓取速度等优点.github地址:https://github. ...
- java日期工具类DateUtil-续二
该版本是一次较大的升级,农历相比公历复杂太多(真佩服古人的智慧),虽然有规律,但涉及到的取舍.近似的感念太多,况且本身的概念就已经很多了,我在网上也是查阅了很多的资料,虽然找到一些计算的方法,但都有些 ...
- Ubuntu下SSH安装及提高SSH登陆认证速度的办法
Ubuntu 下安装 OpenSSH Server 是无比轻松的一件事情,需要的命令只有一条: sudo apt-get install openssh-server (查看返回的结果,如果没有出错, ...
- BM和KMP字符串匹配算法学习
BM和KMP字符串匹配算法学习 分类: 研究与学习 字符串匹配BM(Boyer-Moore)算法学习心得 http://www.cnblogs.com/a180285/archive/2011/12/ ...
- MongoDB之分片
本文介绍分片的思想和MongoDB中的实现方法. 首先须要介绍一些主要的概念. 分片 分片.也叫做分区.是一种经常使用的数据库优化技术.其含义就是将数据拆分,将数据分散到不同机器上的过程.这样就能够使 ...
- Codeforces 558C Amr and Chemistry 暴力 - -
点击打开链接 Amr and Chemistry time limit per test 1 second memory limit per test 256 megabytes input stan ...
- MySQL多表数据记录查询详解
在实际应用中,经常需要实现在一个查询语句中显示多张表的数据,这就是所谓的多表数据记录连接查询,简称来年将诶查询. 在具体实现连接查询操作时,首先将两个或两个以上的表按照某个条件连接起来,然后再查询到所 ...
- 移动H5功能设计反思 测试用例总结
一.线上页面滑动流畅性测试 1.减少长动画效果(影响流畅) 2.是否自动跳转或者还是让用户自己操作跳转需要推敲 二.buttom和页面滑动的选择(优劣) 部分手机本身就会滑动不灵敏,大部分时候其实用b ...