• 前言:

昨天算是使用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)的更多相关文章

  1. 记录vue中一些有意思的坑

    记录vue中一些有意思的坑 'message' handler took 401ms 在出现这个之前,我一直纠结于 是如何使用vue-router或者不使用它,通过类似的v-if来实现.结果却出现这个 ...

  2. vue项目移植tinymce踩坑

    转载:https://segmentfault.com/a/1190000012791569?utm_source=tag-newest 2019-2-18 貌似这篇文章帮了大家一些小忙最近tinym ...

  3. Java 开发中如何正确踩坑

    为什么说一个好的员工能顶 100 个普通员工 我们的做法是,要用最好的人.我一直都认为研发本身是很有创造性的,如果人不放松,或不够聪明,都很难做得好.你要找到最好的人,一个好的工程师不是顶10个,是顶 ...

  4. Vue.js provide / inject 踩坑

    最近学习JavaScript,并且使用vuejs,第一次使用依赖注入,结果踩坑,差点把屏幕摔了..始终获取不到如组件的属性,provide中的this对象始终是子组件的this对象 慢慢也摸索到了些v ...

  5. 在 .NetCore 项目中使用 SkyWalkingAPM 踩坑排坑日记

    SkyWalking 概述 SkyWalking 是观察性分析平台和应用性能管理系统.提供分布式追踪.服务网格遥测分析.度量聚合和可视化一体化解决方案.支持Java, .Net Core, PHP, ...

  6. Vue过渡mode属性踩坑

    近期学习Vue的过渡效果的时候,mode属性的"in-out"."out-in"设置了不起作用,官网上的例子让我看了有点迷,问题解决后以此文记录之. 首先我们看 ...

  7. vue中eventbus被多次触发(vue中使用eventbus踩过的坑)【bus.$on事件被多次绑定】

    问题描述:只要页面没有强制刷新,存在组件切换,bus.$on方法会被多次绑定,造成事件多次触发   触发bus.$on中绑定的方法.png   bus.$on多次绑定.png 解决办法:在每次调用方法 ...

  8. vue.js使用typescript踩坑记

    最近在把https://github.com/renrenio/renren-fast-vue这个项目转为typescript,在此记录一下遇到的小坑 name坑:属性该怎么给? 声明文件坑:如何解决 ...

  9. 在Vue中遇到的各种坑 及性能提升

    Vue: (1)    没有再模板里引用data数据,会不会引起update.beforeUpdate生命周期函数的执行? 不会 (2)组件改成异步 (3)v-once (4)如果不用template ...

随机推荐

  1. C语言实现单链表(不带头结点)节点的插入

    对单链表进行增删改查是最主要的操作.我在上一篇博客<C语言实现链表节点的删除>实现了删除单链表中的某个节点. 这里我们要来实如今某个位置插入节点.演示样例代码上传至https://gith ...

  2. linux查找系统中占用磁盘空间最大的文件

    Q:下午有一客户磁盘空间占用很大,使用df查看磁盘剩余空间很小了,客户想知道是哪些文件占满了文件. Q1:在Linux下如何查看系统占用磁盘空间最大的文件? Q2:在Linux下如何让文件夹下的文件让 ...

  3. ExtJs 通过分析源代码解决动态加载Controller的问题

    通过分析源代码解决动态加载Controller的问题 最近在研究ExtJs(4.2.0)的MVC开发模式,具体Extjs的MVC如何使用这里不解释,具体参见ExtJs的官方文档.这里要解决的问题是如何 ...

  4. Android——实现欢迎界面的自动跳转(转)

    Android实现欢迎界面的自动跳转,就是打开某一个安卓手机应用,出现的欢迎界面停留几秒钟,自动进入应用程序的主界面.在网上看到很多种实现办法,但是感觉这种方法还是比较简单的. 在onCreate里设 ...

  5. HTML——动画效果:图片循环横向播放

    一.html <!DOCTYPE HTML> <html> <head> <title>Home</title> <link href ...

  6. Win10如何显示系统托盘所有图标

    最快就是小娜搜索通知 打开Win10“设置”,依次进入“系统 – 通知和操作”,设置界面如图: 点击“选择在任务栏上显示哪些图标”打开如图所示的界面:

  7. PHP变量解析顺序variables_order

    转载自:http://blog.csdn.net/knight0450/article/details/4291556 故事从一个有点诡异的BUG开始,后台一个使用频率不是很高的广告提交功能有时候会莫 ...

  8. spring boot 自学笔记(四) Redis集成—Jedis

    上一篇笔记Reddis集成,操作Redis使用的是RedisTemplate,但实际中还是有一大部分人习惯使用JedisPool和Jedis来操作Redis, 下面使用Jedis集成示例. 修改Red ...

  9. EasyUI的treegrid组件动态加载数据问题的解决办法

    http://www.jquerycn.cn/a_3455 —————————————————————————————————————————————————————————————————————— ...

  10. 【转】iOS-APP如何做才安全

    iOS应用的安全性 常常被大家忽视. iOS 如何做才安全: 1.首先,我们可以通过iTunes 下载 AppStore的ipa文件(苹果 把开发者上传的ipa包 进行了加壳再放到AppStore中) ...