1.使用命令行创建uniapp项目

npx degit dcloudio/uni-preset-vue#vite-ts 项目名称

可参照官方文档 `uni-app官网 (dcloud.net.cn)https://uniapp.dcloud.net.cn/quickstart-cli.html

二.编译和运行uniapp

安装包依赖:

pnpm i

运行成微信小程序

pnpm dev:mp-weixin

导入微信开发者工具 – 温馨提示: 在 manifest.json 文件添加小程序 appid 方便真机预览 

 运行pnpm dev:mp-weixin之后项目根目录生成dist文件,将文件下的mp-weixin运行到微信开发者工具即可

三.使用VsCode进行开发

安装VsCode插件 用于支持uniapp的开发

uni-create-view ：快速创建 uni-app 页面

uni-helper uni-app ：代码提示

uniapp 小程序扩展 ：鼠标悬停查文档

四.TS类型校验

pnpm i -D @types/wechat-miniprogram @uni-helper/uni-app-types

// uni-ui -- 类型声明文件

pnpm i -D @uni-helper/uni-ui-types

// tsconfig.json
{
  "extends": "@vue/tsconfig/tsconfig.json",
  "compilerOptions": {
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "lib": ["esnext", "dom"],
    "types": [
      "@dcloudio/types",
+      "@types/wechat-miniprogram",
+      "@uni-helper/uni-app-types"
+      "@uni-helper/uni-ui-types" 
    ]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

五.安装sass

npm i sass -D

npm i sass-loader@10.1.1 -D

六.引入ui组件库

pnpm i @dcloudio/uni-ui

// pages.json
{
  // 组件自动导入
  "easycom": {
    "autoscan": true,
    "custom": {
      // uni-ui 规则如下配置  
      "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue" 
    }
  },
  "pages": [
    // …省略
  ]
}

七.配置@ == src

// vite.config.ts

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'

// https://vitejs.dev/config/
export default defineConfig({
	plugins: [uni()],
	resolve: {
		extensions: ['.ts', '.js', '.json', '.vue', '.less', '.scss', '.css'], // 省略后缀 以及 index.*
		alias: {
			'@': fileURLToPath(new URL('./src', import.meta.url)),
		},
	},
})

八.注释问题

JSON 注释问题 – 把 manifest.json 和 pages.json 设置为 jsonc