今天只聊业务实战，不聊代码原理(原理很重要…)

一个完整的vue项目是要有自己所需要用到的基础东西

1. vue-cli3（搭建一个vue工程，可在里面选less,vuex基础配置等等，感兴趣的童鞋可以自己百度一下）
2. axios（从浏览器中创建XMLHttpRequests，node.js创建http请求。和ajax用法大同小异）
3. 外部组件框架（移动端推荐vant-ui，web端推荐element-ui）

• vue页面缓存处理
  利用<router-view></router-view>标签页面缓存

<div id="app">
    <!--缓存想要缓存的页面，实现后退不刷新-->
    <!--加上v-if的判断，可以自定义想要缓存的组件，自定义在router里面-->
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>

  </div>

router.js配置

// 在配置路由 router.js 中来控制某个组件是否需要缓存
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
      meta:{keepAlive: true} // 这个组件需要缓存 true
    },{
      path:'/eleme',
      component:Eleme,
      meta:{keepAlive: false} // 这个组件不需要缓存false(不写默认不缓存)
    }
  ]
})
// 设置为缓存之后不会触发组件销毁周期

• vue-router组件动态设置title页面标题

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
      meta:{
      	title:'首页' // 组件名称
      }
    },{
      path:'/eleme',
      component:Eleme,
      meta:{
      	title:'个人'// 组件名称
      }
    }
  ]
})
在组件中获取(在哪个组件获取哪个组件的title)
create:{
	this.$route.meta.title
}

• 判断用户是否登录，没有登录跳转登录页面
  当然也可以在拦截器中判断用户是否登录，主要看需求使用。
  有兴趣的小伙伴可以参考一下

// 在 main.js 中判断是否需要登录
router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
      //这里判断用户是否登录，验证本地存储是否有token
      if (!localStorage.token) { // 判断当前的token是否存在
          next({
              path: '/login',
              query: { redirect: to.fullPath }
          })
      } else {
          next()
      }
  } else {
      next() // 确保一定要调用 next()
  }
})

// 在router.js控制哪些页面需要验证
{
      path: '/mint',
      component: Mint,
      meta: { requiresAuth: true } // 添加表示需要验证
}

还有各色各样的功能在鄙人的主页，各位太君请进主页观赏
vue创建多个公共过滤器
vue微信公众号扫码功能
h5 调手机拨号和发送短信功能
js基础常用操作

各种能用到的，用不到的，常用的，不常用的，只要是关于前端的统统都有。太君里面请