使用uniApp+vue3+Vite4+pinia+sass技术栈构建微信小程序

本文主要是介绍使用uniApp+vue3+Vite4+pinia+sass技术栈构建微信小程序，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

使用uniApp的cli模式安装，可以使用vscode开发。不用再单独去下载HBuilderX.

1.基础安装 vue3+ts+uniapp

方法一：

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

方法二：可以去uni-preset-vue的vite分支下选择vite-ts直接下载zip包，解压后粘贴到自己的项目中

2.安装依赖启动

pnpm install  或者  pnpm update
pnpm run dev:mp-weixin 或者 yarn run dev:mp-weixin

启动起来后打开微信小程序IDE，选择导入，然后选择dist目录下dev文件夹下的mp-weixin导入

3.安装pinia

备注：这里要指定版本，太高了编译会出错

pnpm add pinia@2.0.36

在src目录创建store文件夹，创建user.ts

import { defineStore } from 'pinia'export const useStore = defineStore('main', {state() {return {userInfo: {username:"username",phone:"phone"},}},actions: {setUserInfo(data) {this.userInfo = data}}
})

修改main.ts,全局引入pinia

import { createSSRApp } from "vue";
import * as Pinia from 'pinia';
import App from "./App.vue";
export function createApp() {const app = createSSRApp(App);const store = Pinia.createPinia();app.use(store);return {app,Pinia};
}

在页面使用pinia

<template><view class="content"><image class="logo" src="/static/logo.png" /><view class="text-area"><text class="title">{{ title }}-{{ userInfo.userInfo.username }}</text></view></view>
</template><script setup lang="ts">
import { ref } from "vue"
import { useStore } from "@/store/user"
const userInfo = useStore()
const title = ref("Hello")
</script>

4.安装sass

pnpm i sass -D
pnpm i sass-loader@10.1.1 -D

页面添加sass标识

<style lang="scss" scoped>
</style>

5.配置vue自动导入

安装unplugin-auto-import插件

pnpm add unplugin-auto-import -D

修改vite.config.ts

import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
import AutoImport from 'unplugin-auto-import/vite'
export default defineConfig({plugins: [uni(),AutoImport({imports: ["vue"],dts: true})],
});

修改tsconfig.json

{"extends": "@vue/tsconfig/tsconfig.json","compilerOptions": {"sourceMap": true,"baseUrl": ".","paths": {"@/*": ["./src/*"]},"lib": ["esnext", "dom"],"types": ["@dcloudio/types"]},"include": ["src/**/*.ts","src/**/*.d.ts","src/**/*.tsx","src/**/*.vue","./auto-imports.d.ts" //加入这行代码]
}

6.引入uview plus

pnpm add uview-plus

2.修改main.ts

import { createSSRApp } from "vue";
import * as Pinia from "pinia";
import uviewPlus from 'uview-plus'
import App from "./App.vue";export function createApp() {const app = createSSRApp(App);const store = Pinia.createPinia();app.use(store);app.use(uviewPlus);return {app,Pinia,};
}

3.引入uview-plus的全局SCSS主题文件
在项目根目录的uni.scss中引入此文件

/* uni.scss */
@import 'uview-plus/theme.scss';

4.App.vue引入uview-plus基础样式

<style lang="scss">/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */@import "uview-plus/index.scss";
</style>

5.配置easycom组件模式
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": [// ......]
}

6.修改env.d.ts文件
注意：
配置完后，可以发现在mian.ts中引入uview-plus时会提示ts报错：无法找到模块“uview-plus”的声明文件

/// <reference types="vite/client" />declare module '*.vue' {import { DefineComponent } from 'vue'// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-typesconst component: DefineComponent<{}, {}, any>export default component
}declare module "uview-plus";

7.uniapp px转rpx适配，安装postcss-pxtorps-pro插件

pnpm add postcss-pxtorpx-pro --save-dev

修改vite.config.ts文件

import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
import AutoImport from "unplugin-auto-import/vite";
// px转rpx
import PxToRpx from 'postcss-pxtorpx-pro';//引入// https://vitejs.dev/config/
export default defineConfig({plugins: [uni(),AutoImport({imports: ["vue"],dts: true}),],css: {//添加这个csspostcss: {plugins: [PxToRpx({unit: 'rpx',propList: ['*'],unitPrecision: 5,selectorBlackList: ['no-px'],replace: true,mediaQuery: false,minPixelValue: 0,transform: (x) => 2 * x,})]},}
});

8.日期格式化工具，安装dayjs工具

pnpm add dayjs

页面使用，具体查看官方文档

import dayjs from "dayjs";
dayjs().format();                                     // 2024-1-26T13:42:32+08:00
dayjs().format('YYYY-MM-DD');                         // 2024-1-26
dayjs().format('YYYY-MM-DD HH:mm:ss');                // 2024-1-26 13:47:12
dayjs(1318781876406).format('YYYY-MM-DD HH:mm:ss');   // 2014-1-26 00:17:56