vue-scaff

开发指南

1. 文件提取

vue-scaff 拥有全局文件提取的能力，给予开发者无配置化的开发体验。

TIP

以默认配置为例

// 配置示例
module.exports = {
  // 工具类
  util: "/utils/*.js",
  // 数据过滤
  filter: "/filters/*.js",
  // 自定义指令
  directive: "/directives/*.js",
  // 路由
  route: "/pages/**/route.js",
  // 状态管理
  store: "/pages/**/store.js",
  // 自定义组件
  component: "/components/**/*.vue",
  // 样式变量
  style: "/styles/*.less",
  // 国际化
  i18n: "/i18n/*.js"
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

1.1 工具类

  • 路径规则：/utils/*.js

  • 编码示例

示例文件位置：/utils/plus.js

export default (a, b) => {
  return a + b;
};
1
2
3
  • 使用示例
this.$util.plus(10, 20); // 30
1

1.2 全局组件

  • 路径规则：/components/*.vue

  • 使用示例

<template>
  <sample />
</template>
1
2
3

1.3 路由

更多路由说明open in new window

  • 路径规则：/pages/**/route.js

  • 编码示例

示例文件位置：/pages/sample/route.js

export default () => {
  return {
    path: "/sample",
    name: "sample",
    component: () => import("@/pages/sample/index.vue")
  };
};
1
2
3
4
5
6
7

1.4 状态管理

更多状态管理说明open in new window

  • 路径规则：/pages/**/store.js

  • 编码示例

示例文件位置：/pages/sample/store.js

export default () => {
  const state = {
    name: "default name"
  };

  const mutations = {
    NAME_UPDATE(state, data) {
      state.name = data;
    }
  };

  const actions = {
    async WHO_AM_I(context, param) {
      context.commit("NAME_UPDATE", param);
    }
  };

  return { state, mutations, actions };
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
  • 使用示例
export default {
  async created() {
    // 执行 Action
    await this.$store.dispatch("sample/WHO_AM_I", "Trump");
    // 打印 State
    this.$store.state.sample.name;
  }
};
1
2
3
4
5
6
7
8
  • 高阶使用

TIP

如在全局注册中设值 mixin 为 true，则可使用 mapState 功能

  • 在 mixin 中使用 mapState

示例文件位置：/registry/mixin.js

import { mapState } from "vuex";

const storeMapping = mapState({
  sample: ({ sample }) => sample
});

export default {
  computed: {
    ...storeMapping
  }
};
1
2
3
4
5
6
7
8
9
10
11
  • 状态使用
export default {
  async created() {
    this.sample.name;
  }
};
1
2
3
4
5

1.5 数据过滤

TIP

Vue 3.x 中，过滤器功能不再支持。具体说明open in new window

  • 路径规则：/filters/*.js

  • 编码示例

示例文件位置：/filters/dollar.js

export default value => {
  return `$${value}`;
};
1
2
3
  • 使用示例
<template>
  <div>{{ $filter.dollar(100) }}</div>
</template>
1
2
3

1.6 自定义指令

更多自定义指令说明open in new window

  • 路径规则：/directives/*.js

  • 编码示例

示例文件位置：/directives/position.js

export default (el, binding) => {
  el.style.position = "fixed";
  el.style[binding.arg || "top"] = `${binding.value}px`;
};
1
2
3
4
  • 使用示例
<template>
  <div v-position="top">position</div>
</template>
1
2
3

1.7 国际化

更多国际化说明open in new window

  • 路径规则：/i18n/*.js

  • 配置示例

示例文件位置：/i18n/zh-CN.js

export default () => {
  return {
    hello: "您好, {msg}!"
  };
};
1
2
3
4
5
  • 使用示例
<template>
  <div>{{ $t("hello", { msg: "世界" }) }}</div>
</template>
1
2
3

1.8 自定义属性

  • 路径规则示例：/custom/*.js

  • 配置示例

示例文件位置：/custom/say.js

export default message => console.log(`I say: ${message}`);
1
  • 使用示例
this.custom.say("hello");
1

2. 对象拓展

vue-scaff 提取的文件，会转化成对象并注入全局，可在 main.js 中对其做拓展操作。

每个对象均会挂载一个 `proxy`：

  1. {object}.proxy.config: 可于对象实例化前对默认配置做拓展，如：route、store 等；
  2. {object}.proxy.extension: 可对实例化后的对象，于 app.use 前做拓展操作；

另：

{object}.get: 返回原始文件中的代码内容

以下示例文件位置：/main.js

2.1 内置对象示例

  • vue-scaff 内置对象及调用方式
export default ({ app, util, route, store, component, style, i18n, $http }) => {
  // do something
};
1
2
3

2.2 组件库引入

  • 代码示例：使用 antd-design-vue 组建库
import * as Antv from "ant-design-vue";

export default ({ app }) => {
  app.use(Antv);
};
1
2
3
4
5

2.3 路由模式

  • 代码示例：通过 proxy.config 修改路由模式
route.proxy.config = routes => {
  return {
    mode: "history",
    base: "/path/to/project"
  };
};
1
2
3
4
5
6

2.4 路由拦截

  • 代码示例：前置路由拦截
route.proxy.extension = $route => {
  $route.beforeEach((to, from, next) => {
    next();
  });
};
1
2
3
4
5

2.5 状态管理

  • 代码示例：使用 vuex-orm 作为数仓管理
import VuexORM from "@vuex-orm/core";

export default ({ store }) => {
  const database = new VuexORM.Database();

  return {
    plugins: [VuexORM.install(database)]
  };
};
1
2
3
4
5
6
7
8
9

2.6 特殊：请求拦截

  • 代码示例：添加全局参数 token
export default ({ $http }) => {
  // 请求拦截器
  $http.interceptor.request = (data, { headers }) => {
    headers.token = "scaff";
    return { data, headers };
  };

  // 响应拦截器
  $http.interceptor.response = ({ data, status }, { headers }) => {
    if (status === "0") {
      data.error = true;
    }
    return data;
  };

  // 报错拦截器
  $http.interceptor.error = e => {
    return $console.error(e);
  };
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

3. 编码提效

vue-scaff 总结了一些便捷的编码提效经验，只为更优秀的你，供参考

3.1 便捷的 Store 操作

  • 声明 store
export default () => {
  const state = {
    nickname: "scaff"
  };

  const mutations = {};

  const actions = {
    UPDATE_INFO({ commit }, nickname) {
      return {
        nickname
      };
    }
  };

  return { state, mutations, actions };
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
  • 使用 action 并更新数据到 state
this.$store.dispatch(UPDATE_INFO, "Linkedcare");
this.$store.state.nickname; // Linkedcare
1
2

关于 `vue-scaff` 中 Vuex 的优化说明

vue-scaff 集成了 vuex-fast，大大简化了传统 vuex 的操作流程，即： 当 action 被调用时，会将函数中所 return 的数据，依据其结构自动匹配并更新到 state 中。

3.2 在 Action 中发送请求

export default ({ $http, $api }) => {
  const actions = {
    async UPDATE_INFO() {
      return await $http($api.getCustomNickname).get();
    }
  };
};
1
2
3
4
5
6
7

关于 `$api` 的配置

  1. vue-scaff 内置 API 清单配置，默认文件是 @/registry/api
  2. api 文件中，函数第一个入参为 @/registry/host 中所 export 的结果
Last Updated: 2021/11/8 08:49:53
Contributors: Joenix, joenix, joenix