利用 VSCode 搭建 Vue 3 + Vite + UniApp 项目全攻略

最新推荐文章于 2025-04-14 08:00:00 发布

jieyucx

最新推荐文章于 2025-04-14 08:00:00 发布

阅读量1.2k

点赞数 9

分类专栏： uni-app vue3从入门到精通文章标签： vscode vue.js uni-app

本文链接：https://blog.youkuaiyun.com/jieyucx/article/details/146940211

版权

vue3从入门到精通同时被 2 个专栏收录

39 篇文章

订阅专栏

uni-app

23 篇文章

订阅专栏

利用 VSCode 搭建 Vue 3 + Vite + UniApp 项目全攻略

一、引言

在当今前端开发的浪潮中，Vue 3 凭借其卓越的性能和先进的特性，成为了众多开发者的首选框架；Vite 以其闪电般的构建速度，为开发过程带来了前所未有的流畅体验；而 UniApp 则凭借一次开发多端部署的强大能力，极大地提高了开发效率。本文将详细介绍如何使用 VSCode 创建一个基于 Vue 3、Vite 和 UniApp 的项目，让你能够快速开启跨平台开发之旅。

二、环境准备

在开始创建项目之前，你需要确保已经安装了以下环境：

Node.js：这是 JavaScript 的运行环境，许多前端工具都依赖于它。你可以从 Node.js 官网下载并安装最新的 LTS 版本。安装完成后，在终端中输入以下命令检查版本：

node -v
npm -v

VSCode：一款功能强大的代码编辑器，你可以从 VSCode 官网下载并安装。同时，建议安装以下 VSCode 扩展：
- Volar：Vue 3 的官方扩展，提供了语法高亮、代码提示等功能。
- ESLint：代码检查工具，帮助你编写规范的代码。
- Prettier：代码格式化工具，使代码风格保持一致。

三、创建项目

1. 使用 `npx degit` 初始化项目

在 VSCode 中打开终端（可以使用快捷键 Ctrl + 或 Cmd + ），执行以下命令来创建项目：

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

npx：是一个 npm 包执行工具，它允许你在不全局安装包的情况下运行包中的命令。
degit：用于从 Git 仓库克隆项目模板，相比于 git clone，它只下载最新的文件，不包含 Git 历史记录，速度更快。
dcloudio/uni-preset-vue#vite：指定了项目模板的仓库地址和分支。dcloudio/uni-preset-vue 是 UniApp 官方提供的项目模板仓库，#vite 表示使用基于 Vite 的模板。
my-uniapp-project：是你要创建的项目名称，你可以根据自己的需求进行修改。

2. 进入项目目录

创建完成后，使用以下命令进入项目目录：

cd my-uniapp-project

3. 安装依赖

在项目目录下，执行以下命令安装项目所需的依赖：

npm install

这个过程可能需要一些时间，具体取决于你的网络状况。

四、项目结构分析

安装完成后，使用 VSCode 打开项目文件夹，你会看到以下项目结构：

my-uniapp-project
├── public              # 静态资源目录
│   └── index.html      # 入口 HTML 文件
├── src                 # 源代码目录
│   ├── App.vue         # 根组件
│   ├── main.js         # 入口 JavaScript 文件
│   ├── pages           # 页面目录
│   │   └── index       # 示例页面
│   │       ├── index.vue
│   │       └── ...
│   ├── static          # 静态资源目录
│   ├── uni.scss        # 全局样式文件
│   └── pages.json      # 页面配置文件
├── .gitignore          # Git 忽略文件
├── package.json        # 项目配置文件
├── vite.config.ts      # Vite 配置文件
└── ...

public：存放静态资源，如 HTML 文件、图标等。
src：项目的源代码目录，包含所有的 Vue 组件、样式文件和 JavaScript 文件。
pages：存放项目的页面组件，每个页面对应一个文件夹。
static：存放静态资源，如图片、字体等。
pages.json：用于配置页面的路径、样式等信息。
vite.config.ts：Vite 的配置文件，你可以在这里对 Vite 进行自定义配置。

五、运行项目

1. 开发环境运行

在终端中执行以下命令启动开发服务器：

npm run dev:h5

这个命令会启动一个本地开发服务器，并在浏览器中打开项目的 H5 版本。你可以在浏览器中实时查看项目的效果，并且代码修改后会自动刷新页面。

2. 多端运行

UniApp 支持多端开发，你可以根据需要运行不同平台的项目：

小程序：

npm run dev:mp-weixin

这个命令会将项目编译成微信小程序的代码，并在微信开发者工具中打开。

App：

npm run dev:app-plus

这个命令会将项目编译成 App 端的代码，你可以使用 HBuilderX 进行打包和发布。

六、代码编写与调试

1. 编写代码

在 VSCode 中打开 src/pages/index/index.vue 文件，你可以看到一个简单的示例页面。尝试修改页面内容，保存后浏览器会自动刷新，显示修改后的效果。例如，将 <template> 标签内的内容修改为：

<template>
  <view class="container">
    <text>Hello, Vue 3 + Vite + UniApp!</text>
  </view>
</template>

2. 调试代码

在开发过程中，你可能需要调试代码。VSCode 提供了强大的调试功能，你可以在代码中设置断点，然后使用调试工具进行调试。具体步骤如下：

在代码中点击行号旁边的空白处设置断点。
打开 VSCode 的调试面板（快捷键 Ctrl + Shift + D 或 Cmd + Shift + D）。
选择调试配置，例如 Launch Chrome。
点击调试按钮开始调试。

七、总结

通过以上步骤，你已经成功使用 VSCode 创建了一个基于 Vue 3、Vite 和 UniApp 的项目。现在你可以开始编写自己的代码，开发跨平台的应用程序了。在开发过程中，你可以根据项目的需求对 Vite 进行配置，使用 UniApp 提供的丰富组件和 API 来实现各种功能。希望本文对你有所帮助，祝你开发愉快！

以上博客内容详细介绍了使用 VSCode 创建 Vue 3 + Vite + UniApp 项目的全过程，从环境准备到项目创建、运行和调试，都进行了详细的说明。你可以根据自己的实际情况进行调整和补充。