一.创建uniapp项目
通过vue-cli创建
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project二.安装依赖：
1.pnpm i
2.运行项目：
将package.json的
"dev:mp-weixin": "uni -p mp-weixin", 改为 "serve": "uni -p mp-weixin", 后续可以用pnpm run serve启动微信小程序开发工具3.导入微信小程序开发工具
打开微信开发者工具, 导入 dist/dev/mp-weixin 运行
三. TS 类型校验
在tsconfig.json文件中"compilerOptions"配置项内添加"ignoreDeprecations": “5.0”
"compilerOptions": { "ignoreDeprecations": "5.0" },额外配置Ts类型校验：
- 安装类型声明文件：
pnpm i -D @types/wechat-miniprogram @uni-helper/uni-app-types2. 配置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 编译器类型，校验标签类型 "vueCompilerOptions": { "nativeTags": ["block","component","template","slot"], }, "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]}在配置完成后，vue组件就会提示报错信息
四. JSON 注释问题
在vscode面板中，点击右小角设置按钮→点击设置→在搜索设置中搜索“文件关联”→找到Files: Associations的配置项→点击添加项→把 manifest.json 和 pages.json 设置为 jsonc即可；
五. 安装uview-plus
- 安装
pnpm add uview-pluspnpm add dayjspnpm add clipboard注意： 此安装方式必须要按照npm方式安装的配置中的说明配置了才可用，且项目名称不能有中文字符。
因为uview-plus依赖SCSS，所以必须要安装此插件，否则无法正常运行。
// 安装sasspnpm add sass -D// 安装sass-loader，注意需要版本10，否则可能会导致vue与sass的兼容问题而报错pnpm add sass-loader@10 -D- 配置步骤
引入uview-plus主JS库：在项目src目录中的main.js中，引入并使用uview-plus的JS库，注意这两行要放在const app = createSSRApp(App)之后。
// main.jsimport uviewPlus from 'uview-plus'// #ifdef VUE3import { createSSRApp } from 'vue'export function createApp() { const app = createSSRApp(App) app.use(uviewPlus) return { app }}// #endif定义uview-plus
//src/types/uview.d.tsdeclare module "uview-plus"引入uview-plus的全局CSS主题文件： 在项目根目录的uni.scss中引入此文件。
/* uni.scss */@import 'uview-plus/theme.scss';//App.vue
<style lang="scss">/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */@import "uview-plus/index.scss";</style>...配置easycom组件模式：需要在项目src目录的pages.json中进行
// 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" } }, // 此为本身已有的内容 "pages": [ // ...... ]}六. 配置pinia持久化
安装
pnpm add pinia@2.0.33在main.ts页面
import { createSSRApp } from "vue"import App from "./App.vue"import uviewPlus from 'uview-plus'// 导入 pinia 实例import pinia from './stores'export function createApp() { const app = createSSRApp(App); app.use(uviewPlus) app.use(pinia) return { app, };}//stores/index.tsimport { createPinia } from 'pinia'import persist from 'pinia-plugin-persistedstate'// 创建 pinia 实例const pinia = createPinia()// 使用持久化存储插件pinia.use(persist)// 默认导出，给 main.ts 使用export default pinia//stores/member.tsimport { defineStore } from 'pinia'import { ref } from 'vue'export const useMemberStore = defineStore( 'member', () => { const userInfo = ref() const setUserInfo = (val) => { userInfo.value = val } // 清理用户信息，退出时使用 const clearUserInfo = () => { userInfo.value = undefined } return { userInfo, setUserInfo, clearUserInfo, } }, // 默认持续化保存 { 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 = { // 拦截前触发 invoke(options: UniApp.RequestOptions) { // 1. 非 http 开头需拼接地址 if (!options.url.startsWith('http')) { options.url = baseURL + options.url } // 2. 请求超时 options.timeout = 10000 // 3. 添加小程序端请求头标识 options.header = { 'source-client': 'miniapp', ...options.header, } // 4. 添加 token 请求头标识 const memberStore = useMemberStore() const token = memberStore.profile?.token if (token) { options.header.Authorization = token } },} // 拦截 request 请求uni.addInterceptor('request', httpInterceptor)// 拦截 uploadFile 文件上传uni.addInterceptor('uploadFile', httpInterceptor)/** * 请求函数 * @param UniApp.RequestOptions * @returns Promise * 1. 返回 Promise 对象，用于处理返回值类型 * 2. 获取数据成功 * 2.1 提取核心数据 res.data * 2.2 添加类型，支持泛型 * 3. 获取数据失败 * 3.1 401错误 -> 清理用户信息，跳转到登录页 * 3.2 其他错误 -> 根据后端错误信息轻提示 * 3.3 网络错误 -> 提示用户换网络 */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, // 响应成功 success(res) { // 状态码 2xx，参考 axios 的设计 if (res.statusCode >= 200 && res.statusCode < 300) { // 2.1 提取核心数据 res.data resolve(res.data as Data<T>) } else if (res.statusCode === 401) { // 401错误 -> 清理用户信息，跳转到登录页 const memberStore = useMemberStore() memberStore.clearProfile() uni.navigateTo({ url: '/pages/login/login' }) reject(res) } else { // 其他错误 -> 根据后端错误信息轻提示 uni.showToast({ icon: 'none', title: (res.data as Data<T>).msg || '请求错误', }) reject(res) } }, // 响应失败 fail(err) { uni.showToast({ icon: 'none', title: '网络错误，换个网络试试', }) reject(err) }, }) })}八 . 其他配置
-
vue3自动按需导入：
-
//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, }, }) ],})
写在最后：这一篇是在网上借鉴的微信小程序的环境搭建文章，跟着一步一步搭建下来并且做一些笔记，跟着这篇文章的步骤一步一步来，搭建出来是没问题的。
