项目--vue使用总结

1. 全局过滤器

1. 创建filters.js文件，创建过滤器moneyFormat

import Vue from 'vue'
Vue.filter('moneyFormat', value => {
    return "$" + Number(value).toFixed(2)
})

2. 在main中引用filters.js

import "@/config/filters.js"

3. 在组件中使用

<span>{{price | moneyFormat}}</span>

2. 路由懒加载

对于直接默认需要渲染的模块（组件）可以在路由配置前就进行导入，如Layout组件

对于根据需要进行加载的模块，在需要时才异步进行加载，如Me组件

import Vue from 'vue'
import VueRouter from 'vue-router'
import Layout from '@/views/layout/Layout.vue' 
Vue.use(VueRouter)

const routes = [{
    path: '/',
    name: 'Layout',
    redirect: '/home',
    component: Layout,
    children: [{
      path: '/home',
      name: 'Home',
      component: () => import('@/views/home/Home.vue')
    },{
      path: '/me',
      name: 'Me',
      component: () => import('@/views/me/Me.vue')
    }, ]
  },
  {
    path: '/login',
    name: 'login',
    component: () => import('@/views/login/Login.vue')
  },
  {
    path: '/refresh',
    name: 'refresh',
    component: () => import('@/views/Refresh.vue')
  },
  {
    path: '*',
    name: '404',
    component: () => import('@/views/404.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

3. 配置跨域

1. 创建vue.config.js文件

module.exports = {
    lintOnSave: false,//eslint-loader 是否在保存的时候检查
    devServer: {
        host: 'localhost',
        port: '8080',
        https: false,
        open: true,
        proxy: {
            '/admin': {
                target: 'http://xxxxx',   //真正需要请求的地址
                ws: true, //proxy websockets
                changeOrigin: true,
                pathRewrite: {
                    '^/admin': ''
                }
            },
        }
    }
}

2. 项目使用时'/admin/xxxxxx'

 this.axios
    .get(`/admin/goods_type/${this.currentPage}`)
    .then(res => {
      let { data } = res.data;
      ....
      });
    })
    .catch(err => {});

4. 使用keepAlive保留缓存

1.对需要缓存数据的组件的路由meta标签中添加一个标示，区分是否缓存,如下home组件

const routes = [{
    path: '/',
    name: 'Layout',
    redirect: '/home',
    component: Layout,
    children: [{
      path: '/home',
      name: 'Home',
      meta: {
        keepAlive
      },
      component: () => import('@/views/home/Home.vue')
    }, {
      path: '/me',
      name: 'Me',
      component: () => import('@/views/me/Me.vue')
    }, ]
  },
  {
    path: '/login',
    name: 'login',
    component: () => import('@/views/login/Login.vue')
  },
  {
    path: '*',
    name: '404',
    component: () => import('@/views/404.vue')
  }
]

2. 路由出口设置（注意如果有基础组件layout，在layout中设置，否则在app.vue中设置）

<!-- 标识缓存的组件的路由出口 -->
<keep-alive>
  <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<!-- 不需要缓存的组件的路由出口 -->
<router-view v-if="!$route.meta.keepAlive"></router-view>

5. 路由的全局守卫

router.beforeEach((to, form, next) => {
//判断是否为需要验证权限才能查看的页面，如果是进行token验证
  if (to.meta.auth) {
    //只要本地有token就认为是登陆了
    const token = localStorage.getItem('token');
    if (token) {
      next()
    } else {
      //未登陆
      next({
        path: '/login',
        query: {
          redirect: to.path //记录来时的页面路由
        }
      })
    }
  } else { 
  //不需要认证的页面直接通过
    next()
  }
})

6. vuex使用

5. 在vue项目中自己写接口

1. 在vue.config.js中设置如，如下为一个登陆的接口例子

module.exports = {
    configureWebpack: {
        devServer: {
            before(app) {
                app.get('/api/login', (req, res) => {
                    //获取前端传递的参数
                    const {
                        username,
                        password
                    } = req.query;
                    if (username === 'admin' && password === '123') {
                        //返回结果
                        res.json({
                            code: '1',
                            token: 'token-----'
                        })
                    } else {
                        res.status(401).json({
                            code: '0',
                            message: '用户名或者密码错误'
                        })
                    }
                })
            }
        }
    }
}

2. 在浏览器中输入http://localhost:8080/api/login，可以查看响应结果

更新中---