uniapp-vue3-vite 搭建小程序、H5 项目模板

搭建一个使用 UniAppVue 3Vite 的小程序与 H5 项目模板相对简单,下面将详细介绍步骤,包括环境配置、项目创建、代码结构和基本示例。

环境准备

  1. Node.js:确保你已安装 Node.js(建议使用 LTS 版本)。可以通过以下命令检查 Node.js 和 npm 的版本:

    bash 复制代码
    node -v
    npm -v
  2. Vite:全局安装 Vite(通常在项目创建时会自动安装):

    javascript 复制代码
    npm install -g create-vite
  3. UniApp :在安装了 HBuilderX 的情况下,也可以使用命令行工具。通过 npm 安装 @vue/cli

    bash 复制代码
    npm install -g @vue/cli

创建项目

  1. 使用 Vite 创建 UniApp 项目: 在终端中,使用以下命令创建一个新的项目:

    bash 复制代码
    npm create vite@latest my-uniapp-project --template vue
  2. 进入项目目录

    bash 复制代码
    cd my-uniapp-project
  3. 安装 UniApp 和相关依赖: 安装 UniApp 相关的依赖包:

    bash 复制代码
    npm install @dcloudio/uni-app
  4. 安装其他必要依赖

    bash 复制代码
    npm install @dcloudio/uni-cli-shared @dcloudio/vue-cli-plugin-uni @dcloudio/uni-helper

配置项目

  1. 修改 package.json : 在 package.json 中,添加以下 scripts 用于编译和开发:

    javascript 复制代码
    {
      "scripts": {
        "dev": "vite",
        "build": "vite build"
      }
    }
  2. 添加 vite.config.js 文件 : 在项目根目录下创建 vite.config.js 文件,配置 UniApp 支持:

    javascript 复制代码
    import { defineConfig } from 'vite';
    import vue from '@vitejs/plugin-vue';
    import uni from '@dcloudio/vite-plugin-uni';
    
    export default defineConfig({
      plugins: [vue(), uni()]
    });
  3. 创建项目结构 : 在 src 目录下,创建以下文件和文件夹结构:

    bash 复制代码
    ├── src
    │   ├── components       // 自定义组件
    │   ├── pages            // 页面
    │   │   ├── index.vue    // 首页
    │   │   └── about.vue     // 关于页
    │   ├── App.vue          // 根组件
    │   └── main.js          // 入口文件

示例代码

1. App.vue 文件
html 复制代码
<template>
  <router-view />
</template>

<script>
export default {
  name: 'App',
};
</script>

<style>
/* 全局样式 */
</style>
2. index.vue 文件
html 复制代码
<template>
  <view class="container">
    <text class="title">欢迎来到 UniApp + Vue 3 + Vite 项目!</text>
    <button @click="navigateToAbout">关于</button>
  </view>
</template>

<script>
export default {
  name: 'Index',
  methods: {
    navigateToAbout() {
      uni.navigateTo({
        url: '/pages/about/about'
      });
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
}
.title {
  font-size: 20px;
  font-weight: bold;
}
</style>
3. about.vue 文件
html 复制代码
<template>
  <view class="container">
    <text class="title">关于我们</text>
    <button @click="goBack">返回</button>
  </view>
</template>

<script>
export default {
  name: 'About',
  methods: {
    goBack() {
      uni.navigateBack();
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
}
.title {
  font-size: 20px;
  font-weight: bold;
}
</style>

运行项目

  1. 启动开发服务器: 在终端中运行以下命令:

    bash 复制代码
    npm run dev
  2. 打开浏览器 : 访问 http://localhost:3000 进行开发测试。

构建项目

  1. 构建小程序和 H5 版本

    bash 复制代码
    npm run build

    生成的构建文件将位于 dist 目录中。

注意事项

  • 使用 HBuilderX 进行小程序打包时,可以更方便地管理小程序的配置。
  • UniApp 的特性和API会有一些差异,确保在小程序和 H5 上进行测试。
  • 确保根据你的需求调整项目配置。

结论

通过以上步骤,你可以使用 UniAppVue 3Vite 创建一个基本的跨平台小程序和 H5 项目模板。

相关推荐
机器视觉知识推荐、就业指导10 分钟前
QML 批量创建模块 【Repeater】 组件详解
前端·c++·qml
lmryBC4916 分钟前
golang接口-interface
java·前端·golang
慕斯策划一场流浪23 分钟前
fastGPT—nextjs—mongoose—团队管理之团队列表api接口实现
开发语言·前端·javascript·fastgpt env文件配置·fastgpt团队列表接口实现·fastgpt团队切换api·fastgpt团队切换逻辑
LaoZhangAI44 分钟前
【2025最新】Claude免费API完全指南:无需信用卡,中国用户也能用
前端
cypking1 小时前
解决 axios get请求瞎转义问题
vue.js
向阳2561 小时前
SpringBoot+vue前后端分离整合sa-token(无cookie登录态 & 详细的登录流程)
java·vue.js·spring boot·后端·sa-token·springboot·登录流程
hepherd1 小时前
Flask学习笔记 - 模板渲染
前端·flask
LaoZhangAI1 小时前
【2025最新】Manus邀请码免费获取完全指南:5种稳定渠道+3个隐藏方法
前端
经常见1 小时前
浅拷贝与深拷贝
前端