在VS Code中配置和使用UniApp开发的完整指南

admin1周前 (05-19)it知识66

UniApp是一个基于Vue.js的跨平台应用开发框架,而VS Code是许多开发者首选的轻量级代码编辑器。

本文将详细介绍如何在VS Code中配置UniApp开发环境、创建项目、调试以及解决常见问题。

一、环境准备与插件配置

1. 基础工具安装

首先需要安装以下基础工具:

  • Visual Studio Code‌:从官网下载最新版本

  • Node.js‌:建议安装LTS版本,用于运行npm/yarn等包管理工具

  • 微信开发者工具‌(如需开发微信小程序)

2. 推荐VS Code插件

在VS Code中开发UniApp项目,建议安装以下插件:

插件名称功能描述安装方式
uni-helper提供完整的uni-app API和组件代码提示,支持标签属性、事件等智能补全VS Code扩展商店搜索安装
Vue - Official官方Vue语法支持插件,对Vue 3 + TS开发友好,提供模板语法高亮、错误检测等功能VS Code扩展商店搜索安装
uni-create-view快速生成页面/组件模板,自动注册到pages.json中VS Code扩展商店搜索安装
uniapp小程序扩展鼠标悬停查看文档,快速跳转官方文档VS Code扩展商店搜索安装

这些插件可以大幅提升UniApp在VS Code中的开发体验和效率

3. TypeScript支持配置

如需使用TypeScript开发,还需要进行以下配置:

  1. 安装类型声明文件:

npm i -D @uni-helper/uni-app-types
  1. 修改tsconfig.json:

{
  "compilerOptions": {
    "types": ["@dcloudio/types", "@types/wechat-miniprogram", "@uni-helper/uni-app-types"]
  }
}
  1. 配置VS Code的文件关联:

"files.associations": {
  "pages.json": "jsonc",
  "manifest.json": "jsonc"
}

这样可以获得更好的TS类型校验和代码提示

二、项目创建与配置

1. 创建UniApp项目

在VS Code中创建UniApp项目有两种主要方式:

方法一:使用Vue CLI创建

  1. 全局安装Vue CLI:

npm install -g @vue/cli
  1. 创建项目:

vue create -p dcloudio/uni-preset-vue my-uniapp-project

      选择默认模板

方法二:使用degit直接获取模板

npx degit dcloudio/uni-preset-vue#vite-ts uniapp-base

这种方法会直接下载官方提供的使用了TypeScript和Vite的UniApp项目模板

 项目结构说明

典型的UniApp项目结构如下:

├─pages         # 业务页面文件存放的目录

│ └─index

│   └─index.vue # index页面

├─static        # 存放应用引用的本地静态资源的目录

├─unpackage     # 存放运行或发行的编译结果

├─index.html    # H5端页面

├─main.js       # Vue初始化入口文件

├─App.vue       # 配置App全局样式、监听应用生命周期

├─pages.json    # 配置页面路由、导航栏、tabBar等

├─manifest.json # 配置appid、应用名称、logo、版本等打包信息

└─uni.scss      # uni-app内置的常用样式变量

运行项目

安装依赖后,可以使用以下命令运行项目:

# 安装依赖
pnpm install
# 运行微信小程序
pnpm dev:mp-weixin
# 运行H5
pnpm dev:h5

运行成功后,微信小程序项目会生成在dist/dev/mp-weixin/目录下,可以导入微信开发者工具进行预览

三、调试配置

1. 微信小程序调试

  1. 首先确保已在manifest.json文件中配置了微信小程序的appid:

"mp-weixin": {
  "appid": "wx1234567890",
  "lazyCodeLoading": "requiredComponents"
}

在VS Code中配置launch.json文件:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "uniapp-run",
      "request": "launch",
      "name": "Uniapp Run",
      "platform": "mp-weixin",
      "openDevTool": true,
      "vueVersion": "v3"
    }
  ]
}

在VS Code的调试视图中选择"Uniapp Run"配置,点击"开始调试"按钮,项目将在本地启动并自动打开微信开发者工具

H5调试配置

对于H5端的调试,可以引入vConsole工具:

  1. 安装vConsole:

npm install vconsole
  1. 在App.vue中配置:

//#ifndef MP
import VConsole from 'vconsole';
//#endif
let vConsole = null;
export default {
  onLaunch: function() {
    //#ifndef MP
    this.loadVConsole();
    //#endif
  },
  methods: {
    loadVConsole() {
      if(urlConfig.isVConsole) {
        vConsole = new VConsole({
          defaultPlugins: ['system', 'network', 'element', 'storage'],
          maxLogNumber: 1000
        });
      }
    }
  }
}

这样在移动端H5环境中就可以像浏览器一样查看控制台日志了

跨域设置

在本地开发H5时,可能会遇到跨域问题,可以在manifest.json中配置代理:

"h5": {
  "devServer": {
    "https": false,
    "port": 8080,
    "proxy": {
      "/apis": {
        "target": "https://www.example.com",
        "changeOrigin": true,
        "secure": false,
        "pathRewrite": {
          "^/apis": ""
        }
      }
    }
  }
}

然后在请求时将原域名替换为/apis前缀即可

四、脱离HBuilderX的开发方案

虽然HBuilderX是UniApp官方推荐的IDE,但在VS Code中也可以完全脱离HBuilderX进行开发:

  1. 使用uniapp run插件:

    • 在VS Code中安装uniapp run插件

    • 配置launch.json文件指定平台和Vue版本

    • 通过调试视图启动项目16

  2. 使用命令行工具:

    • 通过vue-clidegit创建项目

    • 使用npm/pnpm脚本运行和构建

    • 完全不需要安装HBuilderX

  3. 主要优势:

    • 更好的TypeScript支持

    • 更熟悉的开发环境

    • 更丰富的插件生态

    • 更灵活的项目配置

五、常见问题与解决方案

1. 编译速度慢或卡住

解决方案:

# 升级依赖
npx @dcloudio/uvm alpha
# 检查vite版本
# 如果版本过高可能导致问题,可以降级到稳定版本

 类型错误

对于VS Code中UniApp内置组件报错的问题:

  1. 确保安装了正确的类型声明文件

  2. 检查tsconfig.json配置

  3. 必要时添加类型断言

3. 依赖冲突

当出现ERESOLVE could not resolve错误时:

  1. 检查package.json中的版本要求

  2. 尝试删除node_modulespackage-lock.json后重新安装

  3. 使用npm install --legacy-peer-deps安装

4. 样式问题

UniApp中页面的父元素uni-page-body默认不具有height: 100%,可以在App.vue中全局设置:

page {
  height: 100%;
}

注意在微信小程序中使用page选择器会警告,建议仅在App.vue中设置

六、高效开发技巧

  1. 快速创建页面‌:

    • 使用uni-create-view插件右键菜单快速生成页面模板

    • 自动注册到pages.json

  2. 条件编译‌:

// #ifdef MP-WEIXIN
console.log('这是微信小程序平台');
// #endif
// #ifdef H5
console.log('这是H5平台');
// #endif
  1. 代码片段‌:

    • 利用VS Code的代码片段功能创建常用模板

    • 可以基于不同平台设置不同的代码片段

  2. 调试技巧‌:

    • 使用debugger语句在VS Code中设置断点

    • 结合浏览器开发者工具调试H5端

    • 使用微信开发者工具的远程调试功能3245

通过以上配置和技巧,您可以在VS Code中获得与HBuilderX相当甚至更好的UniApp开发体验,同时还能利用VS Code强大的扩展生态和自定义能力。


标签: 分享IT知识

相关文章

拖延症重度患者怎样自救

对于拖延症的重度患者,自救的关键在于以下几点:识别并克服拖延的借口。拖延常常因为我们害怕、不确定、不想不舒服而找到各种借口。我们必须识破这些借口,并对自己说:“如果我拖延,后果将不堪设想。”制定清晰的...

敏捷开发

敏捷开发是一种以人为核心、迭代、循序渐进的开发方法。在敏捷开发中,软件项目的构建被切分成多个子项目,各个子项目的成果都经过测试,具备集成和可运行的特征。换言之,就是把一个大项目分为多个相互联系,但也可...

如何学习 javascript

学习JavaScript需要以下步骤:基础语法:学习JavaScript的基础语法,包括变量、数据类型、函数、循环、条件语句等。DOM 操作:学习如何操作 DOM,例如获取和修改元素、添加和删除事件处...

如何高效学习

努力和技巧的能力。以下是一些可以帮助你高效学习的方法:制定学习计划:制定一个清晰的学习计划,包括学习内容和时间表,有助于你更好地组织自己的学习并提高学习效率。创造良好的学习环境:在学习时,尽可能避免干...

如何写文章

过程,需要一定的技巧和准备。以下是一些写文章的步骤和技巧:确定文章的主题和目的:在开始写作之前,您需要明确文章的主题和目的。这有助于您确定文章的重点和方向。研究和收集信息:在开始写作之前,进行一些研究...

双因素理论

双因素理论是美国心理学家弗雷德里克·赫兹伯格(Frederick·Herzberg)于20世纪50年代后期提出的,这一理论的研究重点是组织中的人与工作的关系问题。双因素理论包括保健因素和激励因素。保健...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。