uniapp+vue3+vite+ts搭建项目引入uni-ui和uviewPlus组件库

一、创建项目架构
首先使用官方提供的脚手架创建一个项目

在这里插入代码片

，这里我创建的 vue3 + vite + ts 的项目：

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

（如命令行创建失败，请直接访问 gitee下载模板）

[gitee](https://gitee.com/dcloud/uni-preset-vue/repository/archive/vite-ts.zip)

二、下载依赖

yarn install

启动

yarn dev:mp-weixin
yarn dev:h5

三、下载安装包

1.yarn add @types/node -D2.yarn add sass
3.yarn add sass-loader@10-D

引入uni-ui

yarn add @dcloudio/uni-ui

src/package.json 文件配置easycom模式

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

引入uview-plus

yarn add uview-plus

main.ts配置

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

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"]}