1、模板下载:
uniapp 官网通过vue-cli 命令行创建uniapp,参考uni-app官网,使用 npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project下载模板;
2、安装css预处理 sass:
项目终端输入:yarn add node-sass@^4.0.0 sass-loader@^10.0.1 sass(模板没有默认安装sass, 如果不安装直接使用会报错)
3、安装uni-ui组件库,配置easycom模式无引入使用
项目终端输入:yarn add @dcloudio/uni-ui
src/package.json 文件配置easycom模式(组件无需import | require直接使用)
js代码
"easycom": {
"autoscan": true,
"custom": {
"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
}
}
4、 配置使用微信小程序API
由于安装的uniapp-ts项目只会包含uni-app本身的@types声明,如果想直接使用wx或小程序的api的话就需要自行添加,以微信小程序为例:项目终端输入:yarn add @types/weixin-app
打开tsconfig.json文件,在types选项中添加weixin使用的声明
"types": [
"@dcloudio/types", //这一项是原本包含的
"weixin-app", //wx-app的TypeScript定义 新添加
/******************以下包需要先安装***************************/
"miniprogram-api-typings",//微信小程序api的typescript类型定义文件,和weixin-app同;可选
"mini-types", //支付宝小程序的typescript类型定义文件
],
5、 配置文件路径别名 | 可选
1、打开vite.config.ts文件,使用resolve选项配置:
import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
const path = require('path')
// https://vitejs.dev/config/
export default defineConfig({
plugins: [uni()],
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
},
},
})
2、tsconfig.json中配置
//compilerOptions中配置
"baseUrl": ".",
"paths": {
"@/*": [
"src/*"
]
},
3、发现在vite.config.ts中无法使用关键字 require;要重启编辑器)
1安装依赖包:yarn add @types/node -D
2tsconfig.json中配置 | 可选:
//compilerOptions中配置
"types": [
"@dcloudio/types",
"weixin-app",
"miniprogram-api-typings",
"mini-types",
"node" //可选
],
重启编辑器