使用VSCode开发uniapp

安装VSCode
安装Node.js
安装插件
创建uni-app项目
安装依赖
运行项目
安装其他插件

安装uni-ui插件
配置easycom
安装@uni-helper/uni-ui-types
配置 TypeScript

状态管理
调试项目
打包项目
部署项目

安装VSCode

确保已经安装了Visual Studio Code（VSCode）。如果尚未安装，可以从VSCode官网下载并安装。

安装Node.js

uni-app开发需要Node.js环境。可以从Node.js官网下载并安装最新版本的Node.js。安装完成后，可以通过以下命令检查是否安装成功：

node -v
npm -v

安装插件

在VSCode的扩展市场中搜索“uni-create-view”（快速uni-app页面）、uni-helper(uni-app代码提示)、uniapp小程序扩展(鼠标悬停查文档)并安装。
在扩展市场安装“vscode-icons”插件可以显示图标，如图所示：
图片[1] - 使用VSCode开发uniapp - 宋马
如果需要创建页面的时候同时创建一个文件夹，则需要在“uni-create-view”（快速uni-app页面）中修改设置。
图片[2] - 使用VSCode开发uniapp - 宋马
勾选红色选择部分即可。如果需要默认创建vue3模板，则再选中蓝色圈中部分。

创建uni-app项目

使用VSCode的终端或命令行工具，通过以下命令创建一个新的uni-app项目：

npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

下载不下来则可通过gitee进行下载
参考链接如下：https://uniapp.dcloud.net.cn/quickstart-cli.html
如果是ts项目需要检验提示，安装“npm i -D @types/wechat-miniprogram @uni-helper/uni-app-types”。

注：npx 是 Node.js 自带的命令行工具，随 Node.js 安装包一同提供。它首次出现在 Node.js 8.2.0 版本中，作为 npm 的一部分，用于更方便地执行本地或远程的 npm 包。
npx 的主要功能是允许用户在不全局安装 npm 包的情况下直接运行它们。它会自动查找本地项目依赖中的可执行文件，如果找不到，则会从 npm 仓库临时下载并执行该包。
黑马程序员的“小兔鲜儿”项目模板下载地址”：

git clone http://git.itcast.cn/heimaqianduan/erabbit-uni-app-vue3-ts.git heima-shop

安装依赖

进入项目目录并安装依赖：

cd my-project
npm install

运行项目

在“manifest.json”中配置好appid，由于此为小程序，故找到下图地址填写：
图片[3] - 使用VSCode开发uniapp - 宋马
在项目目录下运行以下命令启动开发服务器：

npm dev:mp-weixin

下图表示编译完成。图片[4] - 使用VSCode开发uniapp - 宋马
在微信开发者工具中导入项目编译好的程序。

安装其他插件

uni-ui支持 HBuilderX直接新建项目模板、npm安装和单独导入个别组件等多种使用方式。由于uni-app独特的easycom技术，可以免引用、注册，直接使用各种符合规则的vue组件。在代码区键入u，拉出各种内置或uni-ui的组件列表，选择其中一个，即可使用该组件。光标放在组件名称上，按F1，可以查阅组件的文档。

安装uni-ui插件

npm i @dcloudio/uni-ui

配置easycom

使用 npm 安装好 uni-ui 之后，需要配置 easycom 规则，让 npm 安装的组件支持 easycom
打开项目根目录下的 pages.json 并添加 easycom 节点：

// pages.json
{
            
	"easycom": {
            
		"autoscan": true,
		"custom": {
            
			// uni-ui 规则如下配置
			"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
		}
	},
	
	// 其他内容
	pages:[
		// ...
	]
}

在 template 中使用组件：

<uni-badge text="1"></uni-badge>
<uni-badge text="2" type="success" @click="bindClick"></uni-badge>
<uni-badge text="3" type="primary" :inverted="true"></uni-badge>

注意：
uni-ui 现在只推荐使用 easycom ，如自己引用组件，可能会出现组件找不到的问题
使用 npm 安装的组件，默认情况下 babel-loader 会忽略所有 node_modules 中的文件，导致条件编译失效，需要通过配置 vue.config.js 解决：

// 在根目录创建 vue.config.js 文件，并配置如下
module.exports = {
            
   transpileDependencies: ['@dcloudio/uni-ui']
}
// 如果是 vue3 + vite, 无需添加配置

uni-ui 是uni-app内置组件的扩展。注意与web开发不同，uni-ui不包括基础组件，它是基础组件的补充。web开发中有的开发者习惯用一个ui库完成所有开发，但在uni-app体系中，推荐开发者首先使用性能更高的基础组件，然后按需引入必要的扩展组件。
uni-ui 不支持使用 Vue.use() 的方式安装

安装@uni-helper/uni-ui-types

@uni-helper/uni-ui-types 为 Vue v3 uni-ui 组件提供 TypeScript 类型。
uni-ui并没有提供ts的类型声明文件，故需要下载@uni-helper/uni-ui-types
使用说明：https://www.npmjs.com/package/@uni-helper/uni-ui-types

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

配置 TypeScript

更新 tsconfig.json，确保：
compilerOptions.types 包含 @uni-helper/uni-ui-types
include 包含 vue 相关文件

{
            
  "compilerOptions": {
            
    "types": [
      // uni-app + Vue 3 使用 Vite 构建，需要安装 vite
      // "vite/client",
      // uni API 相关的 TypeScript 类型
      "@dcloudio/types",
      // my API 相关的 TypeScript 类型
      // "@mini-types/alipay",
      // wx API 相关的 TypeScript 类型，需要手动安装依赖
      "miniprogram-api-typings",
      // 为 uni-ui 组件提供 TypeScript 类型
      "@uni-helper/uni-ui-types",
      "@uni-helper/uni-app-types",
      //"@types/wechat-miniprogram",
    ]
  }
}

状态管理

使用pina做状态管理，持久化配置如下：

// TODO: 持久化
  /* 网页端，小程序使用此配置不会对数据进行持久化存储 */
  // {
            
  //   persist: true,
  // },
  /* 小程序端 */
  {
            
    persist: {
            
      storage: {
            
        getItem: (key) => {
            
          return uni.getStorageSync(key)
        },
        setItem: (key, value) => {
            
          uni.setStorageSync(key, value)
        },
        // removeItem: (key) => {
            
        //   uni.removeStorageSync(key)
        // },
      },
    },
  },

调试项目

在VSCode中，可以通过配置launch.json文件来调试uni-app项目。在.vscode目录下创建launch.json文件，并添加以下配置：

{
            
  "version": "0.2.0",
  "configurations": [
    {
            
      "type": "chrome",
      "request": "launch",
      "name": "Debug uni-app",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src"
    }
  ]
}