hqy-cli
v0.0.2
Published
a project template
Downloads
2
Readme
template
技术栈:vue vueX vue-Route axios webpack4
使用方式
子模块没有,会向主模块root进行查找
- store
注意:state属性禁止设置为undefined,避免root模块和当前模块同名问题
# I18n
$getI18n('buttons.login')
# Validator
rules: {
loginUsername: [GET_MODULE_VALIDATORS('required')]
}
# Api
// api 定义
{
index: 'login',
url: '/upmsapi/system/login',
method: 'post'
}
// api 调用
let params = {}
$http('login',params).then()
# store 方法
$commitStore('setTask','taskOne')
# store 属性
$getStore('taskId')
目录说明
Public 暂时保留
├─README.md //工程说明文档
├─UPDATALOG.md //工程更新文档
├─build //webpack 相关
│ │─css-module.js
│ │─utils.js
│ │─webpack.base.conf.js //公共
│ │─webpack.dev.conf.js //开发环境
│ │─webpack.prod.conf.js //生产环境
│
├─config
│ │─index.js //打包配置
│ │─proxy.js //代理配置
│
├─deploy // 部署相关
│ │─default.conf // nginx 配置模版
│ │─Dockerfile // docker file
│ │─nginx.sh // nginx 启动命令
│
└─src //源码目录
│─main.js //独立运行入口
│─micro.js //微服务入口
│─utils //工具
│─automatic //自动化模块导入相关
│─enum.js //枚举
│─index.js //汇总导出importModule
│─loader.js //加载器
│─merger.js //合并器
│─scan.js //扫描加载模块
│─globalApi.js //全局方法
│─i18n.js //i18n实例化
│─index.js //汇总
│─interceptors //拦截
│─http.js //axios拦截
│─router.js //路由拦截
│─request.js //axios封装
│─router.js //实例化路由
│─store.js //实例化store
│─views //模块文件
│─layout //公共模块
│─api //axios网络请求定义
│─assets //静态图片资源文件 打包的时候，会被编译
│─components //公共组件
│─i18n //国际化
│─lib //静态资源 不会被编译
│─router //vue-router路由配置
│─store //vuex的状态管理
│─css //css样式
│─utils //工具类
│─pages //前端页面
│─mock //mock 数据api
# src/utils/request.js- 全局封装axios各类方法
- header设置
- 写在api中,静态字符串格式
- 写在$http()第三个参数,动态变量形式,
- 静态动态同时存在,动态优先
- header设置
- 全局拦截器
- 请求拦截器
- setToken
- 响应拦截器
- 重置Token
- 状态码判断
- 请求拦截器
router
全局路由实例
全局路由守卫
- 纳管各模块路由组件
- 路由守卫
- 动态加载路由
- 判断登陆状态
- 路由权限
实现动态路由就不需要判断路由权限了
views
每个文件夹为一个模块,模块名为
文件夹的名字
api
const baseUrl = '/paas-web';
const apis = [{
index: 'updateUserAuthority',
url: baseUrl + '/upmsapi/authority/updateUserAuthority',
method: 'post'
}, {
index: 'machineCode',
url: '/licenseapi/license/machineCode',
method: 'get'
}];
export default apis;store
const module = {
state: {
},
mutations: {
},
getters: {
},
actions: {
}
}
export default module;
router
const task = () => import('../pages/List.vue')
export default [
{
path: '/app/boc-dashboard',
name: 'task',
component: task,
},
]modules
自动化导入
模块默认导出文件 :
- Validators 表单校验规则
- Api
- Store
- i18n
#src/modules.js
//生成总对象
export let exportObject = {
routes: [],
store: {},
i18n: {
zh: {},
en: {}
},
api: {},
validator: {}
}
//扫描模块
const scanData = scan()
//生成模块
export const m = generateModule(scanData);
export const {routes, store: store, i18n,validator,api} = m;
globalApi.js
import {store, i18n, validator, api} from '../modules'
import {doGet, doPost,doDelete,doPut} from './getMethods/request'
const globalModule = 'layout'
const map = new Map([
[/^get$/, doGet],
[/^post$/, doPost],
[/^delete$/, doDelete],
[/^put$/, doPut]
])
#api
function get_module_Api(ApiName, params) {
let ModuleName = this.$route.meta.moduleName
let apiName = getApiName(ModuleName, ApiName)
let methods = apiName.method;
let apiPromise = null;
;[...map].filter(([reg]) => reg.test(methods)).forEach(([key, value]) => apiPromise = value(apiName,params))
return apiPromise
}
#Store
function get_module_Store(stateName) {
let ModuleName = this.$route.meta.moduleName
let state = getStoreName(ModuleName, stateName)
return state
}
#commit Store
function commit_module_Store(mutationName, params) {
let ModuleName = this.$route.meta.moduleName;
let _mutations = this.$store._mutations
let CommitMutationName = commitStoreName(ModuleName, _mutations, mutationName)
this.$store.commit(CommitMutationName, params)
}
#I18n
function get_module_I18n(name) {
let ModuleName = this.$route.meta.moduleName;
let I18nName = `${ModuleName}.${name}`
return getI18n(ModuleName, name)
}
#Validators
function get_module_Validators(ValiName) {
let ModuleName = this.$route.meta.moduleName;
return getValidatorName(ModuleName, ValiName)
}
export default {
GET_MODULE_API: get_module_Api,
GET_MODULE_STORE: get_module_Store,
COMMIT_MODULE_STORE: commit_module_Store,
GET_MODULE_I18N: get_module_I18n,
GET_MODULE_VALIDATORS: get_module_Validators,
}main.js
import {hijack, routes, store, i18n} from './modules'
import globalApi from "./modules/globalApi";
// 状态管理 modules
const router = Router(routes);
const STORE = new Vuex.Store({
state:{},
mutations:{},
acrtions:{},
modules:{...store} //https://vuex.vuejs.org/zh/guide/modules.html
});
let vue = new Vue({
store:STORE,
router,
i18n:vueI18n,
render: h => h(App),
beforeCreate: function(){
//全局注册 改变this执行Vue实例
globalRegister(this)
}
}).$mount('#app');
//全局注册
function globalRegister (that){
Object.keys(globalApi).forEach(x=>{
let func = globalApi[x]
window[x] = func.bind(that)
})
}打印modules
csanData
#layout
layout:
files: (27) ["./layout/api/login.js", "./layout/i18n/en/button.js", "./layout/i18n/en/commom.js", "./layout/i18n/en/header.js", "./layout/i18n/en/index.js", "./layout/i18n/en/labels.js", "./layout/i18n/en/msg.js", "./layout/i18n/en/notice.js", "./layout/i18n/en/placeholder.js", "./layout/i18n/en/titles.js", "./layout/i18n/zh/button.js", "./layout/i18n/zh/header.js", "./layout/i18n/zh/labels.js", "./layout/i18n/zh/msg.js", "./layout/i18n/zh/notice.js", "./layout/i18n/zh/placeholder.js", "./layout/i18n/zh/status.js", "./layout/i18n/zh/tableHeaders.js", "./layout/i18n/zh/titles.js", "./layout/main.module.js", "./layout/pages/layout/layout.js", "./layout/pages/layout/main.js", "./layout/router/layout.js", "./layout/store/login.js", "./layout/utils/eventBus.js", "./layout/utils/objUtil.js", "./layout/validator/validators.js"]
#api
api: (8) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
#i18n
i18n:
en: {header: {…}, titles: {…}, msg: {…}}
zh: {buttons: {…}, header: {…}, labels: {…}, msg: {…}, notice: {…}, …}
#route
route: Array(3)
0: {path: "/", meta: {…}}
1: {path: "/login", name: "login", meta: {…}, component: ƒ}
2: {path: "/app", children: Array(3), meta: {…}, component: ƒ}
#store
store:
namespaced: true
state: {isManager: true, taskId: 2222222222222222, tokenOverdue: "", token: "", userToken: "", …}
mutations: {setTokenOverdue: ƒ, clusters: ƒ, clusterInfo: ƒ, clearCompTemplates: ƒ, set_token: ƒ, …}
getters: {}
actions: {getClusterInfo: ƒ, getRegistryInfo: ƒ}
#validator
validator:
required: {required: true, trigger: "change", zh: "不能为空", en: "Can not be empty"}
# task upms 模块
task: {files: Array(15), api: Array(1), i18n: {…}, main: {…}, route: Array(1), …}
upms: {files: Array(27), api: Array(9), i18n: {…}, main: {…}, route: Array(2), …}
生成模块 m
#routes: Array(3)
0: {path: "/", meta: {…}}
1: {path: "/login", name: "login", meta: {…}, component: ƒ}
2: {path: "/app", children: Array(3), meta: {…}, component: ƒ}
#store:
layout: {namespaced: true, state: {…}, mutations: {…}, getters: {…}, actions: {…}}
task: {namespaced: true, state: {…}, mutations: {…}, getters: {…}, actions: {…}}
upms: {namespaced: true, state: {…}, mutations: {…}, getters: {…}, actions: {…}}
#i18n:
zh:
layout: {buttons: {…}, header: {…}, labels: {…}, msg: {…}, notice: {…}, …}
task: {buttons: {…}}
upms: {buttons: {…}, header: {…}, labels: {…}, msg: {…}, notice: {…}, …}
en: {layout: {…}, task: {…}, upms: {…}}
#api:
layout: (8) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
task: [{…}]
upms: (9) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
#validator:
layout: {required: {…}}
task: {task: {…}}
upms: {required: {…}}
环境
mock
dev
uat
pro
Eslint 未开始
增量检查
lint-staged //只检查本次提交修改过的
husky //git 钩子单元测试 未开始
持续集成 持续部署 持续交付
mock 未开始
mock server
内置easy mock
外部搭建
TS 未开始
子工程配置
Package.json
"scripts": {
"start": "cross-env PRODUCT_TYPE=boms ROOT_PATH=../../.. webpack-dev-server --config ./node_modules/bn-template/build/webpack.dev.config.js",
"build": "cross-env ROOT_PATH=../../.. webpack --config ./node_modules/bn-template/build/webpack.prod.config.js",
"analyz": "cross-env ROOT_PATH=../../.. webpack --config ./node_modules/bn-template/build/webpack.analyz.config.js"
},
"dependencies": {
"bn-template": "x.x.x"
}Webpack
module.exports = {
mode: 'development'
}
config/webpack.dev.config.js
module.exports = {
mode: 'development'
}
config/webpack.prod.config.js
module.exports = {
mode: 'production'
}Proxys
config/proxys.js
module.exports = [{
target: 'http://10.20.21.11:9022',
intercept: 'paas-web',
rewrite: true,
ws: true
}]Setting
module.exports = {
}子工程目录
├─README.md // 工程说明文档
├─UPDATALOG.md // 工程更新文档
├─package.json
├─config // 配置相关
│ │─proxys.js // 代理配置,内容参考examples/proxys.js,可选(可以没有此文件）
│ │─webpack.base.config.js // webpack配置,内容参考examples/webpack.base.config.js,可选(可以没有此文件）
│ │─webpack.dev.config.js // webpack配置,内容参考mples/webpack.dev.config.js,可选(可以没有此文件）
│ │─webpack.prod.config.js // webpack配置,内容参考examples/webpack.prod.config.js,可选(可以没有此文件）
│
└─src //源码目录
│─main.js //独立运行入口
│─settings.js //包含应用相关配置，如:应用名称appName
│─views //模块文件
│─layout //公共模块
│─api //axios网络请求定义
│─assets //静态图片资源文件 打包的时候，会被编译
│─components //公共组件
│─i18n //国际化
│─lib //静态资源 不会被编译
│─router //vue-router路由配置
│─store //vuex的状态管理
│─css //css样式
│─utils //工具类
│─pages //前端页面
│─mock //mock 数据部署包(koa)
制作物理部署包
1,安装node环境
wget https://nodejs.org/dist/v12.16.1/node-v12.16.1-linux-x64.tar.xz
tar -xf node-v12.16.1-linux-x64.tar.xz
echo export PATH=\$PATH:/home/zhangs/installs/node-v12.16.1-linux-x64/bin > /etc/profile.d/node.sh
source /etc/profile.d/node.sh
2,安装git
yum install git -y
3,拉取代码
git clone -b develop http://[email protected]:8888/fore-end/micro-service/bn-template.git
4,安装依赖
npm i --unsafe-perm
5,静态资源打包
npm run build
6,打部署包(server目录就是部署包)
sh ./build/build.sh(子工程执行:sh ./node_module/bn-template/build/build.sub.sh)制作docker镜像(koa)
1,执行制作物理部署包
2,打镜像
docker build -f ./docker/Dockerfile-koa -t xxx:xxx .(子工程执行:docker build -f ./node_modules/bn-template/docker/Dockerfile-koa -t xxx:xxx .)部署
物理部署
1,获取部署包至目标服务器（参考上面打包)
scp -r server [email protected]:/
2,安装依赖
sh server/bin/install.sh
3,启动
pm2 start server/koa.jsdocker
docker run -d --name test -p5000:3000 xxx:xxx