Skip to content

basic-uniapp-v3
basic-uniapp-v3
提交 f7188792 作者: 方治民
操作

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

上级 8541d90d
正在显示 包含 189 行增加 和 36 行删除
.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 0 → 100644
{
"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 0 → 100644
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 0 → 100644
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 0 → 100644
import { genMessage } from '../helper'
const modules = import.meta.globEager('./zh-Hans/**/*.json')
export default {
message: {
...genMessage(modules, 'zh-Hans'),
},
}
src/locales/lang/zh-Hans/common.json 0 → 100644
{
"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 0 → 100644
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 0 → 100644
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']
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论