实习总结（网易有道）

组合式API

选项式API：就是通过填充 (option) data、methods、computed 等属性来完成一个 Vue 组件。这种风格使得 Vue 相对于 React极为容易上手，同时也造成了几个问题：
1.由于 Options API 不够灵活的开发方式，使得Vue开发缺乏优雅的方法来在组件间共用代码。
2.Vue 组件过于依赖this上下文，Vue 背后的一些小技巧使得 Vue 组件的开发看起来与 JavaScript 的开发原则相悖，比如在methods 中的this竟然指向组件实例来不指向methods所在的对象。
组合式API：主要是把一个功能逻辑的代码组织在一起
优点：功能逻辑复杂繁多情况下，各个功能逻辑代码组织再一起，便于阅读和维护
缺点：需要有良好的代码组织能力和拆分逻辑能力 （在 vue3 中也可以支持 vue2 选项API 写法）

nvm

定义：主要是一个node版本的管理工具

服务端渲染和前后端分离

服务端渲染：客户端发出请求：服务端接收请求并返回相应HTML文档：页面刷新，客户端加载新的HTML文档。
优点:
1、更快的响应时间，不用等待所有的js加载完成，也能显示比较完整的页面；
2、更好的SEO，可以将SEO的关键信息直接在后台渲染成html，保证了搜索引擎能爬取到关键数据
无需占用客户端资源,解析模板交给后端工作，对于客户端的资源占用更少
缺点：
1、占用服务器资源，页面小小的改动，都需要请求一次完整的html页面
有悖于程序员的==“DRY(Don`t repeat yourself)”==原则
2、如果短时间访问过多的话，对服务器造成一定的访问压力，一些常见的api需要先对运行环境判断再使用
前后端分离：
优点:
1.前端专注于ui界面的开发，后端专注于api的开发
2.体验更好
缺点:
1.第一次响应内容较慢，不如服务端渲染快,会出现空白延迟：HTML下载时间 + JS下载/执行时间 + 请求时间 + 渲染时间；在这个时间内，会出现页面空白效果
2.不利于SEO优化，由于页面初始状态为空，因此爬虫无法获取页面中任何有效数据，对于SEO较差

axios二次封装

为什么要进行二次封装？

1，代码封装，重用性高，减少代码量，减低维护难度。
2，统一处理一些常规的问题一劳永逸，如http错误。
3，拦截请求和响应，提前对数据进行处理，如获取token，修改配置项。

方法

1.首先使用npm下载axios，
2.在main.js里引入axios
3.在src文件夹里创建http文件夹，在http文件夹里创建api.js

//对axios进行二次封装,将刚才下载好的axios导入进来
import axios from "axios";

//2. 利用axios对象的方法create,去创建一个axios实例
//requests就是axios,只不过稍微配置一下
const api = axios.create({
    //基础路径
    baseURL: '', // 所有请求的公共地址部分
    timeout: 3000 // 请求超时时间,这里的意思是当请求时间超过5秒还未取得结果时,提示用户请求超时
})
// 请求拦截处理 请求拦截 在请求拦截中可以补充请求相关的配置
// interceptors axios的拦截器对象
api.interceptors.request.use(config => {
    // config 请求的所有信息
    // console.log(config);
    // 响应成功的返回
    return config // 将配置完成的config对象返回出去 如果不返回 请求讲不会进行
}, err => {
    // 请求发生错误时的相关处理 抛出错误
    //  //响应失败的返回
    Promise.reject(err)
})
 
//响应拦截处理  响应拦截器：包含两个函数（一个是成功返回的函数，一个是失败的返回的函数）
api.interceptors.response.use(res => {
    // 我们一般在这里处理，请求成功后的错误状态码 例如状态码是500，404，403
    // res 是所有相应的信息
    console.log(res)
    return res.data
}, err => {
    // 服务器响应发生错误时的处理
    Promise.reject(err)
})
//最后一步 暴露出去实例导出
export default api

4.在http文件夹在创建一个 axios.js文件 用来封装请求接口

// // 引入 封装的api 
import api from './api.js';
 
//下面是简写的形式
// getXXX 自定义的接口名字
export const getXXX = () => api.get('/getXXX ');
// export const getXXX = (params) => api.get(`/apigb/v1/component`, { params})
// export const postXXX = (params) => api.post(`/apigb/v1/component/update-info`, params)
// // 下面是详细的写法
// export const xxxx = (params) => api({
//     url: '', // 请求地址
//     method: 'post', // 请求方式
//     // data: params, // (一般post请求，我们习惯使用 data属性来传参)
//     params: params //(一般get请求，我们习惯使用params属性来传参）
//     // 注意：data，和 params 两个属性传参使用，并不是固定的，也可以调换使用。
// })

5.最后就可以在组件中引入使用了

环境变量的配置

.env.test 测试环境配置（测试服）
.env.development 开发环境配置 （测试服）
.env.product 生产环境配置 （正式服）
配置环境变量
注意: 修改任一环境变量之后，需要重启服务器
配置开发环境（npm run serve）
在项目的根目录下创建一个文件： .env.development
在文件中添加我们要配置的变量：
  + 变量名结构： VUE_APP_XXX
  + 例如： VUE_APP_BASEURL=http:\localhost:3000
在要使用的位置获取：
process.env.VUE_APP_BASEURL

配置生产环境（npm run build）
在项目的根目录下创建一个文件： .env.production
在文件中添加我们要配置的变量：
  + 变量名结构： VUE_APP_XXX
  + 例如： VUE_APP_BASEURL=http:\localhost:3000
在要使用的位置获取：
process.env.VUE_APP_BASEURL