vue3+ts+vite 搭建uniapp项目（微信小程序）

1. 模板下载：
   1. uniapp 官网通过vue-cli 命令行创建uniapp，参考uni-app官网，使用  npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project下载模板；
2. 安装css预处理 sass:
   1. 项目终端输入：yarn add node-sass@^4.0.0 sass-loader@^10.0.1 sass（模板没有默认安装sass, 如果不安装直接使用会报错）
3.  安装uni-ui组件库，配置easycom模式无引入使用
   1. 项目终端输入：yarn add @dcloudio/uni-ui
   2. src/package.json 文件配置easycom模式(组件无需import | require直接使用)

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

4.  配置使用微信小程序API

   1. 由于安装的uniapp-ts项目只会包含uni-app本身的@types声明，如果想直接使用wx或小程序的api的话就需要自行添加，以微信小程序为例：项目终端输入：yarn add @types/weixin-app

   2. 打开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

      2. tsconfig.json中配置 | 可选：

         //compilerOptions中配置
         
         "types": [
                 "@dcloudio/types",
                 "weixin-app", 
                 "miniprogram-api-typings",
                 "mini-types",
                 "node"          //可选
             ],

         重启编辑器

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