feat: 集成 pinia、vue-i18n 及文档相关更新

.env.development

 # API 接口地址
-VITE_GLOB_API_URL=http://192.168.0.151:8181
+VITE_GLOB_API_URL=http://192.168.0.156:8081
 
 # API 接口地址前缀
 VITE_GLOB_API_URL_PREFIX=/api

.eslintrc.js

@@ -37,5 +37,6 @@ module.exports = {
             },
         ],
         'vue/singleline-html-element-content-newline': 0,
+        'vue/multi-word-component-names': 0,
     },
 }

.vscode/settings.json

+{
+    "npm.packageManager": "pnpm",
+    "i18n-ally.localesPaths": ["src/locales/lang"],
+    "i18n-ally.keystyle": "nested",
+    "i18n-ally.readonly": true,
+    "i18n-ally.sortKeys": true,
+    "i18n-ally.namespace": true,
+    "i18n-ally.pathMatcher": "{locale}/{namespaces}.{ext}",
+    "i18n-ally.enabledParsers": ["ts", "json"],
+    "i18n-ally.sourceLanguage": "en",
+    "i18n-ally.displayLanguage": "zh-Hans",
+    "i18n-ally.enabledFrameworks": ["vue", "react"]
+}

README.md

@@ -7,14 +7,15 @@
 
 <!-- prettier-ignore -->
 - Visual Studio Code [latest](https://code.visualstudio.com)
-- HBuilderX [alpha](https://www.dcloud.io/hbuilderx.html)
-- [常用插件清单](./doc/plugins.md)
+- HBuilderX [latest](https://www.dcloud.io/hbuilderx.html)
+- 👉 [常用插件清单](./doc/plugins.md)
 
 ## 开始
 
 <!-- prettier-ignore -->
 - [开发规范说明](./doc/workflow.md)
 - [技术栈说明](./doc/technique.md)
+- 👉 [参考 hello-uni-app](https://github.com/dcloudio/hello-uniapp) [介绍](https://uniapp.dcloud.net.cn/)
 
 ---
 
@@ -26,10 +27,10 @@
 - [x] 完善网络请求相关配置
 - [x] 集成 [Pont](https://github.com/alibaba/pont)
 - [ ] 适配上传/下载接口的自动化生成模板（包装 uni.uploadFile 与 uni.downloadFile 方法实现）
-- [ ] 集成 pinia
-- [ ] 集成 vue-i18n
+- [x] 集成 [Pinia](https://pinia.vuejs.org/)
+- [x] 集成 [vue-i18n](https://github.com/intlify/vue-i18n-next)
 - [ ] 完善页面主体布局
 - [ ] 设计模块化权限控制
 - [ ] 接入 [消息推送](https://uniapp.dcloud.net.cn/unipush.html)
 - [ ] 接入 [APP 升级中心](https://uniapp.dcloud.net.cn/uniCloud/upgrade-center.html)
-- [ ] 跟进官方更新进度，将 uni-app 依赖升级到 3.0 正式版，[日志](https://uniapp.dcloud.io/release-note-alpha.html)
+- [x] 跟进官方更新进度，将 uni-app 依赖升级到 3.0 正式版，[日志](https://uniapp.dcloud.io/release.html)

build/vite/autoImport.ts

@@ -12,6 +12,7 @@ export function configAutoImportPlugin(): Plugin {
         dts: 'types/auto-imports.d.ts',
         imports: [
             'vue',
+            'vue-i18n',
             'uni-app',
             {
                 '/@/config/app': ['$app'],

build/vite/uni.ts

@@ -26,9 +26,7 @@ function generateUniComponentsTypes() {
 
     const formatted = prettier.format(content, {
         parser: 'typescript',
-        tabWidth: 4,
-        semi: false,
-        singleQuote: true,
+        ...require('../../prettier.config'),
     })
     fs.writeFileSync('./types/uni-components.d.ts', formatted, 'utf8')
 }

doc/plugins.md

@@ -10,8 +10,8 @@
 - ⭐Prettier - Code formatter
 - ⭐EditorConfig
 - ⭐TODO Highlight
-- ⭐Volar
-- ⭐[pont](https://marketplace.visualstudio.com/items?itemName=jasonHzq.vscode-pont) 接口自动化工具，**必装**
+- ⭐Volar (Vue3 + TS 开发首选)
+- ⭐[Pont-engine](https://marketplace.visualstudio.com/items?itemName=jasonHzq.vscode-pont) 接口自动化工具，**必装**
 
 - ESLint
 - stylelint

doc/technique.md

@@ -4,7 +4,7 @@
 
 <!-- prettier-ignore -->
 - [Vue v3.x](https://v3.vuejs.org/guide/introduction.html)
-- [uni-app@vue3 v3.x-alpha](https://uniapp.dcloud.io/tutorial/migration-to-vue3.html), 依赖 `HBuilderX Alpha` 版本编辑器
+- [uni-app@vue3 v3.x](https://uniapp.dcloud.io/tutorial/migration-to-vue3.html), 依赖 `HBuilderX v3.4.x` 版本编辑器
 - [TypeScript](https://www.typescriptlang.org/zh/)
 - [Sass](https://www.sass.hk/)
 
@@ -36,7 +36,7 @@
 ### 构建工具
 
 <!-- prettier-ignore -->
-- [HBuilderX Alpha](https://download1.dcloud.net.cn/hbuilderx/changelog/3.4.2.20220310-alpha.html)
+- [HBuilderX Latest](https://www.dcloud.io/hbuilderx.html)
 - [Vite v2.x](https://vitejs.dev)
 
 ### 其他插件

package.json

@@ -62,40 +62,43 @@
         }
     },
     "dependencies": {
-        "@dcloudio/uni-app": "^3.0.0-alpha-3040720220422003",
-        "@dcloudio/uni-app-plus": "^3.0.0-alpha-3040720220422003",
-        "@dcloudio/uni-components": "^3.0.0-alpha-3040720220422003",
-        "@dcloudio/uni-h5": "^3.0.0-alpha-3040720220422003",
-        "@dcloudio/uni-mp-alipay": "^3.0.0-alpha-3040720220422003",
-        "@dcloudio/uni-mp-baidu": "^3.0.0-alpha-3040720220422003",
-        "@dcloudio/uni-mp-kuaishou": "^3.0.0-alpha-3040720220422003",
-        "@dcloudio/uni-mp-lark": "^3.0.0-alpha-3040720220422003",
-        "@dcloudio/uni-mp-qq": "^3.0.0-alpha-3040720220422003",
-        "@dcloudio/uni-mp-toutiao": "^3.0.0-alpha-3040720220422003",
-        "@dcloudio/uni-mp-weixin": "^3.0.0-alpha-3040720220422003",
-        "@dcloudio/uni-quickapp-webview": "^3.0.0-alpha-3040720220422003",
+        "@dcloudio/uni-app": "^3.0.0-alpha-3040820220426002",
+        "@dcloudio/uni-app-plus": "^3.0.0-alpha-3040820220426002",
+        "@dcloudio/uni-components": "^3.0.0-alpha-3040820220426002",
+        "@dcloudio/uni-h5": "^3.0.0-alpha-3040820220426002",
+        "@dcloudio/uni-mp-alipay": "^3.0.0-alpha-3040820220426002",
+        "@dcloudio/uni-mp-baidu": "^3.0.0-alpha-3040820220426002",
+        "@dcloudio/uni-mp-kuaishou": "^3.0.0-alpha-3040820220426002",
+        "@dcloudio/uni-mp-lark": "^3.0.0-alpha-3040820220426002",
+        "@dcloudio/uni-mp-qq": "^3.0.0-alpha-3040820220426002",
+        "@dcloudio/uni-mp-toutiao": "^3.0.0-alpha-3040820220426002",
+        "@dcloudio/uni-mp-weixin": "^3.0.0-alpha-3040820220426002",
+        "@dcloudio/uni-quickapp-webview": "^3.0.0-alpha-3040820220426002",
         "@vueuse/core": "^8.3.1",
         "axios": "^0.26.1",
         "dayjs": "^1.11.1",
         "lodash-es": "^4.17.21",
         "mockjs": "^1.1.0",
+        "pinia": "^2.0.13",
         "qs": "^6.10.3",
-        "vue": "^3.2.33"
+        "vue": "^3.2.33",
+        "vue-i18n": "^9.2.0-beta.35",
+        "vue-types": "^4.1.1"
     },
     "devDependencies": {
-        "@commitlint/cli": "^16.2.3",
-        "@commitlint/config-conventional": "^16.2.1",
+        "@commitlint/cli": "^16.2.4",
+        "@commitlint/config-conventional": "^16.2.4",
         "@dcloudio/types": "^2.6.4",
-        "@dcloudio/uni-automator": "^3.0.0-alpha-3040720220422003",
-        "@dcloudio/uni-cli-shared": "^3.0.0-alpha-3040720220422003",
+        "@dcloudio/uni-automator": "^3.0.0-alpha-3040820220426002",
+        "@dcloudio/uni-cli-shared": "^3.0.0-alpha-3040820220426002",
         "@dcloudio/uni-helper-json": "^1.0.13",
-        "@dcloudio/vite-plugin-uni": "^3.0.0-alpha-3040720220422003",
+        "@dcloudio/vite-plugin-uni": "^3.0.0-alpha-3040820220426002",
         "@types/lodash-es": "^4.17.6",
         "@types/mockjs": "^1.0.6",
         "@types/prettier": "^2.6.0",
         "@types/qs": "^6.9.7",
-        "@typescript-eslint/eslint-plugin": "^5.20.0",
-        "@typescript-eslint/parser": "^5.20.0",
+        "@typescript-eslint/eslint-plugin": "^5.21.0",
+        "@typescript-eslint/parser": "^5.21.0",
         "commitizen": "^4.2.4",
         "conventional-changelog-cli": "^2.2.2",
         "cz-conventional-changelog": "^3.3.0",
@@ -106,7 +109,7 @@
         "eslint-plugin-vue": "^8.7.1",
         "husky": "^7.0.4",
         "less": "^4.1.2",
-        "lint-staged": "^12.4.0",
+        "lint-staged": "^12.4.1",
         "npm-run-all": "^4.1.5",
         "pont-engine": "^1.3.1",
         "postcss": "^8.4.12",
@@ -115,7 +118,7 @@
         "prettier": "^2.6.2",
         "rimraf": "^3.0.2",
         "sort-package-json": "^1.55.0",
-        "stylelint": "^14.7.1",
+        "stylelint": "^14.8.0",
         "stylelint-config-html": "^1.0.0",
         "stylelint-config-prettier": "^9.0.3",
         "stylelint-config-recommended": "^7.0.0",
@@ -124,7 +127,7 @@
         "stylus": "^0.56.0",
         "typescript": "^4.6.3",
         "unplugin-auto-import": "^0.7.1",
-        "vite": "^2.9.5",
+        "vite": "^2.9.6",
         "vue-eslint-parser": "^8.3.0"
     },
     "engines": {

src/locales/helper.ts

+import { set } from 'lodash-es'
+
+export function genMessage(langs: Record<string, Record<string, any>>, prefix = 'lang') {
+    const obj: Recordable = {}
+
+    Object.keys(langs).forEach((key) => {
+        const langFileModule = langs[key].default
+        let fileName = key.replace(`./${prefix}/`, '').replace(/^\.\//, '')
+        const lastIndex = fileName.lastIndexOf('.')
+        fileName = fileName.substring(0, lastIndex)
+        const keyList = fileName.split('/')
+        const moduleName = keyList.shift()
+        const objKey = keyList.join('.')
+
+        if (moduleName) {
+            if (objKey) {
+                set(obj, moduleName, obj[moduleName] || {})
+                set(obj[moduleName], objKey, langFileModule)
+            } else {
+                set(obj, moduleName, langFileModule || {})
+            }
+        }
+    })
+    return obj
+}

src/locales/index.ts

+import type { App } from 'vue'
+import type { I18n, I18nOptions } from 'vue-i18n'
+import { createI18n } from 'vue-i18n'
+
+export let i18n: ReturnType<typeof createI18n>
+
+async function createI18nOptions(): Promise<I18nOptions> {
+    const locale = uni.getLocale() || 'zh-Hans'
+    const defaultLocal = await import(`./lang/${locale}.ts`)
+    const message = defaultLocal.default?.message ?? {}
+
+    return {
+        locale,
+        messages: {
+            [locale]: message,
+        },
+        sync: true,
+        legacy: false,
+        missingWarn: false,
+        globalInjection: true,
+        silentFallbackWarn: true,
+        silentTranslationWarn: true,
+    }
+}
+
+// setup i18n instance with glob
+export async function setupI18n(app: App) {
+    const options = await createI18nOptions()
+    i18n = createI18n(options) as I18n
+    app.use(i18n)
+}

src/locales/lang/zh-Hans.ts

+import { genMessage } from '../helper'
+
+const modules = import.meta.globEager('./zh-Hans/**/*.json')
+
+export default {
+    message: {
+        ...genMessage(modules, 'zh-Hans'),
+    },
+}

src/locales/lang/zh-Hans/app.json

+{
+    "hello": "你好"
+}

src/locales/lang/zh-Hans/common.json

+{
+    "okText": "确认",
+    "closeText": "关闭",
+    "cancelText": "取消",
+    "loadingText": "加载中...",
+    "saveText": "保存",
+    "delText": "删除",
+    "resetText": "重置",
+    "searchText": "搜索",
+    "queryText": "查询",
+
+    "inputText": "请输入",
+    "chooseText": "请选择",
+
+    "redo": "刷新",
+    "back": "返回"
+}

src/main.ts

 import { createSSRApp } from 'vue'
+import * as Pinia from 'pinia'
 
 import App from './App.vue'
 import { setupAppConfig } from '/@/config/app'
+import { setupStore } from '/@/store'
+import { setupI18n } from '/@/locales'
 
 export function createApp() {
     const app = createSSRApp(App)
@@ -11,7 +14,14 @@ export function createApp() {
     setupAppConfig()
     // #endif
 
+    // 配置 store
+    setupStore(app)
+
+    // 配置 i18n
+    setupI18n(app)
+
     return {
         app,
+        Pinia,
     }
 }

src/pages/index/index.vue

@@ -13,6 +13,7 @@
         <view class="text-area">
             <text class="title">{{ title }}</text>
         </view>
+        <view class="title">{{ $t('app.hello') }}</view>
     </view>
 </template>
 

src/store/index.ts

+import type { App } from 'vue'
+import { createPinia } from 'pinia'
+
+const store = createPinia()
+
+export function setupStore(app: App<Element>) {
+    app.use(store)
+}
+
+export { store }

src/store/modules/app.ts

+import { defineStore } from 'pinia'
+import { store } from '/@/store'
+
+interface AppState {
+    // Page loading status
+    pageLoading: boolean
+}
+
+export const useAppStore = defineStore({
+    id: 'app',
+    state: (): AppState => ({
+        pageLoading: false,
+    }),
+    getters: {
+        getPageLoading(): boolean {
+            return this.pageLoading
+        },
+    },
+    actions: {
+        setPageLoading(loading: boolean): void {
+            this.pageLoading = loading
+        },
+    },
+})
+
+// Need to be used outside the setup
+export function useAppStoreWithOut() {
+    return useAppStore(store)
+}

types/auto-imports.d.ts

@@ -72,6 +72,7 @@ declare global {
   const useAttrs: typeof import('vue')['useAttrs']
   const useCssModule: typeof import('vue')['useCssModule']
   const useCssVars: typeof import('vue')['useCssVars']
+  const useI18n: typeof import('vue-i18n')['useI18n']
   const useSlots: typeof import('vue')['useSlots']
   const watch: typeof import('vue')['watch']
   const watchEffect: typeof import('vue')['watchEffect']