uniapp+vue3+ts+uview-plus搭建项目步骤

创建项目

使用Vue3/Vite版，创建以 typescript 开发的工程

下载仓库 · DCloud/uni-preset-vue - Gitee.com

node版本：v16.18.0

npm版本： v8.19.2

依赖下载

解压之后，在vscode打开

 

通过终端运行 npm 命令下载依赖：npm install

下载完成之后，会多出来一个node_modules文件夹

tsconfig.json文件

如遇到tsconfig.json有报错提示：

Option 'importsNotUsedAsValues' is deprecated and will stop functioning in TypeScript 5.5. Specify compilerOption '"ignoreDeprecations": "5.0"' to silence this error.Use 'verbatimModuleSyntax' instead.ts

译文：警告消息与 TypeScript 编译器选项的弃用有关importsNotUsedAsValues，并建议改用该verbatimModuleSyntax选项。要在 TypeScript 5.5 之前使错误消息静音，您可以添加ignoreDeprecations": "5.0"到编译器选项；

//在tsconfig.json文件中"compilerOptions"配置项内添加"ignoreDeprecations": "5.0""compilerOptions": {"ignoreDeprecations": "5.0"},

基本配置

打开 vite.config.ts 配置一下 alias

// vits.config.ts
import { defineConfig } from "vite"
import uni from "@dcloudio/vite-plugin-uni"
import { resolve } from "path"export default defineConfig({resolve: {alias: {"@": resolve(__dirname, "src"),},extensions: ['.mjs', '.js', '.jsx', '.json', '.vue'],},plugins: [uni()，],
})

 alias 配置中的 path 和 __dirname 会报红，在终端安装一下 @types/node即可

npm i -D @types/node

安装相关类型声明文件（看个人需要）

微信小程序 API 的 TypeScript 类型定义文件

GitHub - wechat-miniprogram/api-typings: Type definitions for APIs of Wechat Mini Program in TypeScript

npm i -D @types/wechat-miniprogram

uni-helper相关类型文件

uni-app-types | Uni Helper (uni-helper.js.org)

npm i -D @uni-helper/uni-app-types //提供 uni-app 组件类型

npm i -D @uni-helper/uni-cloud-types //提供 uni-cloud 组件类型

npm i -D @uni-helper/uni-ui-types //提供 uni-ui 组件类型

 配置tsconfig.json

{"extends": "@vue/tsconfig/tsconfig.json","compilerOptions": {"ignoreDeprecations": "5.0","sourceMap": true,"baseUrl": ".","paths": {"@/*": ["./src/*"]},"lib": ["esnext", "dom"],"types": [// "miniprogram-api-typings", // 原生微信小程序类型"@dcloudio/types", // uni-app API 类型"@uni-helper/uni-app-types", // uni-app 组件类型]},"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

安装unplugin-auto-import自动导入插件

GitHub - unplugin/unplugin-auto-import: Auto import APIs on-demand for Vite, Webpack and Rollup

npm i -D unplugin-auto-import

在不使用自动导入的情况下，我们每使用到一个vue或者uniapp的方法的时候，就需要import一下。 

// 不使用自动导入的用法
<script lang="ts" setup>
import { ref } form 'vue'
import { onLoad } from '@dcloudio/uni-app'const name = ref('')onLoad(() => {console.log(name.value)
})
</script>// 使用自动导入的用法
<script lang="ts" setup>
const name = ref('')onLoad(() => {console.log(name.value)
})
</script>

项目根目录创建 typings 目录，然后配置 vite.config.ts

import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
// 加上下面这一行
import AutoImport from 'unplugin-auto-import/vite'// https://vitejs.dev/config/
import { resolve } from "path"
// https://vitejs.dev/config/
export default defineConfig({base: "/couponPromotion",plugins: [uni(),// ---- 配置自动引入 ----AutoImport({include: [/\.[tj]sx?$/, // .ts, .tsx, .js, .jsx/\.vue$/,/\.vue\?vue/, // .vue/\.md$/, // .md],imports: ['vue', 'uni-app'],dts: 'typings/auto-imports.d.ts',})],
})

在 tsconfig.json 中添加如下配置

{"include": ["src/**/*.ts","src/**/*.d.ts","src/**/*.tsx","src/**/*.vue",// 加上下面两项"typings/**/*.ts","typings/**/*.d.ts"],
}

当我们运行项目后，在 typings 目录中自动生成了一个 auto-imports.d.ts 文件

 

如果打开该文件之后发现里面的 createApp 报红，在 tsconfig.json 文件compilerOptions 选项中加入 "skipLibCheck": true

  "compilerOptions": {"skipLibCheck": true,},

建议关闭项目，然后重新打开项目，不然 .vue文件中可能还是会标红

 

安装uview-plus

注意： 此安装方式必须要按照npm方式安装的配置中的说明配置了才可用，且项目名称不能有中文字符。

// 安装
npm install uview-plus
npm install dayjs
npm install clipboard

 uview-plus依赖SCSS，所以必须要安装此插件，否则无法正常运行

// 安装sass
npm i sass -D// 安装sass-loader，注意需要版本10，否则可能会导致vue与sass的兼容问题而报错
npm i sass-loader@10 -D

引入uview-plus主JS库

在项目src目录中的main.js中，引入并使用uview-plus的JS库

注意：这两行要放在const app = createSSRApp(App)之后。

import { createSSRApp } from "vue";
import uviewPlus from 'uview-plus'import App from "./App.vue";
export function createApp() {const app = createSSRApp(App);app.use(uviewPlus);return {app,};
}

 引入uview-plus的全局SCSS主题文件

 在项目根目录的uni.scss中引入此文件

/* uni.scss */
@import 'uview-plus/theme.scss';

 引入uview-plus基础样式

 在App.vue中首行的位置引入，注意给style标签加入lang="scss"属性

// App.vue
<style lang="scss">/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */@import "uview-plus/index.scss";
</style>

配置easycom组件模式

需要在项目src目录的pages.json中进行 

温馨提示：

uni-app为了调试性能的原因，修改easycom规则不会实时生效，配置完后，您需要重启HX或者重新编译项目才能正常使用uview-plus的功能。

请确保您的pages.json中只有一个easycom字段，否则请自行合并多个引入规则。

// pages.json
{"easycom": {// 注意一定要放在custom里，否则无效，https://ask.dcloud.net.cn/question/131175"custom": {"^u--(.*)": "uview-plus/components/u-$1/u-$1.vue","^up-(.*)": "uview-plus/components/u-$1/u-$1.vue","^u-([^-].*)": "uview-plus/components/u-$1/u-$1.vue"}},// 此为本身已有的内容"pages": [// ......]
}

修改env.d.ts文件

注意：

配置完后，可以发现在mian.ts中引入uview-plus时会提示ts报错：无法找到模块“uview-plus”的声明文件

/// <reference types="vite/client" />declare module '*.vue' {import { DefineComponent } from 'vue'// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-typesconst component: DefineComponent<{}, {}, any>export default component
}declare module "uview-plus";

安装uni-ui组件库

uni-app官网 (dcloud.net.cn)

npm i @dcloudio/uni-ui   或   yarn add @dcloudio/uni-ui

配置自动导入组件

// pages.json
{"easycom": {//是否开启自动导入"autoscan": true,"custom": {"^u--(.*)": "uview-plus/components/u-$1/u-$1.vue","^up-(.*)": "uview-plus/components/u-$1/u-$1.vue","^u-([^-].*)": "uview-plus/components/u-$1/u-$1.vue","^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue" // uni-ui 规则}},"pages": [],
}

安装类型声明文件

npm i -D @uni-helper/uni-ui-types

配置类型声明文件

// tsconfig.json
{"compilerOptions": {"types": ["@dcloudio/types","@uni-helper/uni-app-types","@uni-helper/uni-ui-types" // uni-ui组件类型]}
}