注: spa是单页面应用,就是通过路由跳转切换页面,vue默认是这样的,如果需要开发多页面应用如官网之类的网站需要用到vue-nuxt.js 详情参考文档
1 首先vue项目开发必定会用到vue框架 这个必须会这就不多说了
2 想要项目代码质量好,就少不了组件化模块化,组件封装这个也不多说了 vue得学
3 重点就是需要做模块化 以及异步 传值的处理

模块化以及优化处理

1 路由懒加载(可以有效优化项目速度 还有cdn引入 下面会说)

   在router/index.js 路由页面中,尽量避免引入组件然后使用组件这样的形式,
    应该使用路由懒加载 以函数形式引入组件使用 比如下面这样

image.png image.png

组件懒加载

image.png

注册全局异步组件

image.png

2 全局路由守卫

全局路由守卫可以做到统一处理路由登陆以及其他问题 也可以统一的做一些配置
详情建议看文档或看其他博主博客

3 axios拦截器

  axios是vue2 使用的发送请求的ajax库
  但一直发送的话代码重复过多,代码质量不高
  所以选用axios拦截器 可以做统一的请求发送和响应拦截,

  使用方法:
      在src文件夹下定义一个api文件夹用于存放请求模块和拦截器模块
      创建一个拦截器模块request.js文件
            1 引入库
                  import axios from 'axios'
                  import qs from 'qs'
            2 定义请求地址
                  var ip = 'https:/域名/aaa/xxx'

                  我有做一个线上线下的判断这样可以避免部署上线时改代码的麻烦
                  var ip = location.origin.indexOf(':808') >= 0 ? '/api' : 'https:/域名/aaa/xxx'
                  通过判断当前域名看是出于开发环境还是生产环境，
                  这样向服务器发送的请求不一样嘛,因为前端开发总有跨域问题嘛，
                  需要配置跨域代理,'/api'就是跨域代理
            3 创建axios实例
                  目的是添加到实例对象中作于拦截时做相应处理
                  const service = axios.create({
                          baseURL:ip,  //请求地址
                          timeout:5000, //超时时间
                })
            4 做发送拦截处理
                  service.interceptors.request.use(config => {
                      //我的做法比较简单值判断了请求方式做了相应处理
                      //有更多需求可以做其他配置 详情百度
                        config.method === 'post'
                        ? config.data = qs.stringify({...config.data})
                        : config.data = {...config.params}

                          return config    //返回结果
                       },error => {
                          Promise.rejecet(error)
                    })
            5 做相应拦截处理  
                    service.interceptors.response.use(
                        response => {
                          //处理后端数据
                          if(response.data.data){
                       //在这里面可以做很多处理比如http状态码的判断,由于我比较懒就没弄
                          return response.data.data
                          }else{
                  // return response.data.msg
                                  console.log('请求出错,没有数据·······')
                          }
                   },
                  error => {
                      //做失败处理
                  return Promise.reject(error)
              }
              )

            6 在src/api/创建index.js请求发送模块
                  1 引入暴露的拦截器模块
                  import service from './request.js'
                  2  定义请求并暴露出去
                  export const getNavigation = params => {
                  // console.log(JSON.parse(params))  //打印 data : {type:'1'}
                      return service({
                      //请求地址  这里只有路由后缀,因为到拦截器中地址会进行拼串,详情可以在拦截器模块中打印config查看
                            url:'/facility.do',     
                      //请求方式
                           method:'get',
                      //请求参数 这里说明 get请求接受的就是params post就是data 踩过坑了
                            params
                    })
                  }  

            7 最后在组件中引入使用

4 vuex

强烈推荐文章 https://segmentfault.com/a/1190000015782272?utm_source=tag-newest

5 打包体积过大问题(对项目线上速度也有所帮助)

  1 修改配置不打包出.map文件
        修改config/index.js 中的productionSourceMap:false 不打包出.map文件
  2 不打包一些文件
        第一步: 在build/webpack.base.conf.js 里添加
        externals: {
            //也可以自行添加 但有些需要大写 需注意
            'vue': 'Vue',
            'axios': 'axios',
            'vue-router': 'VueRouter',
            'vuex':'Vuex',
            'qs':'Qs'
          },
        第二步: 在index.html中 从cdn上引入这些库 最好选xxx.min.js 因为体积比较小