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);
}
}
});更多使用方法请参看：