txf-client

txf-client 基于 vue-manage-system 开发，只保留了需要使用的页面和对应的插件

开发页面

以 vue-manage-system 的 富文本编辑器组件 为例

1. 安装插件 在 package.json 中增加 富文本编辑器插件后执行 cnpm install

{
    "dependencies": {
    "vue-quill-editor": "^3.0.6",
    }
}

1. 把 vue-manage-system 中的 src/components/page/VueEditor.vue 复制到项目中

2. 在 src/router/index.js 添加路由

{
    ...
    children : [
        ...
        path: '/editor',
        component: () => import('../components/page/VueEditor.vue'),
        meta: { title: '富文本编辑器' }
    ]
},

对接接口

1. 在 src/api/index.js 添加请求路径

{
    ...
    "addContent" : "content/addContent"
}

1. 在 src/config.js 配置请求地址（默认：http://127.0.0.1:9504）

   • 注意：如果修改请求地址，需要在跨域中间件中添加相关配置 跨域

{
    ...
    baseURL: "http://127.0.0.1:9666"
}

1. 发起请求

import { requestApi } from '../../api/index';
import { errMsg } from '../../utils/tool';

requestApi("addContent", {
    "title": "测试标题",
    "content": "测试内容",
}).then(res => {
    this.$message.success("保存成功");
}).catch(error => {
    errMsg(this, error);
});

卸载页面

1. 删除对应页面

2. 在路由中将其移除

3. 如果有不需要使用的插件的话，一并删除，以 富文本编辑器插件 为例

npm un vue-quill-editor -S

线上部署

1. 执行 npm run build 在 dist 目录生成静态文件

2. 以 nginx 为例，配置指向 dist 目录即可

server {
    listen 80;
    server_name  admin.fengfengphp.com;
    root  /wwwroot/txf-client/dist;

    location / {    
        index  index.html;
    }   
}