1.客户管理系统

1.1 项目背景：为了改进原有的系统，提升公司业务效率

（前端技术栈:Vue,Vue-Router,Vuex,Element-UI,Axios,Echarts)
个人角色：前端开发

1.2 难点：权限控制

解决方案：
我目前 vue 项目的权限控制都是通过 addRoutes来实现的。
因为按照需求每个页面的权限是动态配置的，而不是写死预设的。所以我在后台通过一个tree控件给每一个页面动态配置权限，之后将这份路由表存储到后端。

用户登录之后会返回一个权限凭证Token，用户在根据这个Token去问服务端询问自己的权限，辟如服务端返回权限是['finance']，前端再根据这个权限动态生成他能访问的路由，再通过addRoutes进行动态的路由挂载。

1.3 功能:

客户管理、客户公海池、商机管理、合同管理、财务管理、订单管理、产品管理、员工中心、数据管理等等。

1.4 其它：

1.不同的路由相同的组件处理，

我创建和编辑的页面使用的是同一个 component，默认情况下这两个页面切换时并不会触发 vue 的 created 或者 mounted 钩子，官方说你可以通过 watch $route 的变化来进行处理，但说真的还是蛮麻烦的。后来发现其实可以简单的在 router-view 上加上一个唯一的 key，来保证路由切换时都会重新渲染触发钩子了。这样简单的多了。

<router-view :key="key"></router-view>

computed: {
  key() {
    // 只要保证 key 唯一性就可以了，保证不同页面的 key 不相同
    return this.$route.fullPath
  }
 }

2.路由和侧边栏

本项目侧边栏和路由是绑定在一起的，所以我只要在 @/router/index.js 下面配置对应的路由，侧边栏就能动态的生成了。大大减轻了手动重复编辑侧边栏的工作量。

2.1配置

1.是否在侧边栏出现 hidden
2.在面包屑导航中是否可点击redirect
3.一直显示根路由，alwaysShow: true
4.name: 'router-name'

meta: {
  roles: ['admin', 'editor'] //设置该路由进入的权限，支持多个权限叠加
  title: 'title' //设置该路由在侧边栏和面包屑中展示的名字
  icon: 'svg-name' //设置该路由的图标
  noCache: true //如果设置为true，则不会被 <keep-alive> 缓存(默认 false)
  breadcrumb: false // 如果设置为false，则不会在breadcrumb面包屑中显示
}

2.2 侧边栏

通过读取路由并结合权限判断而动态生成的，而且还需要支持路由无限嵌套，所以这里还使用到了递归组件
当你一个路由下面的 children 声明的路由大于>1 个时，自动会变成嵌套的模式。如果子路由正好等于一个就会默认将子路由作为根路由显示在侧边栏中

2.3 点击侧边栏 刷新当前路由

如果不改变 current URL 就不会触发任何东西。我的方法是，通过不断改变 url 的 query 来触发 view 的变化。我们监听侧边栏每个 link 的 click 事件，每次点击都给 router push 一个不一样的 query 来确保会重新刷新 view。（当前时间戳）

2.4 面包屑导航

通过 watch $route 变化动态生成的

1.5 性能优化

A.生成打包报告，根据报告优化项目
B.第三方库启用CDN 在index.html中引用
使用externals设置排除项
C.Element-UI组件按需加载
D.路由懒加载 当路由被访问时才加载对应的路由文件

2.公司官网

2.1 项目背景

为了更好地宣传公司，将原有的pc端官网改成响应式的
（前端技术栈:jquery,swiper)

2.2 难点

多端适配
解决方案：

• 1.viewport的meta标签
• 2.用rem相对单位来作为适配终端的尺寸单位

pad和电脑端的设计稿是以1920px为标准的。那么：
100vw = 1920px
1vw = 19.2px
我们想要： 1rem = 100px（这样方便我们在写代码的时候换算）
那么:
100px = 100vw / 19.2 = 1rem
这时候，我们只要给html的根元素设置：
font-size:cacl(100vw / 19.2);
2.同理的，手机端我们设计稿是以750px为标准的，那么:
100vw = 750px
1vw = 7.5px
我们想要： 1rem = 100px
font-size:cacl(100vw / 7.5);

这样其他元素使用rem的时候只要根据设计稿的尺寸再/100就行了

• 3.媒体查询，根据不同的终端尺寸，匹配不同的样式
• 4.图片适配
  max-width：100%或者width：100%
  比如在合作伙伴模块的图片，如果不写max-width：100%或者width：100%，只能显示图片的一部分，不能显示完整的图片

width: 100%和max-width: 100%的区别
width: 100%是将所有指定元素的宽度 拉伸或收缩到和父元素的宽度一致，
而max-width: 100%则是如果指定元素的宽度不超过父元素的宽度，则大小不变，如果超过了父元素的宽度，则将宽度收缩为父元素的宽度。

• 5.在响应式布局的同时，部分模块使用百分比布局，适用于多个盒子并排的情况。

2.3 其它

1.首屏加载优化

为了避免用户第一次打开网页，由于加载资源导致有一段白屏时间的问题
加一个loading提示，提升用户体验

3.商标网

1.难点：vuex中存储的数据在页面刷新之后失去的问题

• 1.利用storage缓存来实现vuex数据的刷新问题
  在mutation等vuex的方法中对于数据进行改变时，将数据同时存储进我们的本地浏览器缓存中
  同步将数据的更改保存，也可以在页面调用vuex的mutation方法时同步更改；但是这种方法只能针对少量的数据需要保持不刷新，在真正的开发中并不适用
• 2.利用已有的插件来进行保存新状态
  已知的插件中，我目前使用的是vuex-along插件，该插件使用非常方便简洁。
  通过 cnpm i vuex-along -D下载插件，在进行引入，在store里面通过plugin来使用，这样就能将所有的state的数据都进行保存，不回因为刷新而更改

export default new Vuex.Store({
  modules: {
    app,
    others
  },
  plugins: [vuexAlong]
})