VUE - TS

ts - vue 配置

shims-tsx.d.ts 中 Window 属性声明 appData/wx
util/base输出使用 Vue.prototype.function
util/filters 无法全局注册·单文件注册使用
$refs使用

vuex

https://juejin.im/entry/5a373...
https://juejin.im/post/5c46c6...
vuex-class
import { State, Action, Getter } from 'vuex-class';

vue-router

$router / $route / util/base方法 需要声明才能使用(在ts中)

declare module 'vue/types/vue' {
  interface Vue {
    $router: VueRouter;
    $route: Route;
    checkLink: any;
    toRouter: any;
  }
}

路由守卫使用 Component.registerHooks(['beforeRouteEnter', 'beforeRouteLeave', 'beforeRouteUpdate']);

滚动行为
router - scrollBehavior(to, from, savePosition)

axios·二次封装·catch·拦截器

request.ts - catch(res => processResponseError(res.response))

vue-property-decorator·装饰器写法

action/mutation 抽离

模块下的mutation使用 store.commit('UploadImage/uploadPicture'); - "modules文件名/mutation方法名"

选手列表·实现逻辑(价值)

打包出来的文件 - vue-cli

<link href=https://cdn.myfans.cc/new-vote/css/app.5f255f15.css rel=preload as=style>
<link href=https://cdn.myfans.cc/new-vote/css/chunk-vendors.282efb41.css rel=preload as=style>
<link href=https://cdn.myfans.cc/new-vote/js/app.988f2c80.js rel=preload as=script>
<link href=https://cdn.myfans.cc/new-vote/js/chunk-vendors.3eeeb0f7.js rel=preload as=script>


app.css - 本项目的公用css
chunk-vendors.css - 引入ui框架的公用css

app.js - 模块化开发/通过路由来判断何时引入并使用相应页面的模块打包文件和样式
chunk-vendors - 依赖js

分包加载-vant · css打包 · vue-cli3.0配置

相关推荐