uniApp+Vue3+Vite微信小程序开发指南_uniapp vite vue3

一、前期准备

需要的IDE包括：webstorm、HBuildeX、微信开发者工具，同时需要安装nodejs。

webstorm 下载地址：https://www.jetbrains.com/webstorm/

HBuildeX下载地址：https://www.dcloud.io/hbuilderx.html

微信开发者工具：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

nodejs下载地址：https://nodejs.org/en/download/package-manager

二、通过WIN命令行进行环境搭建、启动

1、安装Node.js

2、指定npm源，可以百度搜索国内镜像源。

使用npm命令有可能报错证书过期。根据我的经验，一般是检查一下npm源是不是有问题，可以尝试更换别的源试试。

 # 设置国内镜像源
 npm config set registry https://registry.npmmirror.com
 # 更新npm
 npm install -g npm
1
2
3
4

3、安装pnpm。

# 安装pnpm
npm install -g pnpm
1
2

1、安装vue脚手架。

# 安装vue
npm install -g @vue/cli
1
2

2、创建以 typescript 开发的工程（如命令行创建失败，请直接访问 gitee 下载模板）。

# 创建项目
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project
1
2

3、安装依赖并运行在浏览器中。

#安装依赖
pnpm i
#安装指定依赖
pnpm add
#查看是否安装pnpm
pnpm -v
#启动开发环境并在浏览器中查看
pnpm dev:h5
1
2
3
4
5
6
7
8

三、IDE安装、配置与使用

1、安装webstorm，HbuilderX,和微信开发者工具。

2、打开HbuilderX,运行-运行到小程序或模拟器-运行设置-设置微信开发者工具路径。

3、打开微信开发者工具，选择设置-安全设置。将服务端口号选择为开启。

4、打开webstorm，安装汉化插件、安装uniappTool工具，并在uniappTool工具中配置XBuilder、微信开发者工具路径。

5、webstorm 可以配置启动、打包等快捷操作。

四、生命周期

4.1、应用生命周期

仅可在App.vue中监听，在页面监听无效；App.vue是uni-app的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件。但App.vue本身不是页面，这里不能编写视图元素，也就是。

4.2、页面生命周期

支持vue标准的生命周期函数，同时新增了很多其他的生命周期函数；在page目录下配置的页面文件中监听才能生效；uni-app会将pages.json==>pages配置项中的第一个页面，作为当前工程的首页（启动页）

4.3、组件生命周期

uni-app 组件支持的生命周期，与vue标准组件的生命周期相同。这里没有页面级的onLoad等生命周期：

五、项目搭建

5.1、2.2创建项目

# 创建项目
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project
1
2

注意：后续命令均可在webstorm中执行运行。

5.2、自动引入插件配置

github文档：https://github.com/unplugin/unplugin-auto-import

实现在使用函数时，无需import引入

# 需要安装一个相关插件
pnpm i unplugin-auto-import
1
2

在vite.config.ts 文件中进行配置

# 导入安装的插件
import AutoImport from 'unplugin-auto-import/vite'
# 进行插件配置
export default defineConfig({
	plugins: [
	AutoImport({
		dts:'src/typings/auto-imports.d.ts',
		imports:['vue', 'uni-app', 'pinia'],
		dirs:['src/composables']
	})
	],
});
1
2
3
4
5
6
7
8
9
10
11
12

5.3、vue语法糖支持

可查阅官方文档：https://vue-macros.dev/features/reactivity-transform.html

安装插件

# cmd
pnpm add -D @vue-macros/reactivity-transform
1
2

开启语法糖

// vite.config.ts
import ReactivityTransform from '@vue-macros/reactivity-transform/vite'

export default defineConfig({
  plugins: [ReactivityTransform()],
})
1
2
3
4
5
6

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["@vue-macros/reactivity-transform/macros-global" /* ... */]
  }
}
1
2
3
4
5
6
7

5.3、使用pinia进行在状态管理

pinia 官网：https://pinia.vuejs.org/

pinia 中文手册：http://pinia.cc/

安装插件

# cmd 安装
pnpm i pinia@2.0.30 pinia-plugin-persistedstate@3.0.2 -S
1
2

main.ts 引入Pinia

// main.ts
import { createPinia } from 'pinia';
import { createSSRApp } from 'vue';
import { createPersistedState } from 'pinia-plugin-persistedstate';
import App from './App.vue';

import 'uno.css';

// 引入Pinia和持久缓存的设置
const pinia = createPinia().use(
  createPersistedState({
    storage: {
      getItem(key: string) {
        return uni.getStorageSync(key);
      },
      setItem(key: string, value: string) {
        uni.setStorageSync(key, value);
      },
    },
  })
);

export function createApp() {
  const app = createSSRApp(App).use(pinia);
  return {
    app,
  };
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

5.4、测试pinia

src根目录新建composables目录（用于放置Pinia配置文件）

持续更新中…