FlyFlow

项目集成(商业版)

# 前端项目

# 新建项目(cxygzl-web)

  1. 初始化项目

    根据此处地址：vue3初始化 (opens new window)，初始化好项目并安装好路由

  2. 依次执行如下命令，安装依赖插件

npm install element-plus --save
npm install less --save
npm install moment --save
npm install axios -g
npm install  vuedraggable@4.1.0
npm install --save vue-clipboard3
npm install sass
npm install vue3-print-nb --save
npm install @element-plus/icons-vue
npm i -S pinia
npm install vite-plugin-top-level-await -D  //注意vite.config.ts变动
npm i vue3-draggable-resizable@1.6.5 vue3-pdfjs@0.1.6

npm install @wangeditor/editor --save
npm install @wangeditor/editor-for-vue@next --save
npm install @wangeditor/plugin-mention 
npm install pinyin-pro
  1. 复制代码

将src/views/flyflow文件夹复制到自己的项目中

  1. 配置main.ts

打开main.ts文件

import { createApp } from 'vue'
//样式可能会影响流程的，如果是新项目，建议清空
import './style.css'
import App from './App.vue'

//路由自行对比配置
import router from "./views/cxygzl/router";
import { setupStore } from "./views/cxygzl/stores/store";

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

//打印
import print  from 'vue3-print-nb'
// 设置icon
import installIcon from './views/cxygzl/utils/icon'


let app = createApp(App);

app.use(print)

setupStore(app);
app.use(router).use(installIcon).use(ElementPlus).mount('#app')
  1. 配置文件

在根目录新建文件：.env.development，添加如下内容：

## 开发环境

# 变量必须以 VITE_ 为前缀才能暴露给外部读取
NODE_ENV='development'

VITE_APP_PORT=3000
VITE_APP_BASE_API = '/api'
VITE_APP_VERSION = 'V2.1.16'
  1. 配置vite.config.ts，添加接口代理

此处需要对比已存在的项目配置，如果是新项目可以直接复制粘贴


import vue from '@vitejs/plugin-vue'
import { UserConfig, ConfigEnv, loadEnv, defineConfig } from "vite";

import topLevelAwait from 'vite-plugin-top-level-await'

export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
   const env = loadEnv(mode, process.cwd());
   return {
      server: {
         host: "0.0.0.0",
         port: Number(env.VITE_APP_PORT),
         open: true, // 运行是否自动打开浏览器
         proxy: {
            // 反向代理解决跨域
            [env.VITE_APP_BASE_API]: {
               target: 'http://pro.flyflow.cc/api',
               changeOrigin: true,
               rewrite: (path) =>
                       path.replace(new RegExp("^" + env.VITE_APP_BASE_API), ""),
            },
            // 反向代理解决跨域
            ["wj"]: {
               target: 'http://pro.flyflow.cc/api',
               changeOrigin: true,
               rewrite: (path) =>{
                  path.replace(new RegExp("^" + "wj"), "wj")

               }
            },
         },
      },
      plugins: [
         vue(),topLevelAwait({
            promiseExportName: '__tla',
            promiseImportName: i => `__tla_${i}`
         })
      ],

   };
});
  1. 登录之后处理token和用户信息

可以参考如下代码赋值


import {useUserStore} from "./cxygzl/stores/user";

const userStore = useUserStore();


import {ref} from 'vue'

const token=ref('');

function submit(){
  //设置token
  userStore.setToken(token.value)
  //设置用户id
  userStore.userId="13";
  //设置名称
  userStore.nickname="测试111";
  //设置头像
  userStore.avatar="https://f.ittool.cc/pic/m.jpg";
}

新增表单