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

这篇具有很好参考价值的文章主要介绍了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 -D
2.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";

export function createApp() {
  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配置文章来源地址https://www.toymoban.com/news/detail-540446.html

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