Merculet 前端基础工程
Node 版本要求10 以上
功能介绍
- 一行命令初始化您的 Vue 项目 已经完成基础配置
- 命令行加配置文件简便的初始化后台系统页面
使用方式
安装
yarn 安装方法
sudo yarn global add mvp-cli
npm 安装方法
sudo npm i mvp-cli -g
升级
sudo yarn global upgrade mvp-cli
sudo npm update mvp-cli -g
初始化项目
mvp --init=你项目的名称 --type=mobile 默认 mobile 后续兼容pc站
封装说明
axios基础封装
- request拦截器 默认去storage取token 放入header里面
- response拦截器 对全部错误拦截 拦截特定code 提示错误
- 封装get post请求 统一接收2个参数一个url 一个params 不用关心参数不一致
storage 基础封装
- 重写 set get remove clear 方法让默认支持json方式参数
- 默认写入 sessionStorage 需要localStorage 传入第三参数即可
vuex 封装
- vuex默认按照模块拆分
- vuex添加 syncData 插件 每次同步把vux 数据写入 sessionStorage
手机版
postcss
- 添加 autoprefixer 自动浏览器添加兼容前缀
- 添加 px-to-vw 自动将px单位转换为自适应的vw单位 配置文件详见 .postcss.js
- 手机版默认安装vant 组件库 已经打包为按需加载
pc版本
= 文档编译中
部署
安装依赖
yarn || npm i
测试环境编译
yarn test-cn || npm run test-cn
生成环境编译
yarn prod-cn || npm run prod-cn
生成文件目录结构
├── README.md
├── babel.config.js babel配置文件 编译js
├── copy-map.js 后期接口前端监控sdk相关 先忽悠
├── eslintrc.js eslint配置文件
├── env.production 生产配置
├── env.local 本地开发变量
├── env.development 测试环境变量
├── browserslistrc 浏览器配置文件
├── package.json
├── public
│ ├── favicon.ico
│ └── index.html
├── src
│ ├── App.vue
│ ├── api
│ │ └── index.js 统一封装的api
│ ├── assets
│ │ └── less
│ └── index.less 重置浏览器默认样式
│ ├── components
│ └── main.vue
│ ├── config
│ └── index.js 配置文件主入口
│ ├── main.js vue主入口
│ ├── routers
│ └── index.js 路由主入口
│ ├── serving
│ ├── http.serving.js 统一封装的http请求
│ └── storage.serving.js 统一封装的缓存
│ ├── store
│ └── index.js vuex主入口
│ └── views
│ ├── home.vue
│ └── index.vue
├── vue.config.js vuecli3 相关配置文件
└── yarn.lock yarn版本锁
生成后台页面
生成的文件依赖一些基础的组件 目前还不支持在我司以外的项目中使用，使用的全局组件如，分页 侧滑 图片上传。
mvp --create
// 也可以指定配置文件名称 mvp --create=mvp-config.js
// 默认不指定会取目录下面的 mvp-config.js配置文件介绍
在你项目下新增
mvp-config.js为默认配置文件
| 参数 | 介绍 |
|---|---|
| title | 当前模块的标题 |
| moduleName | 当前模块的名称默认会按照这个名称生成目录 |
| apiName | 前端定义的请求api的名称 |
| api | 当前模块请求的后端接口地址 |
| tablePage | tabs页面的配置文件 |
| addPage | 新增页面的配置文件 |
form 表单支持的 type 类型介绍 正在努力新增添加中...
| 类型 | 介绍 |
|---|---|
| text | 普通的文本输入框 |
| textarea | 长文本输入框 |
| upload | 图片上传组件 |
| select | 下拉选择框，注意一般下拉框有下拉选项 下拉选项记得去 extendData 配置扩展字段 |
配置文件详解
以下以机器人页面也配置介绍
module.exports = {
// 标题
title: "机器人",
// 模块名称
moduleName: "chat-ro-bot",
apiName: "chatRoBot",
// 请求接口
api: "/v1/merculetManagement/community/chatRobotCommands",
// list 页面配置
tablePage: {
list: [
{
prop: "key",
label: "指令"
},
{
prop: "command_value",
label: "指令值"
},
{
prop: "desc",
label: "指令描述",
type: "template"
},
{
prop: "update_date_time",
label: "更新时间",
type: "template",
// 如果是时间 这里可以配置前端过滤器来格式化时间
filter: "dateTime"
},
{
// 如果配置类型为 edit 会显示编辑和删除按钮
type: "edit"
}
]
},
addPage: {
// 扩展字段 会直接填入data
extendData:{
options:[
{
label:'文本',
value:0
},
{
label:'卡片',
value:1
},
],
},
forms: [
{
value: "key",
defaultValue: `''`,
label: "指令",
placeholder: "请输入指令",
type: "text",
rule: {
required: true,
validator: "checkNameFun",
name: "指令",
trigger:'blur',
}
},
{
value: "command_type",
defaultValue: 0,
label: "指令类型",
placeholder: "请选择类型",
type: "select",
optionName:'options',
rule: {
required: true,
validator: "checkNameFun",
trigger:'change',
name: "指令类型",
}
},
{
value: "command_value",
defaultValue: `''`,
label: "指令值",
placeholder: "请输入指令值",
type: "textarea",
rule: {
required: true,
validator: "checkNameFun",
name: "指令值",
trigger:'blur',
}
},
{
value: "title",
defaultValue: `''`,
label: "分享标题",
placeholder: "请输入分享标题",
type: "text",
rule: {
required: true,
validator: "checkNameFun",
name: "分享标题",
trigger:'blur',
}
},
{
value: "intro",
defaultValue: `''`,
label: "分享描述",
placeholder: "请输入分享标题",
type: "text",
rule: {
required: true,
validator: "checkNameFun",
name: "分享描述",
trigger:'blur',
}
},
{
value: "content_url",
defaultValue: `''`,
label: "分享图片",
placeholder: "图片大小建议为30k",
type: "upload",
rule: {
required: true,
validator: "checkNameFun",
name: "分享图片",
trigger:'blur',
}
},
]
}
};