一.創(chuàng)建uniapp項(xiàng)目
通過vue-cli創(chuàng)建
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project
二.安裝依賴：
1.pnpm i
2.運(yùn)行項(xiàng)目：
將package.json的
"dev:mp-weixin": "uni -p mp-weixin",
改為 "serve": "uni -p mp-weixin",
后續(xù)可以用pnpm run serve啟動微信小程序開發(fā)工具
3.導(dǎo)入微信小程序開發(fā)工具
打開微信開發(fā)者工具, 導(dǎo)入 dist\dev\mp-weixin 運(yùn)行
三. TS 類型校驗(yàn)
在tsconfig.json文件中"compilerOptions"配置項(xiàng)內(nèi)添加"ignoreDeprecations": “5.0”
"compilerOptions": {
"ignoreDeprecations": "5.0"
},
額外配置Ts類型校驗(yàn)：
- 安裝類型聲明文件：
pnpm i -D @types/wechat-miniprogram @uni-helper/uni-app-types
2. 配置tsconfig.json：
// tsconfig.json
{
"extends": "@vue/tsconfig/tsconfig.json",
"compilerOptions": {
"ignoreDeprecations": "5.0",
"sourceMap": true,
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
},
"lib": ["esnext", "dom"],
"types": [
"@dcloudio/types",
"@types/wechat-miniprogram",
"@uni-helper/uni-app-types"
]
},
// vue 編譯器類型，校驗(yàn)標(biāo)簽類型
"vueCompilerOptions": {
"nativeTags": ["block","component","template","slot"],
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}
在配置完成后，vue組件就會提示報(bào)錯信息
四. JSON 注釋問題
在vscode面板中，點(diǎn)擊右小角設(shè)置按鈕→點(diǎn)擊設(shè)置→在搜索設(shè)置中搜索“文件關(guān)聯(lián)”→找到Files: Associations的配置項(xiàng)→點(diǎn)擊添加項(xiàng)→把 manifest.json 和 pages.json 設(shè)置為 jsonc即可；
五. 安裝uview-plus
- 安裝
pnpm add uview-plus
pnpm add dayjs
pnpm add clipboard
注意： 此安裝方式必須要按照npm方式安裝的配置中的說明配置了才可用，且項(xiàng)目名稱不能有中文字符。
因?yàn)閡view-plus依賴SCSS，所以必須要安裝此插件，否則無法正常運(yùn)行。
// 安裝sass
pnpm add sass -D
// 安裝sass-loader，注意需要版本10，否則可能會導(dǎo)致vue與sass的兼容問題而報(bào)錯
pnpm add sass-loader@10 -D
- 配置步驟
引入uview-plus主JS庫：在項(xiàng)目src目錄中的main.js中，引入并使用uview-plus的JS庫，注意這兩行要放在const app = createSSRApp(App)之后。
// main.js
import uviewPlus from 'uview-plus'
// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
const app = createSSRApp(App)
app.use(uviewPlus)
return {
app
}
}
// #endif
定義uview-plus
//src/types/uview.d.ts
declare module "uview-plus"
引入uview-plus的全局CSS主題文件： 在項(xiàng)目根目錄的uni.scss中引入此文件。
/* uni.scss */
@import 'uview-plus/theme.scss';
//App.vue
<style lang="scss">
/* 注意要寫在第一行，同時給style標(biāo)簽加入lang="scss"屬性 */
@import "uview-plus/index.scss";
</style>
...
配置easycom組件模式：需要在項(xiàng)目src目錄的pages.json中進(jìn)行
// 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"
}
},
// 此為本身已有的內(nèi)容
"pages": [
// ......
]
}
六. 配置pinia持久化
安裝
pnpm add pinia@2.0.33
在main.ts頁面
import { createSSRApp } from "vue"
import App from "./App.vue"
import uviewPlus from 'uview-plus'
// 導(dǎo)入 pinia 實(shí)例
import pinia from './stores'
export function createApp() {
const app = createSSRApp(App);
app.use(uviewPlus)
app.use(pinia)
return {
app,
};
}
//stores/index
import { createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate'
// 創(chuàng)建 pinia 實(shí)例
const pinia = createPinia()
// 使用持久化存儲插件
pinia.use(persist)
// 默認(rèn)導(dǎo)出，給 main.ts 使用
export default pinia
import { defineStore } from 'pinia'
import { ref } from 'vue'
export const useUserInfoStore = defineStore(
'userInfo',
() => {
const userInfo = ref()
const setUserInfo = (val) => {
userInfo.value = val
}
// 清理用戶信息，退出時使用
const clearUserInfo = () => {
userInfo.value = undefined
}
return {
userInfo,
setUserInfo,
clearUserInfo,
}
},
// 默認(rèn)持續(xù)化保存
{
persist:{
storage: {
getItem(key) {
return uni.getStorageSync(key)
},
setItem(key, value) {
uni.setStorageSync(key,value)
},
}
}
}
)
七. 封裝http請求
// src/utils/http.ts
// 請求基地址
const baseURL = 'xxxx'
// 攔截器配置
const httpInterceptor = {
// 攔截前觸發(fā)
invoke(options: UniApp.RequestOptions) {
// 1. 非 http 開頭需拼接地址
if (!options.url.startsWith('http')) {
options.url = baseURL + options.url
}
// 2. 請求超時
options.timeout = 10000
// 3. 添加小程序端請求頭標(biāo)識
options.header = {
'source-client': 'miniapp',
...options.header,
}
// 4. 添加 token 請求頭標(biāo)識
const memberStore = useMemberStore()
const token = memberStore.profile?.token
if (token) {
options.header.Authorization = token
}
},
}
// 攔截 request 請求
uni.addInterceptor('request', httpInterceptor)
// 攔截 uploadFile 文件上傳
uni.addInterceptor('uploadFile', httpInterceptor)
/**
* 請求函數(shù)
* @param UniApp.RequestOptions
* @returns Promise
* 1. 返回 Promise 對象，用于處理返回值類型
* 2. 獲取數(shù)據(jù)成功
* 2.1 提取核心數(shù)據(jù) res.data
* 2.2 添加類型，支持泛型
* 3. 獲取數(shù)據(jù)失敗
* 3.1 401錯誤 -> 清理用戶信息，跳轉(zhuǎn)到登錄頁
* 3.2 其他錯誤 -> 根據(jù)后端錯誤信息輕提示
* 3.3 網(wǎng)絡(luò)錯誤 -> 提示用戶換網(wǎng)絡(luò)
*/
type Data<T> = {
code: string
msg: string
result: T
}
// 2.2 添加類型，支持泛型
export const http = <T>(options: UniApp.RequestOptions) => {
// 1. 返回 Promise 對象
return new Promise<Data<T>>((resolve, reject) => {
uni.request({
...options,
// 響應(yīng)成功
success(res) {
// 狀態(tài)碼 2xx，參考 axios 的設(shè)計(jì)
if (res.statusCode >= 200 && res.statusCode < 300) {
// 2.1 提取核心數(shù)據(jù) res.data
resolve(res.data as Data<T>)
} else if (res.statusCode === 401) {
// 401錯誤 -> 清理用戶信息，跳轉(zhuǎn)到登錄頁
const memberStore = useMemberStore()
memberStore.clearProfile()
uni.navigateTo({ url: '/pages/login/login' })
reject(res)
} else {
// 其他錯誤 -> 根據(jù)后端錯誤信息輕提示
uni.showToast({
icon: 'none',
title: (res.data as Data<T>).msg || '請求錯誤',
})
reject(res)
}
},
// 響應(yīng)失敗
fail(err) {
uni.showToast({
icon: 'none',
title: '網(wǎng)絡(luò)錯誤，換個網(wǎng)絡(luò)試試',
})
reject(err)
},
})
})
}
八 . 其他配置
-
vue3自動按需導(dǎo)入：文章來源：http://www.zghlxwxcb.cn/news/detail-846527.html
-
//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/ export default defineConfig({ build: { sourcemap: process.env.NODE_ENV === 'development', }, plugins: [ uni(), AutoImport({ // 使用 imports: ['vue'], dts: 'src/auto-import.d.ts', // 如有用到eslint記得加上寫段，沒有用到可以忽略 eslintrc: { enabled: true, }, }) ], })
寫在最后：這一篇是在網(wǎng)上借鑒的微信小程序的環(huán)境搭建文章，跟著一步一步搭建下來并且做一些筆記，跟著這篇文章的步驟一步一步來，搭建出來是沒問題的。文章來源地址http://www.zghlxwxcb.cn/news/detail-846527.html
到了這里，關(guān)于微信小程序uniapp+vue3+ts+pinia的環(huán)境搭建的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
