前言

最近开始了项目旧改，将以前开发的一些校园小程序由 uniapp + vue2 版本升级为，unipp + vite + ts + vue3 的架构，顺便把代码质量提升一下。

由于是单兵作战，我选择将以前的后端摒弃，选择了微信小程序云开发作为后端，这样可以将我的开发精力聚焦在小程序上。 但这么做也有如下两个缺点：

1. 使用了微信小程序云开发后，uniapp 只适用于编译成微信小程序，失去了跨端的能力。
2. uniapp 使用云开发并不方便，尤其是使用了 typescript 后需要做大量的额外配置。

综合考虑之下我还是使用了微信小程序云开发，因为本身我做的就是微信小程序，只不过以 uniapp 为框架进行开发，而第二点的话我也找到了解决的方法，下面就为大家详细讲讲改如何去创建并开发这样的一个项目。

创建项目架构

首先使用官方提供的脚手架创建一个项目，这里我创建的是 vite + ts 的项目：

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

创建完成后，安装依赖并启动项目：

# 安装依赖
yarn install

# 启动开发环境
yarn dev:mp-weixin

因为是要搭配微信小程序云开发使用的，所以这里我启动的是微信小程序的开发环境。我们启动项目后，会编译出一个开发环境的包，目录路径为 dist/dev/mp-weixin ，如下图所示：

我们将这个目录在微信开发者工具打开，就可以预览小程序的效果了。当我们保存时也会实时编译更新。

由于是 ts + vue3 的项目，我没有选择 HBuilder 而是选择了 VScode 作为 ide 工具, VScode 对于 ts 的代码提示可谓浑然天成，而 vue3 还可以使用官方的插件 volar 进行语言支持，整体开发体验绝对是很爽的。

而对于 uniapp api的一些代码提示我使用的是 uniapp-snippet 这款插件，如下图：

配置小程序云开发 ts 类型支持

如果你需要使用微信小程序云开发的话，需要手动去安装一下微信小程序的 api 类型提示，操作步骤如下

1. 安装云开发 ts 依赖

yarn add -D miniprogram-api-typings

2. 在 tsconfig 中添加 types

{
  "compilerOptions": {
    "types": [
      "@dcloudio/types",
      "miniprogram-api-typings/types"
    ],
  },
}

安装后，我们使用一些 wx 原生的 api 就可以看到代码提示了，效果如图：

配置云函数目录

首先我们在 src 目录下创建一个新的目录 src/cloudfuntioncs 用于存放我们的云函数，当你创建后我们会发现，这个目录在编译后并没有在微信开发工具中出现，也就意味着并没有被编译到最终产物中。

这个原因是由于云函数文件夹并没有被其他的文件所引用，因此 vite 进行编译时会并不会将这个 cloudfuntioncs 这个目录打包到产物中，因此我们需要自己将这个文件给复制出来。这一步我使用的是 rollup-plugin-copy 这个 rollup 插件。

1. 首先安装 rollup-plugin-copy

yarn add -D rollup-plugin-copy

2. 接着在 vite.config.ts 中配置一下需要复制的目录:

import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import copy from 'rollup-plugin-copy'
import path from 'path'

export default defineConfig({
  plugins: [copy({
    targets: [
      {
        src: 'src/cloudfunctions/**/*',
        dest: `dist/${process.env.NODE_ENV === 'production' ? 'build' : 'dev'}/${process.env.UNI_PLATFORM}/cloudfunctions`
      }
    ]
  }), uni()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
})

这一步我使用了环境变量去动态复制 cloudfunctions 目录到开发或者生产的目录位置。配置完成后我们就可以看到 cloudfuntioncs 目录在微信开发工具也能看到了。

配置项目 eslint

既然配置了 ts ，为了开发更加规范，我们就将 eslint 也一并配置了，操作步骤如下：

1. 安装 eslint

yarn add -D eslint

2. 初始化 eslint

npx eslint --init

执行命令后根据提示进行操作选择自己的风格，我选择的风格如下：

3. 配置全局变量
   由于 uni 或者 wx 这种全局变量是不需要引入就可以使用的，eslint 会提示变量未定义，因此我们需要在 eslintrc.js 中配置一下 globals 变量：

modele.export = 
{
//...
globals: {
    uni: true,
    UniApp: true,
    wx: true,
    ICloud: true
  },
}

配置 pinia 全局数据及数据持久化

因为使用了 vue3 + ts 的技术栈，继续使用 vuex 的话配置起来很麻烦，而且 ts 支持并不算好，因此我们使用 pinia 来替代 vuex，首先安装 pinia

yarn add pinia

pinia 和 vuex 一样都可以以模块的方式去区分不同的全局数据类型，但是我这里全局数据并不多，因此我将所有的全局数据放在一个文件中：

// useStore.ts
import { defineStore, createPinia } from 'pinia'
import { createPersistedState } from 'pinia-plugin-persistedstate'
import { User } from '../types/user'

type StateType = {
	user?: User
}
export default defineStore('global', {
  persist: {
    key: 'pinia',
    paths: ['user']
  },
  state: (): StateType => ({
    user: undefined
  }),
  actions: {
    setData<T extends keyof StateType> ({ key, value }: { key: T, value: any }) {
      this[key] = value
    }
  }
})

export const pinia = createPinia().use(
  createPersistedState({
    storage: {
      getItem (key: string): string | null {
        return uni.getStorageSync(key)
      },
      setItem (key: string, value: string) {
        uni.setStorageSync(key, value)
      }
    }
  })
)

在上面的代码中，我通过 pinia-plugin-persistedstate 进行数据的持久化，由于默认的是使用 localstorage 进行数据存储，因此需要自己重新定义一下，使用 uniapp 的 api 进行数据存取。

persist 字段中 key 是存储在本地的键名，path 则是选择某个数据需要进行持久化，我配置的持久化效果如下图：

接下来在 main.ts 中引入一下：

// main.ts
import { createSSRApp } from 'vue'
import App from './App.vue'
import { pinia } from './hooks/useStore'

export function createApp () {
  const app = createSSRApp(App)
  app.use(pinia)
  return {
    app
  }
}

这样我们就可以通过 pinia 来进行全局数据的存取了,使用的方式如下：

import useStore from '@/hooks/useStore'
const store = useStore()

// 取值
console.log(store.user)

// 赋值
store.setData({ key: 'user', value:{ id: 0, name: 'oil '} })

注意点

在使用 pinia 中的变量时如果使用解构赋值，需要使用 storeToRefs 这个方法包裹一下，否则全局变量会失去响应式，变量更新时并不会重新渲染组件。

import { storeToRefs } from 'pinia'

// bad
const {user} = useStore()

// good
const {user} = storeToRefs(useStore())

总结

在项目重构的过程中我遇到了很多其他的坑，我将会在后面的文章为大家更加详细的介绍 vite + vue3 + ts + pinia 如何进行完整的项目开发，一些避坑注意点。

我的校园小程序完成重构后也将进行开源，方便大家进行学习参考。如果对于运营校园社区有兴趣的小伙伴可以私我噢~

相关文档

uniapp 官方文档：创建 uniapp

pinia 官方文档：storetorefs

微信小程序云开发官方文档