本篇笔记针对快速搭建前端项目，以及对项目结构的一些说明，不涉及业务如何实现等具体细节。适用于有接触过前端但是不太清楚纯前端开发的流程，框架之类的同学，以及后端刚接触前端框架的同学。
执行下面命令安装@vue/cli
创建最基础的项目
无论是从图像化或者是命令行创建都是一样的，可选择通用项目架构模板，也可以根据自己的需要加入各种模块依赖。我这里创建的基本项目包含了
创建完了如果需要加入新的依赖可以直接通过图形化添加，或者在命令行 npm install xxx新增。
项目基础模块如下图：
关闭eslint校验功能
但是个人不建议关闭，这个虽然有点烦，但是可以让代码更加规范。
设置src别名
这样就可以用@来代替src的目录，可以这样定位资源了，告别烦人的../../了。
之前创建项目的时候选择了vue-router,则创建出来的项目就已经整合了vue-router模块，直接使用，无需配置
之前没有或忘记配置了，可以根据以下步骤安装路由
跳转方式
$router：编程式导航
如果需要params在url中展示，则需要在路由上面编写占位符，如：
这样路由跳转的地址为 xxx/about/123
全局404路由配置
通过通配符匹配设置404页面统一跳转。
Props
在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。
使用 props 将组件和路由解耦的三种方式：
meta
路由元数据，可以通过$route获取到各个路由的meta信息
跳转到该页面后
当页面访问到的时候才加载，懒加载路由配置
把组件位置写成动态Import即可---()=>import()
其中中间的单行注释是webpackChunkName是按组分块，Webpack会将任何一个异步模块与相同的块名称组合到相同的异步块中。
不断跳转url地址不变的路由，会报Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location异常。
页面代码：（自己跳转自己）
解决：
不影响使用，无视即可
push的时候传入成功和中止的回调
底层修改（增强push方法）
安装
直接使用
二次封装
简单的使用请求拦截器和响应拦截器对axios封装的例子：
使用：
API接口统一管理
在大型前端项目中，接口复用情况可能比较多，所以需要对接口进行统一管理；
举个栗子：
页面调用接口：
代理（devServer）
添加完配置后，重启服务npm run serve即可。
当众多组件之间都共用同一公共数据(共享同一状态)时，可以用vuex把状态存起来，方便组件之间调用。如权限控制中Role角色很多页面的组件都会使用到，就可以将他用vuex存储起来，供其他组件使用，某一组件将其状态改变，其他用到这个role的值都会同步更新（共享状态）。
例子：
效果
PS：上面的vue-router、axios、vuex等可以在项目初始化的时候直接选择需要的依赖，在初始化完毕后，已经配置好了，直接使用即可。
防抖
节流
节流和防抖都可以通过引入lodash来实现，也可以自己写js实现(闭包+延时器)