deploy

.vitepress/config.ts

@@ -156,18 +156,14 @@ _hmt.push(['_requirePlugin', 'UrlChangeTracker', {
             { text: '错误日志', link: '/guide/error-log' },
             { text: '自定义字体', link: '/guide/font' },
             { text: '使用 Composition API 开发', link: '/guide/vue3-composition-api' },
-            // {
-            //   text: '替换 UI 组件库',
-            //   items: [
-            //     { text: '替换为 Ant Design Vue', link: '/guide/replace-to-antd' },
-            //     { text: '替换为 Arco Design Vue', link: '/guide/replace-to-arco' },
-            //     { text: '替换为 Naive UI', link: '/guide/replace-to-naive' },
-            //     { text: '替换为 TDesign', link: '/guide/replace-to-tdesign' },
-            //     { text: '替换为 Vexip UI', link: '/guide/replace-to-vexip' },
-            //     { text: '替换为 iDux', link: '/guide/replace-to-idux' },
-            //   ],
-            //   collapsed: true,
-            // },
+            {
+              text: '替换 UI 组件库',
+              items: [
+                { text: '替换为 Varlet', link: '/guide/replace-to-varlet' },
+                { text: '替换为 NutUI', link: '/guide/replace-to-nut' },
+              ],
+              collapsed: true,
+            },
           ],
           collapsed: false,
         },

components/index.md

@@ -6,18 +6,14 @@
 
 基础组件由 [Vant](https://vant-ui.github.io/vant) 提供。
 
-<!-- :::warning 替换组件库
+:::warning 替换组件库
 如果你不喜欢 Vant ，或者你想要将老项目迁移到 Fantastic-mobile 上，但老项目里使用的组件库并不是 Vant ，框架也提供了组件库替换移方案：
 
-- 《[替换为 Ant Design Vue](/guide/replace-to-antd)》
-- 《[替换为 Arco Design Vue](/guide/replace-to-arco)》
-- 《[替换为 Naive UI](/guide/replace-to-naive)》
-- 《[替换为 TDesign](/guide/replace-to-tdesign)》
-- 《[替换为 Vexip UI](/guide/replace-to-vexip)》
-- 《[替换为 iDux](/guide/replace-to-idux)》
+- 《[替换为 Varlet](/guide/replace-to-varlet)》
+- 《[替换为 NutUI](/guide/replace-to-nut)》
 
 如果你想使用的组件库不在上述方案中，可以通过参考任何一份方案，理解替换的整理思路，并自行替换，别担心会很复杂，我们已经将大部分工作做好了。
-::: -->
+:::
 
 ## 内建组件
 

guide/replace-to-nut.md

@@ -0,0 +1,127 @@
+# 替换为 NutUI
+
+由于框架默认使用的是 Vant 组件库，并且演示源码中大量示例也使用了 Vant，如果你需要使用 [NutUI](https://nutui.jd.com/h5/vue/4x)，请拉取框架源码分支，或者到 [Github Releases](https://github.com/fantastic-mobile/basic/releases) 页面下载框架源码压缩包。
+
+专业版用户也同样，请到专业版仓库下载框架源码。
+
+## 安装
+
+```sh
+# 安装依赖
+pnpm install
+
+# 安装 NutUI
+pnpm add @nutui/nutui @nutui/touch-emulator
+```
+
+## 代码调整
+
+::: details 基础版
+
+整体修改 `/src/ui-provider/index.ts` 文件
+
+```ts
+import type { App } from 'vue'
+import NutUI from '@nutui/nutui'
+import '@nutui/nutui/dist/style.css'
+import '@nutui/touch-emulator'
+
+function install(app: App) {
+  app.use(NutUI)
+}
+
+export default { install }
+```
+
+整体修改 `/src/ui-provider/index.vue` 文件
+
+```vue
+<script setup lang="ts">
+import { Locale } from '@nutui/nutui'
+import zhCN from '@nutui/nutui/dist/packages/locale/lang/zh-CN'
+import useSettingsStore from '@/store/modules/settings'
+
+const settingsStore = useSettingsStore()
+
+Locale.use('zh-CN', zhCN)
+</script>
+
+<template>
+  <NutConfigProvider :theme="settingsStore.currentColorScheme" class="min-h-vh supports-[(min-height:100dvh)]:min-h-dvh">
+    <slot />
+  </NutConfigProvider>
+</template>
+```
+
+:::
+
+::: details 专业版
+
+整体修改 `/src/ui-provider/index.ts` 文件
+
+```ts
+import type { App } from 'vue'
+import NutUI from '@nutui/nutui'
+import '@nutui/nutui/dist/style.css'
+import '@nutui/touch-emulator'
+import zhCN from '@nutui/nutui/dist/packages/locale/lang/zh-CN'
+import enUS from '@nutui/nutui/dist/packages/locale/lang/en-US'
+
+function install(app: App) {
+  app.use(NutUI)
+}
+
+// 此处的对象属性和 src/locales/index.ts 中的 messages 对象属性一一对应
+const locales: Record<string, any> = {
+  'zh-cn': zhCN,
+  'en-us': enUS,
+}
+
+export default { install }
+export { locales }
+```
+
+整体修改 `/src/ui-provider/index.vue` 文件
+
+```vue
+<script setup lang="ts">
+import { Locale } from 'vant'
+import { locales } from './index'
+import useSettingsStore from '@/store/modules/settings'
+
+const settingsStore = useSettingsStore()
+
+watch(() => settingsStore.lang, () => {
+  Locale.use(settingsStore.lang, locales[settingsStore.lang])
+})
+</script>
+
+<template>
+  <NutConfigProvider :theme="settingsStore.currentColorScheme" class="min-h-vh supports-[(min-height:100dvh)]:min-h-dvh">
+    <slot />
+  </NutConfigProvider>
+</template>
+```
+
+:::
+
+## 修改登录页
+
+由于登录页使用了 Vant 组件，并且删除会导致框架无法正常使用，所以此处需要开发者自行修改或者重新制作登录页，或者也可以参考下方示例中已经修改好的登录页。
+
+## 卸载
+
+```sh
+# 卸载 Vant
+pnpm remove vant @vant/touch-emulator
+```
+
+## 完成
+
+至此，你已经将框架中的 Vant 组件库替换为 NutUI 组件库，并且可以开始使用 NutUI 进行业务开发了。
+
+## 示例
+
+如果对上述的步骤还有不清楚的地方，可以访问[此仓库](https://github.com/fantastic-mobile/nut-example)查看示例源码，以及[此链接](https://fantastic-mobile.github.io/nut-example/)查看示例网站。
+
+![](/ui-nut.png){data-zoomable}

guide/replace-to-varlet.md

@@ -0,0 +1,137 @@
+# 替换为 Varlet
+
+由于框架默认使用的是 Vant 组件库，并且演示源码中大量示例也使用了 Vant，如果你需要使用 [Varlet](https://varlet.pages.dev)，请拉取框架源码分支，或者到 [Github Releases](https://github.com/fantastic-mobile/basic/releases) 页面下载框架源码压缩包。
+
+专业版用户也同样，请到专业版仓库下载框架源码。
+
+## 安装
+
+```sh
+# 安装依赖
+pnpm install
+
+# 安装 NutUI
+pnpm add @varlet/ui @varlet/touch-emulator
+```
+
+## 代码调整
+
+::: details 基础版
+
+整体修改 `/src/ui-provider/index.ts` 文件
+
+```ts
+import type { App } from 'vue'
+import Varlet from '@varlet/ui'
+import '@varlet/ui/es/style'
+import '@varlet/touch-emulator'
+
+function install(app: App) {
+  app.use(Varlet)
+}
+
+export default { install }
+```
+
+整体修改 `/src/ui-provider/index.vue` 文件
+
+```vue
+<script setup lang="ts">
+import { Locale, StyleProvider, Themes } from '@varlet/ui'
+import useSettingsStore from '@/store/modules/settings'
+
+const settingsStore = useSettingsStore()
+
+watch(() => settingsStore.currentColorScheme, (val) => {
+  if (val === 'light') {
+    StyleProvider(null)
+  }
+  else {
+    StyleProvider(Themes.dark)
+  }
+})
+</script>
+
+<template>
+  <VarLocaleProvider locale="zh-CN" :messages="Locale.zhCN" class="min-h-vh supports-[(min-height:100dvh)]:min-h-dvh">
+    <slot />
+  </VarLocaleProvider>
+</template>
+```
+
+:::
+
+::: details 专业版
+
+整体修改 `/src/ui-provider/index.ts` 文件
+
+```ts
+import type { App } from 'vue'
+import Varlet, { Locale } from '@varlet/ui'
+import '@varlet/ui/es/style'
+import '@varlet/touch-emulator'
+import enUS from 'vant/es/locale/lang/en-US'
+import zhCN from 'vant/es/locale/lang/zh-CN'
+
+function install(app: App) {
+  app.use(Varlet)
+}
+
+// 此处的对象属性和 src/locales/index.ts 中的 messages 对象属性一一对应
+const locales: Record<string, any> = {
+  'zh-cn': Locale.zhCN,
+  'en-us': Locale.enUS,
+}
+
+export default { install }
+export { locales }
+```
+
+整体修改 `/src/ui-provider/index.vue` 文件
+
+```vue
+<script setup lang="ts">
+import { locales } from './index'
+import useSettingsStore from '@/store/modules/settings'
+
+const settingsStore = useSettingsStore()
+
+watch(() => settingsStore.currentColorScheme, (val) => {
+  if (val === 'light') {
+    StyleProvider(null)
+  }
+  else {
+    StyleProvider(Themes.dark)
+  }
+})
+</script>
+
+<template>
+  <VarLocaleProvider :locale="settingsStore.lang" :messages="locales[settingsStore.lang]" class="min-h-vh supports-[(min-height:100dvh)]:min-h-dvh">
+    <slot />
+  </VarLocaleProvider>
+</template>
+```
+
+:::
+
+## 修改登录页
+
+由于登录页使用了 Vant 组件，并且删除会导致框架无法正常使用，所以此处需要开发者自行修改或者重新制作登录页，或者也可以参考下方示例中已经修改好的登录页。
+
+## 卸载
+
+```sh
+# 卸载 Vant
+pnpm remove vant @vant/touch-emulator
+```
+
+## 完成
+
+至此，你已经将框架中的 Vant 组件库替换为 Varlet 组件库，并且可以开始使用 Varlet 进行业务开发了。
+
+## 示例
+
+如果对上述的步骤还有不清楚的地方，可以访问[此仓库](https://github.com/fantastic-mobile/varlet-example)查看示例源码，以及[此链接](https://fantastic-mobile.github.io/varlet-example/)查看示例网站。
+
+![](/ui-varlet.png){data-zoomable}