安装vue+ts的相关插件
首先是vue的相关插件，目前2024年9月应该是vue-offical
安装uniapp开发插件
uni-create-view ：快速创建 uni-app 页面
安装uni-create-view之后修改插件拓展设置
勾选第一个选择创建视图时创建同名文件夹
选择第二个创建文件夹中生成的文件名与文件夹同名。
uni-helper：uniapp代码提示
快捷键 Ctrl + i 唤醒代码提示
uniapp小程序扩展
自动提示标签可用属性,鼠标悬浮查询属性文档,新增支持uview的组件提示
安装类型声明文件
TypeScript 中微信小程序 API 的类型定义
npm i -D miniprogram-api-typings @uni-helper/uni-app-types配置 tsconfig.json
// tsconfig.json
{
"extends": "@vue/tsconfig/tsconfig.json",
"compilerOptions": {
"sourceMap": true,
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
},
"lib": ["esnext", "dom"],
// 类型声明文件
"types": [
"@dcloudio/types", // uni-app API 类型
"miniprogram-api-typings", // 原生微信小程序类型
"@uni-helper/uni-app-types" // uni-app 组件类型
]
},
// vue 编译器类型，校验标签类型
"vueCompilerOptions": {
// 原配置 `experimentalRuntimeMode` 现调整为 `nativeTags`
"nativeTags": ["block", "component", "template", "slot"],
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}
Json文件的注释
json文件是可以有注释的，在设置-用户-文件中设置pages.json和manifest.json两项的属性值为jsonc
项目开发
新建项目
使用degit命令来克隆uni-app的官方模板仓库
npx degit dcloudio/uni-preset-vue#vite-ts 项目名称npx degit dcloudio/uni-preset-vue#vite-ts firstDemo
y回车之后就创建项目成功了。
创建项目之后安装依赖
npm i安装依赖成功后在项目目录下会有一个node_modules文件夹
解决问题
安装依赖失败导致无法解析json文件
出现了如图的报错信息
当时安装依赖失败了，后来成功安装后重启项目，这个错误提示就消失了。依赖包错误安装也可能导致这个问题，删除node_modules，之后重新安装就好了。
除此之外，还可能会出现下面的报错信息
未安装类型声明文件
使用npm安装总是超时导致安装失败，我尝试配置淘宝镜像
全局安装cnpm并设置其使用淘宝镜像的仓库地址（地址最新版）-CSDN博客
运行项目
npm run dev:h5运行成功
通过package.json可以查看其他端运行命令
"scripts": {
"dev:app": "uni -p app",
"dev:app-android": "uni -p app-android",
"dev:app-ios": "uni -p app-ios",
"dev:app-harmony": "uni -p app-harmony",
"dev:custom": "uni -p",
"dev:h5": "uni",
"dev:h5:ssr": "uni --ssr",
"dev:mp-alipay": "uni -p mp-alipay",
"dev:mp-baidu": "uni -p mp-baidu",
"dev:mp-jd": "uni -p mp-jd",
"dev:mp-kuaishou": "uni -p mp-kuaishou",
"dev:mp-lark": "uni -p mp-lark",
"dev:mp-qq": "uni -p mp-qq",
"dev:mp-toutiao": "uni -p mp-toutiao",
"dev:mp-weixin": "uni -p mp-weixin",
"dev:mp-xhs": "uni -p mp-xhs",
"dev:quickapp-webview": "uni -p quickapp-webview",
"dev:quickapp-webview-huawei": "uni -p quickapp-webview-huawei",
"dev:quickapp-webview-union": "uni -p quickapp-webview-union",
"build:app": "uni build -p app",
"build:app-android": "uni build -p app-android",
"build:app-ios": "uni build -p app-ios",
"build:app-harmony": "uni build -p app-harmony",
"build:custom": "uni build -p",
"build:h5": "uni build",
"build:h5:ssr": "uni build --ssr",
"build:mp-alipay": "uni build -p mp-alipay",
"build:mp-baidu": "uni build -p mp-baidu",
"build:mp-jd": "uni build -p mp-jd",
"build:mp-kuaishou": "uni build -p mp-kuaishou",
"build:mp-lark": "uni build -p mp-lark",
"build:mp-qq": "uni build -p mp-qq",
"build:mp-toutiao": "uni build -p mp-toutiao",
"build:mp-weixin": "uni build -p mp-weixin",
"build:mp-xhs": "uni build -p mp-xhs",
"build:quickapp-webview": "uni build -p quickapp-webview",
"build:quickapp-webview-huawei": "uni build -p quickapp-webview-huawei",
"build:quickapp-webview-union": "uni build -p quickapp-webview-union",
"type-check": "vue-tsc --noEmit"
},
