vue3+ts+vite 搭建uniapp项目（微信小程序）-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue3+ts+vite 搭建uniapp项目（微信小程序）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

模板下载：
1. uniapp 官网通过vue-cli 命令行创建uniapp，参考uni-app官网，使用 npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project下载模板；
安装css预处理 sass:
1. 项目终端输入：yarn add node-sass@^4.0.0 sass-loader@^10.0.1 sass（模板没有默认安装sass, 如果不安装直接使用会报错）
安装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"
    }
  }
```

配置使用微信小程序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类型定义文件
    ],

配置文件路径别名 | 可选

打开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'),
    },
  },
})

tsconfig.json中配置

//compilerOptions中配置
 
"baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },

发现在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"          //可选
    ],
```
  重启编辑器文章来源地址https://www.toymoban.com/news/detail-490289.html