vue常见问题收集

新建完项目，先做好准备工作

1 定义全局路由

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      redirect : '/home',
      name: 'index',
      component : () => import('@/page/home.vue')
    },
    {
      path: '/detail/:codeId',
      name: 'detail',
      component : () => import('@/page/detail.vue')
    },
    {
      path: '/list',
      name: 'list',
      component : () => import('@/page/list.vue')
    },
    {
      path: '/home',
      name: 'home',
      component : () => import('@/page/home.vue')
    },
  ]
})

1.1路由懒加载，当组件太多的时候，
vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时
简单的说就是：进入首页不用一次加载过多资源造成用时过长！！！

其实懒加载十分简单,几个resolve就行了

export default new Router({
  routes: [
    {
      path: '/',
      component: resolve => require(['components/index.vue'], resolve)
    },
    {
        path: '/about',
        component: resolve => require(['components/About.vue'], resolve)
    }
  ]
})

2、axios 类似就是jq的ajax

Vue.prototype.$axios = axios;
使用的时候，直接
this.$axios

3、main.js的设置

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'

Vue.use(MintUI)
Vue.config.productionTip = false/*生产提示*/
Vue.prototype.$axios = axios;
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
})

4、app.vue一般都不用动，用作来做路由跳转