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

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

使用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-types
  const 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: {//添加这个css
		postcss: {
      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