Dragonfly 种子工程

使用方法

开始调试

进入项目根目录，运行 npm run start 命令，启动开发服务器。

在浏览器中访问 http://localhost:5173/，可以看到 dragonfly 应用已经正常启动。

构建生产包

运行 npm run build 执行项目编译，默认在 dist 目录下输出构建生产包。

代码检查

进入项目根目录，可执行以下命令进行多种文件格式的代码检查，默认检查 src 目录下的文件

# typescript 文件
npm run check-ts
npm run fix-ts

# scss,css 文件
npm run check-css
npm run fix-css

# html 文件
npm run check-html
npm run fix-html

通过执行 npm run format 对代码做代码风格格式化。

单元测试

Dragonfly 内置 Jest 和 @vue/test-utils 测试库，提供单元测试、组件/页面集成测试等功能。

在 src/__tests__ 目录下编写测试用例。

执行 npm run test:unit，会运行项目下所有的测试用例。

目录结构

|-- dist // 生产构建输出目录
|-- node_modules // 第三方依赖安装目录
|-- public // 第三方静态资源文件存放目录
|-- scripts // 定制化执行脚本
   |-- postBuild.js
|-- src // 源代码存放目录
   |-- __tests__ // 单元测试用例
   |-- assets // 静态资源文件
   |-- components // 公共组件
   |-- frameworks // 整体框架文件
   |-- i18n // 国际化文件
   |-- models // 常量类或数据类型文件
   |-- router // 路由定义文件
   |-- services // 公用逻辑处理或utils类文件
   |-- store // 数据存储操作文件
   |-- views // 页面层级组件
   |-- App.vue
   |-- main.ts
   |-- style.scss
   |-- typing.d.ts
   |-- vite-env.d.ts

国际化

Dragonfly 应用支持多语言切换即国际化功能，国际化资源文件存放在 src/i18n 目录下。

按照地域标识码规范，一个 json 文件对应一种语言，如 zh-CN 对应中文，en-US 对应英文。

在 src/frameworks/Framework.vue 下有一个基于 pinia 和 vue-i18n 实现国际化动态切换的示例：

<script setup lang="ts">
import { useI18n } from 'vue-i18n';
import pinia from '@/store/store';
import { useDataChangeStore } from '@/store/data-change';
import ProjectHeader from '@/components/ProjectHeader.vue';
const $i18n = useI18n();

const dataStore = useDataChangeStore(pinia);

dataStore.$subscribe((mutation) => {
  const data = mutation.events as any;
  if (data.key === 'lang') {
    const langMap = {
      'zh': 'zh-cn',
      'en': 'en-us',
    }
    const newLang = langMap[data.newValue as 'zh' | 'en'];
    if (newLang) {
      localStorage.setItem('lang', newLang);
      $i18n.locale = newLang as any;
      window.location.reload();
    }
  }
});

$i18n.locale = 'zh-cn' as any;
setTimeout(() => {
  $i18n.locale = 'en-us' as any;
}, 3000);

</script>

使用国际化文件只需要用 $t(key) 方法即可，如：

<template>
   <p>{{ $t('home.title') }}</p>
</template>

主题切换

Dragonfly 应用基于 DevUI Theme 提供的强大的主题定制方案能力，封装了多主题切换的功能：

// main.ts

// ...
import { ThemeServiceInit, devuiLightTheme, devuiDarkTheme, devuiGreenTheme, devuiGreenDarkTheme, ThemeService } from 'devui-theme';

const themeService = ThemeServiceInit(
  {
    'light-theme': devuiLightTheme,
    'dark-theme': devuiDarkTheme,
    'green-theme': devuiGreenTheme,
    'green-dark-theme': devuiGreenDarkTheme,
  },
  'light-theme'
) as ThemeService;
themeService.applyTheme(devuiLightTheme);

dataStore.$subscribe((mutation) => {
  const data = mutation.events as any;
  if (data.key === 'theme') {
    const themeMap = {
      light: devuiLightTheme,
      dark: devuiDarkTheme,
    };
    const newTheme = themeMap[data.newValue as 'light' | 'dark'];
    if (newTheme) {
      themeService.applyTheme(newTheme);
    }
  }
});

更多使用方法请参看：

参考链接

DevUI：

• DevUI 组件库
• DevUI 主题库
• DevUI 图标库

Vue：

• Vue3
• Pinia
• Vue-I18n