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',
        }
      },
    ]
  }
};