创建
命令行创建
npx degit dcloudio/uni-preset-vue#vite-ts 项目名称
编译运行为微信小程序
pnpm dev:mp-weixin
安装uniapp插件
uni-create-view 快速创建页面
uni-helper uni-app代码提示
uniapp小程序扩展 鼠标悬停文档
引入uniapp组件库
npm i @dcloudio/uni-helper-json
// pages.json
{
// 组件自动导入
"easycom": {
"autoscan": true,
"custom": {
// uni-ui 规则如下配置
"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
}
},
"pages": [
// …省略
]
}
TS类型校验
安装类型声明文件
pnpm 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 组件类型
+ "@uni-helper/uni-ui-types"
]
},
// vue 编译器类型,校验标签类型
"vueCompilerOptions": {
// 原配置 `experimentalRuntimeMode` 现调整为 `nativeTags`
"nativeTags": ["block", "component", "template", "slot"],
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}
安装SASS
CSS预处理器,帮助我们减少重复的CSS代码。
npm i sass -D
//制定版本
npm i sass-loader@10.1.1 -D
JSON注释问题
在设置-文件关联处将manifest.json
和pages.json
的值设置为jsonc