Vue3+TS版本Uniapp:项目前置操作

作者:前端小王hs

阿里云社区博客专家/清华大学出版社签约作者✍/CSDN百万访问博主/B站千粉前端up主

环境:使用vscode进行开发

如果一开始是使用的HbuilderX ,请看hbuilderX创建的uniapp项目转移到vscode

为什么选择vscode ?有更好的TS支持

学习TS的好处?减少维护代码的压力、鸿蒙ArkTS是基于TS的、提高代码水平拿高薪等...

Vue3版本Uniapp基础配置

关于插件

推荐安装的插件:

关于这些插件的作用(按上图顺序):校验关键文件、提供代码片段、快速创建组件、代码提示、注释高亮、鼠标悬停查看代码信息

关于安装

如何快捷打开控制器?ctrl+`

安装命令:npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

注意,上述安装命令为支持TS的版本,关于安装的更多内容,可在官网查看,这里不再赘述

安装完了不要忘了pnpm install安装依赖

关于TS

配置TS类型校验

pnpm i -D @types/wechat-miniprogram @uni-helper/uni-app-types

根目录下的tsconfig.json建议读者收藏此文,方便后续开发直接复制常规配置项

json 复制代码
{
  "extends": "@vue/tsconfig/tsconfig.json",
  "compilerOptions": {
    "allowJs": true,
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "lib": ["esnext", "dom"],
    "types": [
      "@dcloudio/types",
      "miniprogram-api-typings",
      "@uni-helper/uni-app-types",
    ]
  },
  "vueCompilerOptions": {
    "nativeTags": ["block", "component", "template", "slot"]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

关于注释

值得注意的是,核心目录src下的package.jsonmanifest.jsonvscode没有得到很好的支持,会出现下划线的注释问题,如下图所示:

所以需要在vscode的顶部文件选项的👉首选项👉设置中的工作区 搜索文件关联 ,并设置上述两个文件为jsonc格式,如下面两个图所示:

关于组件

如果使用官方的ui组件库即uni-ui组件库pnpm i @dcloudio/uni-ui,可以使用easycom快速引入组件,而无需使用import...from语法,代码如下:

json 复制代码
// pages.json
{
"easycom": {
	"autoscan": true,
	"custom": {
		"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
	}
},

对于组件的TS支持,则在配置项中新增代码如下:

json 复制代码
// tsconfig.json
    "types": [
      "@dcloudio/types",
      "miniprogram-api-typings",
      "@uni-helper/uni-app-types",
      "@uni-helper/uni-ui-types"
    ]

关于Pinia

我们开发使用的是Vue3版本的uniapp,所以使用的状态管理器是Pinia,关于Vue3的项目,可在B站搜索UP主名字👉前端小王hs学习2023最新的Vue3全家桶+MySQL+Express全栈视频

在常规的项目中,我们要持久化Pinia会使用pinia-plugin-persistedstate,代码如下:

js 复制代码
export const useUserInfo = defineStore('userinfor', {
	state: () => {},
	actions: {},
}, {
	// 持久化
	persist: true
})

而在uniapp的小程序中,则需修改为:

js 复制代码
export const useUserInfo = defineStore('userinfor', {
	state: () => {},
	actions: {},
}, {
	// 持久化
	persist: {
		storage: {
			getItem(key) {
            return uni.getStorageSync(key)
			},
        	setItem(key, value) {
         	uni.setStorageSync(key, value)
        	},
		},
	},
})
相关推荐
fakaifa8 小时前
CRMEB Pro版v3.1源码全开源+PC端+Uniapp前端+搭建教程
前端·小程序·uni-app·php·源码下载
转角羊儿8 小时前
uni-app请求方法封装⑦
uni-app
java知路8 小时前
uniapp h5实现录音
uni-app
haodanzj10 小时前
在uniapp中封装请求接口 (带刷新token)
前端·javascript·uni-app
空&白11 小时前
uniapp h5地址前端重定向跳转
前端·uni-app
工业互联网专业11 小时前
Python毕业设计选题:基于Django+uniapp的公司订餐系统小程序
vue.js·python·小程序·django·uni-app·源码·课程设计
家里有只小肥猫11 小时前
关于vue生命周期
uni-app·uniapp
不法11 小时前
uniapp 跨域前端代理
前端·uni-app
堕落年代12 小时前
在uniapp当中隐藏掉默认tabbar并且使用自己的tabbar
前端·javascript·uni-app
多客软件佳佳13 小时前
校园交友系统的设计与实现(开源版+三端交付+搭建+售后)
小程序·前端框架·uni-app·开源·php·交友