一段实习

项目结构

vue cli配置

• vue cli 2

  • /build cli内置webpack配置代码
  • /config 项目开发环境配置
    • dev.env.js 开发环境变量
    • index.js 可自定义的webpack配置
    • prod.env.js 生产环境变量

• vue cli 3

  • vue.config.js
    1. 前身为config/index.js，但改文件通过判断process.env值设置不同环境配置
    2. 环境变量配置在根目录的.env.mode文件中配置

Vuex 更规范的使用

1. 独立store的state，getters，mutations，actions属性为独立文件
2. 不直接访问state，而是通过getters中get开头的方法访问
3. vuex-persistedstate插件让vuex数据持久化，支持指定持久化的state，使用storage或者cookie

ant-design全局方法

1. import {…按需引入组件} from ‘ant-design-vue’
2. Vue.use(‘组件’).(‘组件’)…
3. Vue.prototype.$error = Modal.error(…)…，添加全局方法

i18n国际化

1. /locales/index.js引入en/zh.json数据，作为插件Vue.use
2. new VueI8n实例并导出
3. .vue文件使用$t(‘key’, {具名: 值})使用国际化文本
4. router中直接使用i18n.t访问或者借助meta保存国际化key值

git版本管理

• git checkout -b 新建分支名
• git checkout -d 删除分支名
• Pull Request 提交pr
• Approve and merge 合并至主分支
• git stash / git stash pop 栈入栈出

CMS页面优化

• 问题：
  1. swiper绑定大量数据
  2. 后台返回列表数据过大
• 解决
  1. 根据日期，动态控制swiper绑定的数据
  2. 滚动添加绑定数据，元素开销与img请求减少压力

vue数据传递

• v-model双向绑定

  • 父组件声明双向绑定prop，子组件接受指定prop并指定双向事件
  • 父子prop同名，父子间model绑定值唯一

• $attrs / $listeners

  • 访问当前组件的所有attr和监听事件
  • 可用于跨层处理

• prop.sync / $emit(prop:update)

  • 父子组件的prop自动同步
  • 不要求同名称，且允许同步多个prop

创建虚拟dom

• vm.$createElement(tag, attrOptions, childElementsArr)
• Vue实例方法创建虚拟DOM，作为ant-design的属性的参数传入

vue动画

• .v-enter, .v-enter-active, .v-enter-to, v-leave, .v-leave-active, .v-leave-to
• fixed + transiton + transform 实现组件切换动画
• 配合Router beforeEach钩子动态设置不同路由页面的进入/退出动画

request请求封装

• request/api.js包含axios的拦截器配置，4个请求方法导出（host从process.env.变量设置）并赋予Vue类上
• request/address.js包含所有请求接口路径值，赋予到Vue类上
• .vue文件中请求时调用全局请求方法get/post..，将对应$address值作为参调用请求方法

• Previous
  webpack配置
• Next
  chrome devtool 调试工具