Vue CLI 插件
这是宁皓网内部项目使用的一个 Vue CLI 插件，在使用了 TypeScript 的 Vue 项目里，可以用命令生成应用需要的组件与 store 模块。
安装
在终端，项目所在目录的下面，使用 npm install 或 yarn add 安装 vue-cli-plugin-nid 这个包。
yarn add vue-cli-plugin-nid —D
然后执行：
vue invoke vue-cli-plugin-nid
上面这个命令只需要执行一次，它会在项目的 package.json 文件的 scripts 里面添加几个自定义的命令，使用 npm run 可以运行这些命令。
{
...
"scripts": {
...
"gc": "vue invoke vue-cli-plugin-nid --component",
"generate:component": "vue invoke vue-cli-plugin-nid --component",
...
},
...
}
命令都有一个简化版，比如 generate:component 命令的简化版是 gc，运行这个命令可以执行 npm run gc，后面是一些选项与对应的值，这些东西都可以放在两个小横线的后面，比如 npm run gc -- comment-index。
组件
生成的组件可以使用 generate:component 或 gc 命令。
示例：
`npm run generate:component -- comment-index`
上面命令会生成一个 comment-index 组件，还有组件对应的样式表，生成的组件默认会放在 src/comment/index 目录的下面。
src/comment
└── index
├── comment-index.vue
└── styles
└── comment-index.css
命令选项
- path：指定组件位置
- parent：指定组件的父组件
- vuex：指定组件内用的 vuex 帮手方法
指定具体位置
执行生成组件命令时可以用 path 选项指定这个组件的具体存放的位置。
示例：
`npm run generate:component -- comment-list --path comment/index/components`
上面这个命令会创建一个组件，位置是 src/comment/index/components/comment-list.vue。
导入 Vuex 帮手
要在生成的组件里使用 vuex 提供的帮手，可以通过 vuex 选项指定具体需要的帮手方法，如果不特别设置具体的方法，就会在组件里导入使用 vuex 提供的 mapGetters, mapMutations, mapActions 这几个帮手方法。
示例：
npm run generate:component -- comment-list \
--path comment/index/components \
--vuex mapGetters,mapActions
这会在生成的组件里导入 mapGetters 与 mapActions。
import { mapGetters, mapActions } from 'vuex';
或者也可以不具体设置需要的帮手方法：
npm run generate:component -- comment-list \
--path comment/index/components \
--vuex
指定父组件
生成组件的时候你可以设置这个组件的父组件，这样命令会找到这个父组件，在它里面导入使用新生成的这个组件。
示例：
npm run generate:component -- comment-list \
--path comment/index/components \
--parent comment-index
上面这个命令会生成一个 comment-list 组件，然后在 comment-index 组件里导入使用了这个新生成的组件。这个 parent 选项的值可以直接使用父组件的名字，或者也可以加上具体的位置，比如 comment/index/comment-index。
src/comment/index/comment-index.vue
<template>
<div class="comment-index">
<CommentList />
...
</div>
</template>
<script>
...
import CommentList from '@/comment/index/components/comment-list';
export default defineComponent({
name: 'CommentIndex',
...
/**
* 使用组件
*/
components: {
CommentList,
},
});
</script>
...
Store
使用 generate:store 或 gs 命令可以生成需要的 store 模块。
示例：
`npm run generate:store -- comment`
上面命令会生成一个 store 模块，位置是 comment/comment.store.ts。
命令选项
- parent：指定父 store 模块
- module：在父 store 模块里注册的名字
- action：添加动作
- method：在动作里请求接口用的方法
- api：在动作里请求的接口
- resource：指定动作请求的资源
指定父模块
生成 store 模块的时候可以用 parent 选项设置父模块，另外可以配合 module 选项设置在父 store 模块那里注册的名字。
示例：
npm run generate:store -- comment-create \
--parent comment/comment \
--module create
上面命令会生成一个 store 模块，位置是 comment/create/comment-create.store。在 comment/comment.store.ts 里面会导入这个新生成的模块，并且在 modules 选项会用 create 这个命令注册这个新生成的 store 模块。
src/comment/comment.store.ts
...
import {
CommentCreateStoreState,
commentCreateStoreModule,
} from '@/comment/create/comment-create.store';
export interface CommentStoreState {
create: CommentCreateStoreState;
...
}
export const commentStoreModule: Module<CommentStoreState, RootState> = {
...
/**
* 模块
*/
modules: {
create: commentCreateStoreModule,
},
};
添加动作
在生成 store 模块的时候，可以使用 action 选项在 store 模块里添加一个请求接口时需要用的动作。
示例：
`npm run generate:store -- comment-index --action getComments`
添加的动作有个默认的参数叫 options，执行命令时可以用 actionParam 选项设置动作参数的名字，还可以用 method 选项设置请求接口用的方法，用 api 选项设置要请求的接口地址。
示例：
npm run generate:store -- comment-create \
--action createComment \
--method post \
--api comments
src/comment/create/comment-create.store.ts
...
export interface CreateCommentOptions {
data?: null;
}
export const commentCreateStoreModule: Module<CommentCreateStoreState, RootState> = {
...
/**
* 动作
*/
actions: {
async createComment({ commit }, options: CreateCommentOptions = {}) {
commit('setLoading', true);
try {
const response = await apiHttpClient.post(`comments`);
commit('setLoading', false);
return response;
} catch (error) {
...
}
},
},
};
添加资源
用 resource 选项可以设置动作请求回来的资源，这样会在 store 的 state、getters 与 mutations 里添加对应的东西。
示例：
npm run generate:store -- comment-index \
--action getComments \
--resource comments:Array:CommentListItem
resource 选项的值分成了三部分，中间用冒号分隔开，第一部分是资源的名字，第二部分说明这个资源是 Array，第三部分是数据项目的类型。
动作预处理
如果 store 里的动作比较复杂，可以将其分成预处理（preProcess）与后处理（postProcess），就是在执行这个动作之前可以派发一个预处理动作，请求完成以后可以派发一个后处理动作。在命令里使用 pre 与 post 选项可以添加动作的预处理与后处理。
示例：
npm run generate:store -- comment-index \
--action getComments \
--resource comments:Array:CommentListItem \
--pre --post
src/comment/index/comment-index.store.ts
...
export const commentIndexStoreModule: Module<CommentIndexStoreState, RootState> = {
/**
* 动作
*/
actions: {
async getComments({ commit, dispatch }, options: GetCommentsOptions = {}) {
dispatch('getCommentsPreProcess', options);
try {
const response = await apiHttpClient.get(`resources`);
dispatch('getCommentsPostProcess', response);
return response;
} catch (error) {
...
}
},
async getCommentsPreProcess({ commit }, options: GetCommentsOptions = {}) {
commit('setLoading', true);
},
async getCommentsPostProcess({ commit }, response) {
commit('setLoading', false);
commit('setComments', response.data);
},
},
};
添加 State
在已经存在的 store 模块里，可以用 gss 命令添加数据，命令会自动添加数据以及数据的获取器还有修改器。
示例：
`npm run gss ``--`` totalPages``:number``:1`` ``--``to comment-index`
上面这个命令会在 comment-index 这个 store 模块里添加一个数据，名字叫 totalPages，类型是 number，默认值是 1。
src/comment/index/comment-index.store.ts
...
export interface CommentIndexStoreState {
totalPages: number;
...
}
...
export const commentIndexStoreModule: Module<...> = {
...
/**
* 数据
*/
state: {
totalPages: 1,
...
} as CommentIndexStoreState,
/**
* 获取器
*/
getters: {
totalPages(state) {
return state.totalPages;
},
...
},
/**
* 修改器
*/
mutations: {
setTotalPages(state, data) {
state.totalPages = data;
},
...
},
...
};
导入
使用命令快速导入组件与要使用的 vuex 帮手方法。
导入组件
在组件里导入使用其它的组件有几个步骤，首先要导入组件，然后在组件的 components 里注册导入的组件，最后要在组件模板里使用导入并注册的组件。
使用 import:component 或者 ic 命令，可以在组件里导入使用其它的组件，如果需要导入多个组件，中间用逗号分隔开。然后用 to 选项设置目标组件。
示例：
`npm run import:component -- user-avatar,user-name --to comment-create`
上面这个命令可以在 comment-create 这个组件里导入使用项目里的 UserAvatar 与 UserName 组件，命令会自动在项目里查找这些组件，所以不需要设置要导入的这些组件的具体路径。
导入 Vuex
使用 import:vuex 或 iv 命令，可以在组件里导入使用 vuex 的帮手方法，用 to 这个选项设置目标组件。帮手方法的名字也可以使用简写形式，比如 ms, mg, ma, mm，分别对应的是 mapState，mapGetters，mapActions 还有 mapMutations。
示例：
`npm run import:vuex -- mapGetters,mapActions --to comment-create`
上面命令会在项目的 comment-create 组件里导入 vuex 里的 mapGetters 与 mapActions 这两个帮手方法。