【uniapp+vue3+typescript】从0搭建基于uniapp+vue3+typescript的项目框架

2024-09-25 1,366 阅读2分钟

为什么写这篇文章？

因为在网上下载的模版，下载类型后到处飘红。所以，决定自己搭建一下。

【uniapp+vue3+uniapp】从0搭建基于uniapp+vue3+typescript的项目框架

💗 文档

创建项目

使用uniapp提供的创建命令

npx degit dcloudio/uni-preset-vue#vite-ts [项目名称]

截屏2024-09-22 11.40.22.png

安装依赖包 pnpm install

记得查看一下 📃 package.json 中的依赖包版本

  "dependencies": {
    ...
    "vue": "^3.4.21",
    ...
  },
  "devDependencies": {
    "@dcloudio/types": "^3.4.8",
    ......
    "@vue/tsconfig": "^0.1.3",
    "@vue/runtime-core": "^3.4.21",
    "typescript": "^4.9.4",
    "vite": "5.2.8",
    "vue-tsc": "^1.0.24"
  }

发现当前的 vue版本为3.4.21 typescript版本为4.9.4

运行项目

在h5 pnpm run dev:h5

截屏2024-09-22 11.59.55.png

在微信小程序： 添加微信appid
pnpm run dev:mp-weixin后根据提示 ⬇️，将项目导入微信小程序

截屏2024-09-22 12.06.48.png

添加typescript支持

1. 微信小程序 miniprogram-api-typings

安装 npm install miniprogram-api-typings
配置 tsconfig.json types: ["miniprogram-api-typings"]

2. uni-app 类型

@uni-helper/uni-app-types

@uni-helper/uni-app-types 为 Vue v3 uni-app 组件提供 TypeScript 类型
安装 pnpm i -D @uni-helper/uni-app-types

截屏2024-09-22 12.28.51.png

配置 tsconfig.json

...
"compilerOptions": {
    ...,
    "types": [
        "@dcloudio/types", 
        "miniprogram-api-typings", 
        "@uni-helper/uni-app-types",
      ]
}

@uni-helper/uni-ui-types

@uni-helper/uni-ui-types 为 Vue v3 uni-ui 组件提供 TypeScript 类型

安装 👖 uni-ui 库

安装sass pnpm i -D sass pnpm i -D sass-loader
安装 pnpm i @dcloudio/uni-ui

配置 easycom

  // pages.json
  {
       "easycom": {
            "autoscan": true,
            "custom": {
              "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
             }
          },
       },
       ...
   }

使用

截屏2024-09-22 12.47.26.png

截屏2024-09-22 12.49.50.png

安装 @uni-helper/uni-ui-types pnpm i -D @uni-helper/uni-ui-types
配置 tsconfig.json

...
"compilerOptions": {
    ...,
    "types": [
        "@dcloudio/types", 
        "miniprogram-api-typings", 
        "@uni-helper/uni-app-types", 
        "@uni-helper/uni-ui-types"
      ]
}

截屏2024-09-22 13.12.15.png

问题

Deprecation Warning: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0. 配置 vite.config.ts中的css解决

export default defineConfig({
  plugins: [uni()],
  css: {
    preprocessorOptions: {
      scss: {
        api: 'modern-compiler',
      },
    },
  },
});

升级项目中的vue和ts版本

使用 pnpm outdated 查看所有的依赖包
使用 pnpm update [包名] 根据需要升级依赖包