主要技术栈文档

更新说明

维护人员：胡涛
维护日期：2024-03-28T11:19:25.000Z
最后维护人员：胡涛
最后维护日期：2024-04-03T10:55:18.000Z

Vue3模板工程项目结构及开发使用说明

工程结构及规范说明

主要目录及文件说明

src 框架源代码目录
public 不需要编译的静态资源目录
typings 开发工具类型智能提示定义文件目录
index.html 开发运行静态入口文件
vite.config.ts VITE开发打包环境配置文件

开发源码目录结构说明

src/api API请求请求封装库及后端API调用封装代码文件
src/assets 需要编译的静态资源数据文件（如静态配置JSON、图片等）
src/commponents 业务系统项目共用的组件存放目录
src/config 公共导出的配置结构化数据文件存放目录
src/environment 环境变量相关方法有变量导出
src/helpers 项目公共方法代码存放目录
src/layout 项目框架布局相关页面及组件
src/plugins Vue规范的相关插件安装集成代码文件
src/routes 页面路由配置相关代码文件
src/store 数据持久化缓存处理代码存放文件
src/styles 项目框架结构样式表存放目录
src/types 公共数据类型定义文件
src/views 业务模块布局页面存放目录

项目命名规范参考

目录名称命名

命名规范：小写+中杠分段命名

格式

<A>-<B>...-<N>

示例

user
user-posts
organize
organize-users

Vue文件命名及规范

命名规范:大驼峰分段命名

路由页面文件命名一般采用按业务功能名称【小写+中缸分段】为目录名，文件名采用大驼峰【默认为Index.vue】页面进行命名
指定业务使用的业务组件一般在业务模块目录下采用components为目录名，根据组件名含义按大驼峰进行命名

示例

//路由页面命名示例
user-posts/Index.vue
user-posts/Edit.vue
organize/Index.vue
organize-users/Index.vue


//业务组件命名示例
components/UserSelect.vue
components/UserPopup.vue
components/UserPanel.vue

TS/JS文件命名规范

命名规范：小写+中杠分段命名

格式

<A>-<B>...-<N>.ts

示例

helpers/auth.ts
helpers/styles.ts

dictionary.ts
dictionary-generators.ts

Vue文件内样式命名规范

命名规范：小写+中杠分段命名

CSS格式

css

.a-b-c {
}

LESS格式

less

.a {
  &-b {
    &-c {
    }
  }
}

CSS示例

css

.newway-layout {
}
.newway-layout-header {
}
.newway-layout-body {
}
.newway-layout-footer {
}
.newway-layout-side {
}
.newway-layout-panel {
}

LESS示例

less

.newway-layout {
  &-header {
  }
  &-body {
  }
  &-footer {
  }
  &-side {
  }
  &-panel {
  }
}

安装依赖及环境说明

安装依赖

@newway/api 公共API调用封装依赖包
@newway/ui 部分通用组件、原CR图片库、ANT图标库资源包
@newway/layout 框架布局组件依赖包
@newway/libs 通用方法代码依赖包
@newway/utils 业务系统封装公共代码依赖包
@newway/pagebase 原V2版本系统页面继承基类依赖代码包
@newway/business 通用业务组件封装【枚举、字典、用户、机构、区域等】依赖包

配置及环境变量

前端代理配置

后端API接口代理修改项目根目录下vite.config.ts配置文件的变量proxyUrl对应的URL地址及可
如需单独配置某一服务的代理需要修改vite.config.ts配置文件server配置节点下的proxy

统一修改后端代理配置

javascript

export const proxyUrl = 'https://v8.sxsrxt.com';

单独修改配置

javascript

 server: {
      host: "localhost",
      port: 3001,
      proxy: {
        //将平台接口API代理指向本地开发环境
        "/api/platform": {
          target: "https://localhost:44315",
          changeOrigin: true,
          secure: false,
          ws: true,
        },
        "/api": {
          target: proxyUrl,
          changeOrigin: true,
          secure: false,
          ws: true,
        }
      },
      watch: {
        ignored: ["!**node_modules/@newway/*/**"],
      },
    },

环境变量使用

环境变量使用需要按以下三个步骤进行

在typings/env.d.ts文件中定义接口ImportMetaEnv定义增加对应的变量名称定义
在配置文件env.<环境名>中添加对应的变量
在代码中使用import.meta.env.<变量名>获取运行环境的变量名

定义ImportMetaEnv接口变量示例：

typescript

interface ImportMetaEnv {
  /**
   * 标题变量
   */
  VITE_APP_TITLE?: string;
}

配置env.development文件定义变量

env

VITE_APP_TITLE=开发应用标题

页面使用

vue

<template>
  <div>{{ appTitle }}</div>
</template>

<script lang="ts" setup>
//从环境变量获取标题名
const appTitle = import.meta.env.VITE_APP_TITLE;
</script>

<style lang="less" scoped></style>

注意事项：变量名称需要以VITE_开头

项目插件配置

项目所有除了最基础的插件【router、api、store】以外，其它的VUE依赖插件统一在`src/plugins目录中进行配置,模板工程默认已集成以下插件配置

ant design vue UI库集成
vxe-pluings VXE渲染器集成
mounts 全局挂载插件集成
全局基础配置相关初始化及授权数据加载集成

后续如果在项目开发中需要集成可统一在plugins建立相关配置文件并导入到src/plugins/index.ts中进行统一安装集成

具体参考代码如下【以testPlugins为例】：

// src/plugins/demo.ts
import { App } from 'vue';
export default {
  install(app: App) {
    //这里是插件安装配置代码
  },
};

// src/plugins/index.ts

import { App } from 'vue';

//导入测试插件配置文件
import testPlugins from './test';

export default {
  install(app: App) {
    //集成插件
    app.use(testPlugins);
  },
};

公共代码调用说明

字典枚举及相关挂载方法使用（原VUE2方法逻辑）

原this挂载方法现已经统一挂载到全局$app对象下；如：原this.$enumName类似方法改为:$app.enumName类似的方法

$app对象参考类型定义如下：

typescript

interface NewwayApp {
  /**
   * HTTP请求对象
   */
  api: HttpRequest;

  /**
   * 全局常量
   */
  consts: ICommonConstants;

  /**
   * 字典常量
   */
  dictconsts: IDictionaryConstants;

  /**
   * 获取字典项集合
   * @param key
   */
  dictionary(key: string): Array<IDictionaryDataItem>;

  /**
   * 获取字典名称
   * @param key
   * @param value
   */
  dictionaryName(
    key: string,
    value: string | number | Array<string | number>,
  ): string;

  /**
   *
   * @param key 获取字典下拉数据项
   * @param valueType
   */
  dictionaryOptions(
    key: string,
    valueType?: 'string' | 'number',
  ): ISelectOptions;
  enums: IEnums;

  /**
   * 获取枚举名
   * @param key
   * @param value
   * @param flags
   */
  enumName(
    key: string | Object,
    value: number | Number | Array<number | string> | string,
    flags?: boolean,
  ): string | Array<string>;

  /**
   * 获取指定枚举下拉数据项
   * @param key
   */
  enumOptions(key: string | Object): Array<any>;

  /**
   * 获取枚举值集合
   * @param key
   * @param value
   */
  enumValuesForFlags(
    key: string | Object,
    value: number | Number,
  ): Array<number>;

  /**
   * 返回区域名
   * @param code
   * @param defaultText
   */
  areaName(code: string, defaultText?: string): string;

  /**
   * 获取用户显示名称
   * @param id
   */
  userName(id: string);

  /**
   * 获取机构名称
   * @param idOrCode
   */
  organizeName(idOrCode: string);

  /**
   * 初始化区域数据
   * @param reload
   */
  initAreas(reload?: true): Promise<boolean>;

  /**
   * 初始化长站数据（已过期）
   * @param reload
   */
  initSites(reload?: true): Promise<boolean>;

  /**
   * 初始化数据字典
   * @param reload
   */
  initDictionarys(reload?: true): Promise<boolean>;

  /**
   * 初始化机构数据
   * @param reload
   */
  initOrganizes(reload?: true): Promise<boolean>;

  /**
   * 初台化用户列表
   * @param reload
   */
  initAllUsers(reload?: true): Promise<boolean>;
}

成员对象列表

成员名称	说明
$app.api	网络请求对象
$app.consts	全局常量
$app.dictconsts	字典常量

方法列表

方法名称	说明
$app.api.config	配置网络请求
$app.api.request	发起网络请求
$app.api.formRequest	发起网络请求（FROM方式）
$app.api.post	发起POST请求
$app.api.get	发起GET请求
$app.api.put	发起PUT请求
$app.api.delete	发起DELETE请求
$app.api.upload	上传文件
$app.api.dictionary	获取字典项集合
$app.api.dictionaryName	获取字典名称
$app.api.dictionaryOptions	获取字典下拉数据项
$app.api.enumName	获取枚举名
$app.api.enumOptions	获取指定枚举下拉数据项
$app.api.enumValuesForFlags	获取枚举值集合
$app.api.areaName	返回区域名
$app.api.userName	获取用户显示名称
$app.api.organizeName	获取机构名称
$app.api.initAreas	初始化区域数据
$app.api.initSites	初始化长站数据（已过期）
$app.api.initDictionarys	初始化数据字典
$app.api.initOrganizes	初始化机构数据
$app.api.initAllUsers	初台化用户列表

示例方法说明

typescript

//发送API请求对象 等同于 import api from '@/api'
let api = $app.api;
api.post('/api/myservice', data);

//全局常量对象
let appName = $app.consts.APP_NAME;
console.log('appName', appName);

//全局字典常量对象
let copyright = $app.dictconsts.COPYRIGHT;

//获取指定键名的字典项集合
let dictItems = $app.dictionary(key);

//根据枚举值获取显示枚举名
let name = $app.enumName(key, value);

字典枚举公共方法使用方式二

枚举使用直接从@/plugins/enums导入枚举对象及枚举操作方法
字典使用直接从@/plugins/dictionary导入字典操作方法

示例代码

typescript

import enumModule, { enums } from "@/plugins/enums";
import { dictionaryOptions dictionaryName } from "@/plugins/dictionary";

//获取枚举名
var displayName = enumModule.enumName(key,value);

//获取字典下拉数据项
var options = dictionaryOptions(key);

//获取指定字典键名对应的字典项显示名称
var name = dictionaryName(key,value);

主要技术栈文档 ​

Vue3模板工程项目结构及开发使用说明 ​

工程结构及规范说明 ​

主要目录及文件说明 ​

开发源码目录结构说明 ​

项目命名规范参考 ​

目录名称命名 ​

Vue文件命名及规范 ​

TS/JS文件命名规范 ​

Vue文件内样式命名规范 ​

安装依赖及环境说明 ​

安装依赖 ​

配置及环境变量 ​

前端代理配置 ​

统一修改后端代理配置 ​

单独修改配置 ​

环境变量使用 ​

项目插件配置 ​

公共代码调用说明 ​

字典枚举及相关挂载方法使用（原VUE2方法逻辑） ​

$app对象参考类型定义如下： ​

成员对象列表 ​

方法列表 ​

示例方法说明 ​

字典枚举公共方法使用方式二 ​

示例代码 ​

主要技术栈文档

Vue3模板工程项目结构及开发使用说明

工程结构及规范说明

主要目录及文件说明

开发源码目录结构说明

项目命名规范参考

目录名称命名

Vue文件命名及规范

TS/JS文件命名规范

Vue文件内样式命名规范

安装依赖及环境说明

安装依赖

配置及环境变量

前端代理配置

统一修改后端代理配置

单独修改配置

环境变量使用

项目插件配置

公共代码调用说明

字典枚举及相关挂载方法使用（原VUE2方法逻辑）

$app对象参考类型定义如下：

成员对象列表

方法列表

示例方法说明

字典枚举公共方法使用方式二

示例代码