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

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

环境准备

Node.js：确保你已安装 Node.js（建议使用 LTS 版本）。可以通过以下命令检查 Node.js 和 npm 的版本：
bash 复制代码
```
node -v
npm -v
```
Vite：全局安装 Vite（通常在项目创建时会自动安装）：
javascript 复制代码
```
npm install -g create-vite
```
UniApp ：在安装了 HBuilderX 的情况下，也可以使用命令行工具。通过 npm 安装 @vue/cli：
bash 复制代码
```
npm install -g @vue/cli
```

创建项目

使用 Vite 创建 UniApp 项目：在终端中，使用以下命令创建一个新的项目：
bash 复制代码
```
npm create vite@latest my-uniapp-project --template vue
```
进入项目目录：
bash 复制代码
```
cd my-uniapp-project
```
安装 UniApp 和相关依赖：安装 UniApp 相关的依赖包：
bash 复制代码
```
npm install @dcloudio/uni-app
```

安装其他必要依赖：

bash 复制代码

npm install @dcloudio/uni-cli-shared @dcloudio/vue-cli-plugin-uni @dcloudio/uni-helper

配置项目

修改 package.json ：在 package.json 中，添加以下 scripts 用于编译和开发：
javascript 复制代码
```
{
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  }
}
```

添加 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()]
});

创建项目结构 ：在 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>

运行项目

启动开发服务器：在终端中运行以下命令：
bash 复制代码
```
npm run dev
```
打开浏览器 ：访问 http://localhost:3000 进行开发测试。

构建项目

构建小程序和 H5 版本：
bash 复制代码
```
npm run build
```
生成的构建文件将位于 dist 目录中。

注意事项

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

结论

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

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

环境准备

创建项目

配置项目

示例代码

1. App.vue 文件：

2. index.vue 文件：

3. about.vue 文件：

运行项目

构建项目

注意事项

结论

1. `App.vue` 文件：

2. `index.vue` 文件：

3. `about.vue` 文件：