Vue3 + Vite创建uni-app JavaScript项目教程（VSCode环境）

环境搭建：从工具安装到开发准备

2025年的跨平台开发中，Vue3 + Vite已成为前端工程化的主流方案。要基于VSCode构建uni-app JavaScript项目，首先需完成基础环境配置。Node.js 18+版本是必要前提，它提供了npm包管理工具和Vite所需的运行时环境。访问Node.js官网下载LTS版本后，通过终端输入node -v和npm -v验证安装，确保版本分别显示v18.x.x和9.x.x以上。

VSCode作为核心编辑器，需安装三个关键插件提升开发效率：

• Vue Language Features (Volar)：Vue3官方推荐的语法高亮与智能提示工具，替代旧版Vetur，需在扩展设置中禁用Vetur避免冲突；
• ESLint：代码规范检查工具，可自动修复缩进、变量声明等常见问题；
• uni-helper：提供uni-app组件API的智能提示，鼠标悬停即可查看组件文档。

完成后，通过Ctrl+Shift+P打开VSCode命令面板，输入Preferences: Open User Settings (JSON)，添加如下配置确保文件关联正确：

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

项目创建：从命令行到工程初始化

使用Vite模板创建uni-app项目是官方推荐的高效方式。打开VSCode终端（快捷键Ctrl+），执行以下命令：

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

该命令通过degit工具克隆uni-app官方的Vite模板（#vite分支为JavaScript环境，#vite-ts为TypeScript环境，需注意区分）。等待模板下载完成后，进入项目目录并安装依赖：

cd my-uniapp-project
npm install

依赖安装完成后，项目结构如下：

my-uniapp-project/
├── public/           # 静态资源入口
├── src/              # 源代码目录
│   ├── pages/        # 页面组件（每个页面一个文件夹）
│   ├── static/       # 本地静态资源（图片、字体等）
│   ├── App.vue       # 根组件
│   ├── main.js       # 入口文件（JS环境）
│   └── pages.json    # 页面路由配置
├── vite.config.js    # Vite配置文件（JS环境）
└── package.json      # 项目依赖配置

关键区别：JavaScript环境下，配置文件为vite.config.js，且无需tsconfig.json。若创建时误选TypeScript模板，可删除项目重新执行上述命令，确保使用#vite分支。

插件推荐：提升开发效率的必备工具

VSCode插件

• uni-create-view：右键即可快速创建uni-app页面模板，自动生成.vue文件和对应的路由配置，解决手动创建页面的繁琐流程；
• uniapp小程序扩展：支持鼠标悬停查看uni-app API文档，无需频繁切换浏览器查阅官网；
• Prettier：代码格式化工具，配合ESLint可实现保存时自动修复格式问题，配置.prettierrc文件如下：

  {
    "semi": false,
    "singleQuote": true,
    "printWidth": 120
  }
  

项目依赖插件

• pinia：Vue3官方状态管理库，替代Vuex，语法更简洁且支持Composition API。安装命令：

  npm install pinia
  

• uni-ui：官方组件库，提供按钮、表单等常用组件，通过easycom机制实现自动导入，无需手动注册。安装后在pages.json中配置：

  {
    "easycom": {
      "autoscan": true,
      "custom": {
        "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
      }
    }
  }
  

运行调试：多端预览与问题排查

运行到H5（最快调试方式）

执行以下命令启动H5开发服务器：

npm run dev:h5

Vite会自动构建项目并打开浏览器，默认地址为http://localhost:5173。修改代码后页面实时刷新，适合快速调试UI布局。

运行到微信小程序

1. 首先在微信公众平台申请小程序AppID，记录备用；
2. 执行命令编译小程序代码：

   npm run dev:mp-weixin
   

3. 打开微信开发者工具，导入项目根目录下的unpackage/dist/dev/mp-weixin文件夹，在设置中填入AppID即可预览。

常见问题解决

• 微信开发者工具无法打开项目：检查VSCode终端输出的路径是否正确，手动在微信开发者工具中选择对应文件夹；
• H5端样式错乱：确保使用uni-app内置组件（如<view>替代<div>，<text>替代<span>），避免浏览器兼容性问题；
• 依赖安装失败：删除node_modules和package-lock.json，执行npm cache clean --force后重新安装。

实例代码：从状态管理到页面开发

1. Pinia状态管理示例（用户信息存储）

在src/stores目录下创建user.js：

// src/stores/user.js
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    name: '',
    avatar: ''
  }),
  actions: {
    async fetchUserInfo() {
      // 模拟API请求
      const res = await uni.request({
        url: 'https://api.example.com/user'
      })
      this.name = res.data.name
      this.avatar = res.data.avatar
    }
  }
})

在main.js中挂载Pinia：

// src/main.js
import { createSSRApp } from 'vue'
import * as Pinia from 'pinia'
import App from './App.vue'

export function createApp() {
  const app = createSSRApp(App)
  app.use(Pinia.createPinia())
  return { app }
}

2. 页面组件中使用状态管理

在src/pages/index/index.vue中编写页面：

<template>
  <view class="container">
    <view class="user-info" v-if="userStore.name">
      <image :src="userStore.avatar" class="avatar"></image>
      <text class="name">{{ userStore.name }}</text>
    </view>
    <button @click="userStore.fetchUserInfo" class="fetch-btn">
      获取用户信息
    </button>
  </view>
</template>

<script setup>
import { useUserStore } from '@/stores/user'
const userStore = useUserStore()
</script>

<style>
.container {
  padding: 20rpx;
}
.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
}
.name {
  font-size: 32rpx;
  margin-top: 10rpx;
}
.fetch-btn {
  margin-top: 30rpx;
  background: #007aff;
  color: white;
}
</style>

关键说明：

• <script setup>无需lang="ts"，默认即为JavaScript环境；
• 通过useUserStore()获取状态实例，直接调用fetchUserInfo()方法；
• 模板中可直接访问userStore.name，无需.value（Pinia自动解包）。

3. 页面路由配置

在pages.json中添加页面路由，确保导航正常：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    }
  ]
}

总结：JavaScript环境开发要点

本教程从环境搭建到实例开发，完整覆盖了Vue3 + Vite + uni-app（JavaScript）在VSCode中的开发流程。核心要点包括：

• 环境区分：通过模板分支（#vite）创建纯JavaScript项目，避免TypeScript配置干扰；
• 插件选择：聚焦JS开发必备工具，无需安装TypeScript类型声明文件；
• 状态管理：使用Pinia的JavaScript API，简化组件间数据共享。

通过这套流程，开发者可快速上手uni-app跨平台开发，兼顾H5、小程序等多端需求。后续可进一步学习条件编译（<!-- #ifdef MP-WEIXIN -->）实现平台差异化功能，或集成uView Plus等UI库提升界面开发效率。