开发前准备

一、需求整理

！！！重要：查看设计图，了解哪些页面组件是可以复用的

二、目录结构设置

public：一般放一些比较大的图片资源
src/api：放接口
src/assets：放一些小一点的图片
src/components：放公用组件
src/views：放项目不同页面的文件夹
src/util：放一些需要格式化的js文件，比如日期转化，金融的格式化，文字转换，数字转换等
src/storage：存放localStorage、sessionStorage的js文件
src/store：使用vuex的时候存放一些东西的文件夹
src/router：存放路由的文件夹
可能还会有些存放公共样式的文件，可以根据自己的需求增减

三、分析设计图，找出最外层复用的组件，单独提出来，比如header、footer这种，然后将页面目录设置出来

如：

四、安装插件

可以用vue GUI安装插件，也可以在控制台使用命令安装
常用插件：
轮播图插件：vue-awesome-swiper、swiper
css预编译器：node-sass，sass-loader
ui组件：element-ui
对接后台：vue-cookie
懒加载：vue-lazyload
接口：vue-axios
路由：vue-router

npm i vue-lazyload node-sass sass-loader vue-awesome-swiper vue-cookie --save-dev

五、路由封装

import Vue from 'vue'// 引入vue
import VueRouter from 'vue-router'// 引入vue-router

Vue.use(VueRouter)// 声明使用vue-router

const routes = [// 我们写的路由，可以有多个，在router里面引入就可以了

]

const router = new VueRouter({ // 声明我们写的路由
  routes
})

export default router// 导出我们写的路由

注意：我们使用路由时必须在main.js中引用

import router from './router'

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

六、storage封装

1、cookie、localStorage、sessionStorage三者的区别

(1)存储大小：
cookie：4k
storage:5M
(2)有效期：
cookie拥有有效期，cookie有时间限制，可能是三天、七天、一个月等，当有效期到了就会消失
localStorage只要不主动删除就会永久存在
sessionStorage有效期是当前会话框的存在时间，当前会话关闭后就消失了
(3)存储位置：
cookie会发送到服务器端，存储在内存中

localStorage是存储在浏览器端
sessionStorage是存储在内存中的
(4)路径：
cookie有路径限制
storage只存储在域名下
(5)API：
cookie没有特定的API
storage有对应的API

2、为什么要封装storage，本身不是已经有了API了吗？

(1)storage本身已经有API了，但是只是简单的key/value形式
(2)storage只能存储字符串，需要人工转换成json对象
(3)storage只能一次性清空，不能单独清空

七、接口错误拦截

在main.js中：

import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)// 把axios对象挂载上去
// 只使用axios时，每个页面都得导入，很麻烦，而vue-axios把作用域对象挂载到vue实例上面去，方便用this调用
// 根据前端跨域做调整，我们先暂时采取代理的方式
axios.defaults.baseURL = '/api'
axios.defaults.timeout = 6000
// 接口错误拦截
axios.interceptors.response.use(function (response) {
  const res = response.data // 获取接口的整个信息（包括status，data，msg）
  if (res.status == 0) { // 登陆成功的状态码为0
    return res.data // 获取接口信息的data
  } else if (res.status == 10) { // 未登录的状态码为10（自己设定）
    window.location.href = '/#/login' // 直接跳转页面到login登陆页面，
    // 不能用路由的方式，因为这是main.js文件不是vue
  } else {
    alert(res.msg) // 否则报错，输出错误msg信息
  }
})

八、接口环境设置

1、为什么要设置接口环境

● 开发上线的不同阶段，需要不同的配置
● 不同的跨域方式，配置不同
● 打包的时候统一注入环境参数，统一管理环境，输出不同的版本包

2、环境配置的方式

（1）CORS和JSONP的配置

● 在scr目录新建一个env.js文件来配置不同的环境下，使用不同的参数

let baseURL
// process.env.NODE_ENV获取node.js进程里的环境变量
switch (process.env.NODE_ENV) {
  // 开发
  case 'development':
    baseURL = 'http://dev-xx-xxx.com/api'
    break
  // 测试
  case 'test':
    baseURL = 'http://test-xx-xxx.com/api'
    break
  // 预发布
  case 'prev':
    baseURL = 'http://prev-xx-xxx.com/api'
    break
  // 线上
  case 'prod':
    baseURL = 'http://xx-xxx.com/api'
    break
  // 以上的情况都不是
  default:
    baseURL = 'http://xx-xxx.com/api'
    break
}

export default {
  baseURL
}

● 在package.json文件中新增测试打包，线上打包和本地运行时所需的环境

"scripts": {
    "serve": "vue-cli-service serve --mode=development",
    "test": "vue-cli-service serve --mode=test",
    "prev": "vue-cli-service serve --mode=prev",
    "build": "vue-cli-service build --mode=production",
    "lint": "vue-cli-service lint"
  },

● 最后需要在main.js中导入env.js文件

import env from './env'

// 根据前端的跨域方式做调整
axios.defaults.baseURL = '/api'
// 根据环境变量获取不同的请求地址
axios.defaults.baseURL = env.baseURL
// 超时处理
axios.defaults.timeout = 8000

（2）代理跨域的配置

如果使用的是接口代理的方式进行跨域的话，在vue.config.js 文件中修改相对应的地址就可以。

// 因为遵循的是node.js服务器，使用的是commonJS规范，需要用module.exports导入
module.exports = {
  devServer: { // 必须使用这个名字，这样才会默认使用这个里面的配置表
    host: 'localhost', // 主机
    port: 8080, //  端口，可以更改，但默认是8080，我们也使用8080
    proxy: { //  代理
      '/api': { // 当你访问到api时拦截
        target: 'https://www.imooc.com', // 代理目标，当你拦截到api时，就会跳转到这个网址
        changeOrigin: true, // 是否将主机头的原点设置为url,如果设置成true：发送请求头中host会设置成target·
        pathRewrite: { // 配置地址
          '/api': ''
        }
      }
    }
  }
}

九、Mock设置

mock 的意思是模拟，也就是模拟接口返回的信息，用已有的信息替换它需要返回的信息，从实现对上级模块的测试。

1、为什么要设置mock

开发阶段，为了高效率，需要提前Mock
减少代码冗余、灵活插拔
减少沟通、减少接口联调时间

2、配置mock的三种方式

（1）本地创建json

最简单的方式，但是本地创建json文件无法无缝切换到开发环境，应为json文件是写死了的
新建文件public/mock/user/userInfo.json，添加代码：

{
  "status": 0,
  "data": {
    "id|10001-11000": 0,
    "username": "@cname",
    "email": "admin@51purse.com",
    "phone": null,
    "role": 0,
    "createTime": 1479048325000,
    "updateTime": 1479048325000
  }
}

App.vue中添加代码：

<script>
import axios from 'axios'
export default {
  name: 'app',
  components: {
  },
  data () {
    return {
      res: {}
    }
  },

  mounted () {
    axios.get('/mock/user/userInfo.json').then((data) => {
      this.res = data.data
    })
  }
}
</script>

（2）easy-mock平台

easy-mock不稳定，如果能自己搭建使用这种方式时最好的，不建议使用线上的这个
看 这里

（3）集成Mock API

Mock API有个特点，控制台是查看不到请求的，应为在请求在发出去之前就被拦截了
看 这里