uniapp+vue3+vite+ts+uviewPlus搭建项目

创建项目架构

首先使用官方提供的脚手架创建一个项目，这里我创建的 vue3 + vite + ts 的项目：

npx degit dcloudio/uni-preset-vue#vite-ts project-name

（如命令行创建失败，请直接访问 giteehttps://gitee.com/dcloud/uni-preset-vue/repository/archive/vite-ts.zip 下载模板）

创建完成后，安装依赖并启动项目： 

# 安装依赖
yarn install

引入uview-plus

安装指令 

yarn add uview-plus   //这里我统一使用yarn命令

准备工作

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

// 安装sass
npm i sass -D

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

配置环节

main.ts

import { createSSRApp } from "vue";
import uviewPlus from "uview-plus";
import "uview-plus/index.scss";
import App from "./App.vue";

export function createApp() {
  const app = createSSRApp(App);
  //如果出现类型“typeof import("uview-plus")”的参数不能赋给类型“Plugin_2<[]>”的参数。
  //请改为app.use(uviewPlus as any);
  app.use(uviewPlus);
  return {
    app,
  };
}

 uni.scss

//在src目录下的uni.scss中引入
/* 颜色变量 */
@import 'uview-plus/theme.scss';

 pages.json

"easycom": {
    "autoscan": true,
    "custom": {
	"^u-(.*)": "uview-plus/components/u-$1/u-$1.vue"
    }
  },

 tsconfig.json

{
  "extends": "@vue/tsconfig/tsconfig.json",
  "compilerOptions": {
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "lib": ["esnext", "dom"],
    "types": [
      "@dcloudio/types",
      "@ttou/uview-typings/v3", //加上这段
      "@ttou/uview-typings/refs"//加上这段
    ],
    "typeRoots": ["@/types/index.d.ts"]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}