记录 uni-app 的快速上手
- 创建项目
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project - 安装依赖
pnpm i - 运行
pnpm dev:h5 - 如果是运行
mp-weixin，把 dist/dev/mp-weixin 导入微信开发者工具。就可以在微信开发者工具中预览
vscode 插件
uni-create-view 帮助创建页面uni-helper的组件包 帮助代码提示uniapp小程序拓展 帮助悬停查看文档
安装类型 pnpm i -D @types/wechat-miniprogram @uni-helper/uni-app-types
配置 tsconfig.json。确保使用了 ts 类型，配置了 vueCompilerOptions 的 nativeTags 下面 4 个内容
1
2
3
4
5
6
7
8
| {
{
"types": ["@dcloudio/types","@types/wechat-miniprogram","@uni-helper/uni-app-types"]
},
"vueCompilerOptions": {
"nativeTags": ["block", "component", "template", "slot"]
}
}
|
manifest.json 存放 appid，应用名称，logo，版本pages.jsonpages 存放页面static 存放静态资源
安装 uni-ui：
pnpm i @dcloudio/uni-ui
安装 sass pnpm i sass -D
项目根路径添加 vue.config.js
1
2
3
4
| // vue.config.js
module.exports = {
transpileDependencies:['@dcloudio/uni-ui']
}
|
配置组件自动引入
1
2
3
4
5
6
7
8
9
10
11
12
13
| // pages.json
{
"easycom": {
"autoscan": true,
"custom": {
// uni-ui 规则如下配置
"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
}
},
"pages": [
// …
]
}
|
配置 ts 类型：pnpm i -D @uni-helper/uni-ui-types
1
2
3
4
5
6
7
8
9
10
11
| // tsconfig.json
{
"compilerOptions": {
"types": [
"@dcloudio/types",
"@types/wechat-miniprogram",
"@uni-helper/uni-app-types",
+ "@uni-helper/uni-ui-types"
]
},
}
|
1
2
3
4
| // 拿到安全区域距离，单位是px
// 比如自定义导航栏。在拿到top以后，给导航加上样式 :style="{ paddingTop: safeAreaInsets?.top + 'px' }"
const { safeAreaInsets } = uni.getSystemInfoSync()
console.log(safeAreaInsets)
|
安装依赖
1
| pnpm i pinia pinia-plugin-persistedstate
|
创建 src/stores/index.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
| import { createPinia } from "pinia";
import persist from "pinia-plugin-persistedstate";
// 创建 pinia 实例
const pinia = createPinia();
// 使用持久化存储插件
pinia.use(persist);
// 默认导出，给 main.ts 使用
export default pinia;
// 模块统一导出
export * from "./modules/user";
|
创建 src/stores/modules/user.ts, 保存用户信息的示例
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
| import { defineStore } from "pinia";
import { ref } from "vue";
interface User {
username: string;
role: string;
}
// 定义 Store
export const userStore = defineStore(
"user",
() => {
// 用户信息
const user = ref<User>();
// 保存用户信息
const setProfile = (val: User) => {
user.value = val;
};
// 清理用户信息，退出时使用
const clearProfile = () => {
user.value = undefined;
};
// 记得 return
return {
user,
setProfile,
clearProfile,
};
},
// 持久化
{
persist: {
// 默认是localStorage，改成uni来兼容多端
storage: {
setItem(key, value) {
uni.setStorageSync(key, value);
},
getItem(key) {
return uni.getStorageSync(key);
},
},
},
}
);
|
main.ts 中引入使用 app.use(pinia);
1
2
3
4
| # 项目模板代码
git clone -b template https://gitee.com/heima-fe/uniapp-shop-vue3-ts.git heima-shop
# 项目成品代码
git clone https://gitee.com/Megasu/uniapp-shop-vue3-ts.git
|