一、創(chuàng)建項(xiàng)目架構(gòu)
首先使用官方提供的腳手架創(chuàng)建一個(gè)項(xiàng)目在這里插入代碼片，這里我創(chuàng)建的 vue3 + vite + ts 的項(xiàng)目：
npx degit dcloudio/uni-preset-vue#vite-ts project-name
（如命令行創(chuàng)建失敗，請(qǐng)直接訪問(wèn) gitee下載模板）
[gitee](https://gitee.com/dcloud/uni-preset-vue/repository/archive/vite-ts.zip)
二、下載依賴
yarn install
啟動(dòng)
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配置文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-540446.html
"easycom": {
"autoscan": true,
"custom": {
"^u-(.*)": "uview-plus/components/u-$1/u-$1.vue"
}
},
tsconfig.json配置文章來(lái)源地址http://www.zghlxwxcb.cn/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"]
}
到了這里，關(guān)于uniapp+vue3+vite+ts搭建項(xiàng)目引入uni-ui和uviewPlus組件庫(kù)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
