- 请先将
npm
的源切换至公司内网
npm config set registry http://nexus.kfang.com/npm/
- 安装脚手架
npm install kf-mobile-cli -g
- 执行以下命令
// 创建项目
kmc create xxx
- 脚手架的其他命令
kmc -V // 检查脚手架版本
kmc -C // 清除脚手架缓存
kmc create xxx -U // 先更新脚手架版本在创建项目
-
NODE_ENV
: 环境变量(目前只有development
和production
) -
VUE_APP_ENV_TYPE
: 环境类型,分别是test
(测试生产环境),development
(开发环境),production
(正式生产环境) -
VUE_APP_TEST_AK
: 测试环境中百度统计的 AK 值 -
VUE_APP_PRODUCTION_AK
: 正式生产环境中百度统计的 AK 值
为了在 vue
文件中,请求接口所返回的数据能够支持 ts
的类型校验,项目中 api 的目录结构如下:
|-- api
|-- delegation
|-- index.ts
|-- response.d.ts
例子:
// api/delegation/index.ts
import request from 'axios'
import { ResAgentPage } from './response'
const prefix = '/web-infra-marketing'
// 分页查询委托列表
export const queryAgentPage = (params: { id: string }): ResAgentPage =>
request({
url: prefix + '/sharing/landlordEntrust/queryAgentPage',
method: 'GET',
params,
})
// api/delegation/response.d.ts
import { AxiosPromise } from 'axios'
// WAIT_DIAL("待联系"), FINISH_DIAL("已联系"), WAIT_EXPAND("待拓房"), FINISH_EXPAND("已拓房"), FINISH_FAIL("拓房失败") OUT_OF_SCOPE("超出作业范围")
type EntrustStatus =
| 'WAIT_DIAL'
| 'FINISH_DIAL'
| 'WAIT_EXPAND'
| 'FINISH_EXPAND'
| 'FINISH_FAIL'
| 'OUT_OF_SCOPE'
export interface AgentPage {
gardenName: string // 小区名
entrustStatus: EntrustStatus // 委托状态
userPhone: string // 手机号码
channel: 'FRIENDS_CIRCLE' | 'FRIENDS' | 'IMAGES' | 'URL' // 访客来源 {FRIENDS_CIRCLE-朋友圈分享,FRIENDS-好友分享,IMAGES-图片分享,URL-url分享}
price: string // 期望价格
entrustType: 'SELL' | 'RENT' // 委托类型
layout: string // 户型
area: string // 面积
newEntrust: 'YES' | 'NO' // 是否新委托
buildingRoom: string // 楼栋房号
region: string //区域
userNickName: string // 用户昵称
id: string // id
userId: string // 用户id
entrustDate: string // 委托时间
}
export type ResAgentPage = AxiosPromise<ResType<PaginationType<AgentPage>>>
注意:
axios
默认会自动对异常的状态码进行 toast
,如果不需要提示,请在请求时将 noAlert
设置为 true
request({
url: prefix + '/sharing/landlordEntrust/queryAgentPage',
method: 'GET',
params,
noAlert: true,
})
路由元信息的配置参数:
declare type RouteMeta = {
transitionName?: string // 路由的过度动画如果不传默认是slide-fade
keepAlive?: boolean // 当前页面是否缓存
/**
* 不需要路由拦截的校验的页面,请将该属性设置为 true
* 应用场景:
* 1. 对于只在h5平台运行时,login 登录页不需要对其校验,因此要将其 router meta 设置为 independent: true
* 2. 对于可以内嵌在app中运行,某些页面又支持在非 app 中的 webview 访问,这时也要将该页面的 router meta设置为 independent: true
*
*/
independent?: boolean
}
路由对象的配置结构如下:
{
path: '/exampleHome',
name: 'ExampleHome',
component: () =>
import(/* webpackChunkName: "home" */ '../views/example/home.vue'),
meta: {
keepAlive: true,
},
},
注意:
由于 vue
本身 keepAlive
的限制,这里的 name
必须和 ../views/example/home.vue
组件的 name
属性保持一致
- 声明
-
state 的声明尽量使用函数的形式,便于以后多个 store 访问同一个 module,而导致的数据污染 参考
-
在声明一个 module 后请在 typings/state-type.ts 中的 RootState,填写相应的模块对应的类型
-
最后在 modules.ts 中引入该模块
- 使用
- 由于 vuex 原生的 useStore 只能支持 state 的校验,而 commit,dispatch, getter 无法获取提示和校验,因此优先使用本项目自定义的 useStore
base-scroll
基于better-scroll
封装的移动端滚动组件,支持上拉加载更多和下拉刷新,使用方法见src/views/example/home.vue
- 由于
vant
不支持loading
组件已指令的形式调用,因此该项目提供一个v-loading
的指令,支持全屏 loading 和局部 loading,,使用方法见src/views/example/detail.vue
-
useLoadMore
该
hook
集成了上拉加载更多和下拉刷新的业务处理逻辑,我们只需要将绑定的数组的类型以泛型的方式传入,并将请求接口的方法和调用方法的参数传入即可。使用方法见src/views/example/home.vue
-
useNativeStorage
该
hook
集成了原生端存储的功能eg:
const { setDataToNative, getDataFromNative } = useNativeStorage()
-
useNavigation
该
hook
集成了路由导航的全部功能,如果使用的页面是集成在 App 中,且这个页面有可能是 App 访问 H5 的入口页,这时点击返回的时候应该调用原生的回退,这时请在 onMounted 生命周期中调用saveFirstRecord
方法
本项目提供一个全局的 mixin
用于权限的校验。
eg:
<li v-if="checkPermissionMixin(item.permissionCode)"></li>
关于vant
主题设置,请在src/styles/vant-theme.scss
中设置