使用VSCode开发uniapp_vscode运行uniapp项目

使用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 -vnpm -v

安装插件

在VSCode的扩展市场中搜索“uni-create-view”（快速uni-app页面）、uni-helper(uni-app代码提示)、uniapp小程序扩展(鼠标悬停查文档)并安装。
在扩展市场安装“vscode-icons”插件可以显示图标，如图所示：

如果需要创建页面的时候同时创建一个文件夹，则需要在“uni-create-view”（快速uni-app页面）中修改设置。

勾选红色选择部分即可。如果需要默认创建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-projectnpm install

运行项目

在“manifest.json”中配置好appid，由于此为小程序，故找到下图地址填写：

在项目目录下运行以下命令启动开发服务器：

npm dev:mp-weixin

下图表示编译完成。
在微信开发者工具中导入项目编译好的程序。

安装其他插件

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。
uni-app的‌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\" } ]}

打包项目

开发完成后，可以通过以下命令打包项目：

npm run build:mp-weixin

部署项目

根据目标平台的要求，将生成的发布包上传到相应的平台进行部署。例如，微信小程序可以通过微信开发者工具上传并发布。

通过以上步骤，可以在VSCode中高效地开发和调试uni-app项目。