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>
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

配置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”的声明文件

/// 
 
declare module '*.vue' {
  import { DefineComponent } from 'vue'
  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
  const 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组件类型
    ]
  }
}