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）

最新文章

热门文章