项目模版封装优化及管理（vant,element,antdV,小程序）
1.模板管理
1.1 yeoman-environment插件
基于yeoman-generator 、yeoman-environment插件，将各类基础模板（vant、antdV、element、eapp）等做成基础模版，并可将该模版上传至npm进行管理。
参考链接：https://www.npmjs.com/package/generator-yo-template
2.模板生成
2.1 平台创建项目（前置条件--未完成）
通过平台，录入项目信息，通过接口在git创建对应的git项目，并初始化生成init.js文件
2.2创建模版
执行指令
node init.js
2.3自动生成模板
3.模板介绍（antdV 版本）
3.1目录结构
├─assets # 静态资源
│ └─img
├─components # 组件库
│ └─global # 全局组件 <放入后不需要注册也不需要引入>
├─decorator # 装饰器
├─filter # 过滤器
├─http # 网络请求
├─layouts # layout文件
├─plugins # 插件库 如需要引入第三方组件等 <推荐使用cdn>
├─router # 路由
├─store # vuex
│ └─modules # vuex 模块
├─style # 样式
│ ├─css # css 文件
│ └─auto.css # css 生成器自动生成（css-generator-plugin）
├─utils # 工具库目录
└─views # 页面文件
└─login # 登陆逻辑处理
3.2 components组件库
存放组件库的目录。
components/global目录，主要存放全局通用组件，如loading，button，modal等
PS:其中globalcomponent.js会将该目录下所有.vue文件自动注册挂载到Vue上
3.3 decorator装饰器
3.3.1什么是装饰器
Decorator 是 ES7 的一个新语法，正如其“装饰器”的叫法所表达的，他可以对一些对象进行装饰包装然后返回一个 被包装过的对象，可以装饰的对象包括：类，属性，方法等
3.3.2为什么使用装饰器
适合用来做基础库的语法糖，用来简化上层代码 - 对重复工作量大的业务进行修饰，方便维护且代码简洁
3.3.2装饰器的原理是什么
Object.defineProperty()
3.3.4 如何使用装饰器
<div @click="deleteConfirm">删除</div>
//未使用装饰器的做法
methods: {
deleteConfirm () {
this.$confirm({
title: '确认删除该条信息吗',
okText: '确认',
cancelText: '取消',
onOk () {
this.deleteApi()
}
})
},
async deleteApi () {
await this.$apis.deleteConfirm()
}
}
//使用装饰器的做法
methods: {
@confirm('确认删除该条信息吗')
async deleteApi () {
await this.$apis.deleteConfirm()
}
}
3.3.5 如何实现装饰器
decorator/index.js
/**
* 提示装饰器
* @param {String | Object} message 需要提示用户的信息 或者 confirm 的配置
* @param {Function} errorFn 请求异常的回调 返回this 使用function 则为你绑定
*/
export function confirm (message, errorFn) {
const defaultConf = {
// primary ghost dashed danger link
okType: 'danger',
maskClosable: false
}
return function (target, name, descriptor) {
const oldFn = descriptor.value
descriptor.value = function (...args) {
Modal.confirm(Object.assign(
defaultConf,
isString(message) ? { title: message } : message, // if use string then create Object else use Object to assign
{
onOk: () => oldFn.apply(this, args),
onCancel: () => {
// 无论如何都提示
globalWarn(`用户点击了取消:${name}`)
if (errorFn) {
errorFn.call(this, this)
}
}
}
))
}
}
}
3.3.6 装饰器适合哪些需求
目前团队内已使用的场景主要为：confirm，loading，log，debounceFn，throttleFn
3.4 dicts字典
// 默认提供的方法
/**
* 字典
* @example
// 根据字典名，获取list(多用于下拉框)，如[{key:1,name:'类型1'},{key:2,name:'类型2'}]
* dict.getDictList('user')
// 根据字典名，获取对象，如{ 1: '内置类型1', 2: '内置类型2' }
* dict.getDictObj('user')
// 根据字典名和key，获取value
* dict.getDictItem('user',2))
*/
// 字典对象
const dicts = {
taskType: { 1: '内置类型1', 2: '内置类型2' }
}
3.5 filter过滤器
不改变原始数据的前提下，修改数据的展现形式
import Vue from 'vue'
/* 格式化金额 */
export const moneyFormat = (money) => {
return money ? `${(money / 100).toFixed(2)}` : ''
}
Vue.filter('moneyFormat', moneyFormat)
// html
<span>{{data.money | moneyFormat}}</span>
3.6 http
3.6.1 拦截器封装
// 请求头处理
// 1.一般为token、header等请求头统一处理
http.interceptors.request.use(
config => {
const token = session.getSession('token')
if (token) config.headers.token = token.replace(/"/g, '')
return config
},
error => {
throw new Error(JSON.stringify(error))
}
)
// 响应头处理
// 1.正常接口等统一处理
// 2.登陆权限拦截统一处理
// 3.指定错误逻辑统一处理
// 4.其他错误的统一处理
http.interceptors.response.use(
response => {
const res = response.data
if (!res.success) { // 逻辑错误 自定义错误码
if (res.errorMsg) {
ErrorMessage(res.errorMsg)
}
globalError('接口调用失败')
switch (res.errorCode) {
case 401:
case 403:
case 405:
case '-3':
session.destroy('token')
router.push({ name: 'login', query: { from: window.this.$route.name, params: window.this.$route.query } })
break
default:
break
}
throw new Error(JSON.stringify(res))
}
return res.result
},
error => {
// http error
globalError(new Date(), 'err' + error) // for debug reject
ErrorMessage(ERROR_MSG[error?.response?.status] || `连接出错(${error.response.status})!`) // 消抖
throw new Error(JSON.stringify(error))
}
)
3.6.2 get、post等方式封装
ps:通过高阶函数封装，api.js内不需要维护入参
// get 方法 也调用一次 toJSON
export const get = url => {
return (params = {}) => {
return new Promise((resolve, reject) => {
http.get(url, { params: JSONClone(params), paramsSerializer: x => Qs.stringify(x, { arrayFormat: 'repeat' }) })
.then(resolve)
.catch(reject)
})
}
}
// post JSON 默认调用 toJSON
export const post = url => {
return (data = {}) => {
return new Promise((resolve, reject) => {
http.post(url, data)
.then(resolve)
.catch(reject)
})
}
}
// post 表单 手动 toJSON
export const form = url => {
return (data = {}) => {
return new Promise((resolve, reject) => {
// 达到和直接post json 一样的效果 先调用 toJSON
http.post(url, Qs.stringify(JSONClone(data), { arrayFormat: 'repeat' }))
.then(resolve)
.catch(reject)
})
}
}
// temp post 但是拼接URL 临时使用
export const temp = url => {
return (params = {}) => {
return new Promise((resolve, reject) => {
http.post(url, {}, { params })
.then(resolve)
.catch(reject)
})
}
}
3.6.3 apis.js统一管理
// apis.js
import {
get,
post,
binary, // post 上传文件 (二进制文件)
form, // post 表单
temp, // 临时post 拼接URL
put, // 上传文件
download // 下载文件
} from '@/http/request'
export default {
/* demo -- start */
// 调用方式1（推荐使用） this.$apis.demoGet({id: 1, sex: 2})
demoGet: get('/isDemo/getApi'),
demoPost: post('isDemo/postApi'),
demoBinary: binary('isDemo/binaryApi'),
demoForm: form('isDemo/formApi'),
demoTemp: temp('isDemo/tempApi'),
demoPut: put('isDemo/tempApi'),
demoDownload: download('isDemo/tempApi')
/* demo -- end */
}
// main.js
Vue.prototype.$apis = apis
3.7 layouts布局管理和router路由管理
设立思路：将布局和页面逻辑进行解耦。由page控制页面逻辑，layout控制布局类型
3.7.1 managerLayout
管理平台布局，可用于嵌套各类管理平台页面
3.7.2 baseLayout
基础布局，可用于登陆、无权限、临时性的移动端页面等
PS:如管理平台某个详情页 通过OA推送后，希望用户可以在钉钉侧边栏打开看到详情页面
3.7.3 router.js
// router.js
{ // base 下没有任何 外部layout
path: '/base',
name: 'base',
redirect: { name: 'base_home' },
component: baseLayout,
children: [
{
path: 'depDetailCharts',
name: 'base_depDetailCharts',
component: () => import('@/pages/depDetailCharts'),
meta: { title: '三级部门日志图表', breadcrumb: [{ name: 'base_home', title: '日志统计' }, { name: 'base_depLogCharts', title: '部门日志图表' }] }
}
]
},
{ // manager 下 有默认layout
path: '/manager',
name: 'manager',
redirect: { name: 'manager_home' },
component: managerLayout,
children: [
{
path: 'depDetailCharts',
name: 'manager_depDetailCharts',
component: () => import('@/pages/depDetailCharts'),
meta: { title: '三级部门日志图表', breadcrumb: [{ name: 'manager_home', title: '日志统计' }, { name: 'manager_depLogCharts', title: '部门日志图表' }] }
}
]
}
// 不同layout的页面间交互跳转
// 通过this.$route.matched[0].name 获取当前layout类型
this.$router.push({ name: `${this.$route.matched[0].name}_depDetailCharts`, query: { }})
3.8 pages
尽量login.vue来管理登陆，并推荐做一个模拟登陆
3.9 store
vuex管理
3.10 style
3.10.1 css-generator-plugin
通过正则匹配所有.vue文件，根据固有规则的class，自动生成样式代码
参考链接：https://www.npmjs.com/package/css-generator-plugin
4. webpack配置（模板优化）
4.1 将静态资源通过CDN引入的形式（css固定CDN引入，js仅打包时通过CDN引入（本地照常））
参考链接：https://www.npmjs.com/package/import-assets-from-cdn
4.1.1使用方式
4.1.2 实际效果
4.2 配置打包版本/环境/时间（控制台打印）
4.2.1 使用方式
参考链接：https://www.npmjs.com/package/log-info-webpack-plugin
4.2.2 实际效果：显示当前环境，打包时间等信息，便于排查快速定位问题
4.3 开启分析打包日志
PS:打包后展示各个包的依赖关系及大小，可用来分析优化
建议调试时，选择性开启，请勿提交，请勿常开
// 安装依赖
npm install webpack-bundle-analyzer -D
// 以下是打包依赖分析 push 请关闭 请只在本地使用
config
.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
.end()
4.3.1 CDN优化前效果图
4.3.2 CDN优化后效果图
4.4 去除console.log
config.optimization.minimizer('terser').tap((args) => {
args[0].terserOptions.compress.drop_console = true // 移除 console.log
return args
})
4.5 本地代理
devServer: {
// host: "localhost",
port: 8080, // 端口号
https: false, // https:{type:Boolean}
open: false, // 配置自动启动浏览器
disableHostCheck: true, // 解决127.0.0.1指向其他域名时出现"Invalid Host header"问题
proxy: {
'/bscnym': {
target: 'http://xxx:8000',
changOrigin: true,
pathRewrite: { '^/': '/' }
}
}
},
4.6 配置别名
config.resolve.alias.set('@', resolve('src'))
5. 小程序模板简介
5.1目录介绍
├── assets # 静态资源 │ └── icon # iconfont │ └── iconfont.acss # 字体文件样式库 │ └── image # 图片 │ └── style # 部分全局公用的样式库 │ └── public.acss # 基础公用样式库 ├── commons # 通用UI组件（建议在js或者md文件内，标明入参及其含义） │ └── ... # 自定义通用UI组件 ├── components # 业务组件 │ └── ... # 其他自定义业务组件 ├── pages # 页面 │ └── ... # 具体页面 ├── service # 服务 │ └── api # 具体请求 │ └── request # 接口请求的统一封装 │ └── host # 域名 ├── utils # 帮助类 │ └── config.js # 配置 │ └── dict.js # 字典 │ └── mockData.js # 模拟数据 │ └── index.js # 所有utils的统一输出 │ └── ddApi.js # dd相关的api封装 │ └── utils.js # 非dd相关的api封装 ├── app.acss # 全局样式 ├── auto.acss # css生成器自动生成的样式文件 ├── css.generator.config.js # css生成器插件版配置 ├── app.js # 小程序启动入口 ├── app.json # 小程序全局配置，如底部，顶部 ├── package.json # 依赖配置 ├── README.md # README
5.2 commons 通用组件 和 components 组件
同H5版本
PS：由于小程序，组件需要在使用文件的json文件中配置注入，故通用组件库没有做自动注入的操作
5.3 pages 页面
5.4 service 服务
5.4.1 api.js 请求列表
同H5
5.4.2 request.js 接口请求的统一封装
基本思路同H5，接口调用方式由axios改为dd.httpRequest，具体逻辑可根据服务端情况微调
5.4.3 host.js 域名
不同环境的地址配置，等同于H5的 .env文件
5.5 utils 帮助类
5.5.1 config.js 配置项
各类配置项，等同于H5的 .env文件
5.5.2 dict.js 字典
同H5
5.5.3 mockData.js 模拟数据
此处设定为obj[key]直接获取json，json直接由后端提供demo，由config.js控制mock开关。也可采用mock.js
5.5.4 ddApi.js
dd相关的api封装，便于维护
5.5.5 utils.js
非dd相关的api封装，便于维护
5.5.6 index.js
所有utils的统一输出，便于使用
5.6 auto.css 和 css.generator.config.js 生成器自动生成文件与插件的配置
css生成器插件版，通过package.json配置脚本 yarn dev启动。
自动生成auto.css文件，且该文件建议不提交git（避免每次生成不一致，导致较大冲突）
PS:方案需统一，auto.css不提交git,本地运行必须通过yarn dev生成auto.css，否则本地样式会出现异常
5.7 其他想法
login建议单独页面，可将登录逻辑与拦截器等统一逻辑尽可能解耦，逻辑拓展性较强，且尽可能与h5逻辑保持一致