【无标题】

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"
    }
  }
1
2
3
4
5
6

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类型定义文件
    ],
1
2
3
4
5
6
7
8
9

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'),
    },
  },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14

2、tsconfig.json中配置

//compilerOptions中配置
  
"baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
1
2
3
4
5
6
7
8

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"          //可选
    ],
1
2
3
4
5
6
7
8
9

重启编辑器

6、运行项目： 使用yarn run dev:mp-weixin运行；微信开发者工具打开dist/mp-weixin文件夹