uniapp+ts+vue3+pinia+i18n

原创

已于 2023-09-04 14:40:19 修改 · 663 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#uniapp #vue #typescript

于 2023-08-31 10:41:06 首次发布

本文介绍了如何使用uniapp构建Vue3项目，包括配置pnpm、Vite+ts、Vue3状态管理库pinia、i18n国际化、解决npm/pnpm问题，以及HBuilderX和Vue-i18n的集成，还提供了必要的插件和配置示例。

uniapp+ts+vue3+pinia+i18n

注意：请使用pnpm安装 npm安装pinia会报相关依赖版本错误，也可使用 --legacy-peer-deps、–force解决报错

vscode: pnpm : 无法加载文件 D:\nvm\nodejs\pnpm.ps1，因为在此系统上禁止运行脚本。
解决： set-ExecutionPolicy RemoteSigned  // 执行策略用于控制是否允许在系统上运行脚本，以及允许哪些来源的脚本运行。

创建项目

通过 npx 从 github 下载
官网地址： https://uniapp.dcloud.net.cn/quickstart-cli.html
npx degit dcloudio/uni-preset-vue#vite-ts 项目名称
pnpm i 安装依赖
使用vscode开发，hbuilderx对ts支持不够完善。

vscode安装uni相关插件：

uni-create-view ：快速创建 uni-app 页面
uni-helper uni-app ：代码提示
uniapp 小程序扩展：鼠标悬停查文档
安装 Vue Language Features (Volar) ：Vue3 语法提示插件
安装 TypeScript Vue Plugin (Volar) ：Vue3+TS 插件
工作区禁用 Vue2 的 Vetur 插件(Vue3 插件和 Vue2 冲突)
安装ts类型声明文件 pnpm i -D miniprogram-api-typings @uni-helper/uni-app-types @uni-helper/uni-ui-types
安装uni-ui组件：pnpm i @dcloudio/uni-ui
tsconfig.json配置官网： https://cn.vuejs.org/guide/typescript/overview.html#configuring-tsconfig-json
设置文件关联，把 manifest.json 和 pages.json 设置为 jsonc，解除注释限制json文件不能写注释

{
   
   
  "extends": "@vue/tsconfig/tsconfig.json",
  "compilerOptions": {
   
   
    "sourceMap": true,
    "ignoreDeprecations": "5.0",// 添加这句代码
    "isolatedModules": true,
    "baseUrl": ".",
    "paths": {
   
   
      "@/*": [
        "./src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom"
    ],
    // 类型声明文件
    "types": [
      "@dcloudio/types",  // uni-app API 类型
      "miniprogram-api-typings", // 原生微信小程序类型
      "@uni-helper/uni-app-types", // uni-app 组件类型
      "@uni-helper/uni-ui-types" // uni-ui 组件类型  
    ]
  },
  // vue 编译器类型，校验标签类型
  "vueCompilerOptions": {
   
   
    "nativeTags": ["block", "component", "template", "slot"], 
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue"
  ]
}