# h5多页模版（vue3+nuxt3+ vant4）

**Repository Path**: ChuPiJiang/library-nuxt3-generate

## Basic Information

- **Project Name**: h5多页模版（vue3+nuxt3+ vant4）
- **Description**: watt-cli init 模版 

h5页面系统- 新版多页生成器
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 1
- **Created**: 2023-07-24
- **Last Updated**: 2025-01-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Library

## README

# Nuxt 3 Minimal Starter

这个项目是 watt-cli 脚手架里的一个模板项目，如 https://gitee.com/ChuPiJiang/watt-cli   

~~node 版本用 18.18.2~~
node 版本用 20.18.0

### 模板说明
会在命令行提示显示
模板列表
- 旧版中台系统（vue2 + ant-design + vuex + router） **[`开源模版`](https://gitee.com/ChuPiJiang/library_vue2_admin)**   已完成     
- 中台系统（vue3 + ant-design + vuex + router）    **[`开源模版`](https://gitee.com/ChuPiJiang/library_vue3_admin)**   已完成     
- CMS静态网站或博客（nuxt2 + generate）            **[`开源模版`](https://gitee.com/ChuPiJiang/library_nuxt2_generate)**   已完成     
- CMS网站Nuxt3新建站（nuxt3 + generate）           **[`开源模版`](https://gitee.com/ChuPiJiang/library-nuxt3-cms)**
- H5活动单页（nuxt3 + vant4 + h5 ）                **[`开源模版`](https://gitee.com/ChuPiJiang/library-nuxt3-generate)**   已完成 
- 前端框架文档（vue2 + vuepress）                   **[`开源模版`](https://gitee.com/ChuPiJiang/library_vuepress_doc)**   已完成     
- vue3前端框架文档（vuepress2 + vue3）              **[`开源模版`](https://gitee.com/ChuPiJiang/library_vuepress2_doc)**   已完成   

更多待加...


### 脚手架工具变量 
package.json  文件中有个变显，{{name}} 如果你不是通过 watt-cli 脚手架安装的话，请自行替换成 你想取名的字符串

### 项目发布
项目到线上站点的根目时，需要考虑的问题：

多个网站共用一个站点，还是单个网站一个站点（nginx 配置） ，项目里需要配置 baseURL 的路径也不想同，nuxt.config.ts 配置文件中，默认做了生产的配置与本地的配置，

线上是使用 /html/page  还当子站使用的

单个网站模式： '/'  也可以不配置，这个是默认值 
多个网站模式： '/root/xx' root 是站占的根目录， /xx 是二级站 

Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.

## Setup

Make sure to install the dependencies:

```bash
# npm
npm install

# pnpm
pnpm install

# yarn
yarn install

# bun
bun install
```

## Development Server

Start the development server on `http://localhost:3000`:

```bash
# npm
npm run dev

# pnpm
pnpm run dev

# yarn
yarn dev

# bun
bun run dev
```

## Production

Build the application for production:

```bash
# npm
npm run build

# pnpm
pnpm run build

# yarn
yarn build

# bun
bun run build
```

Locally preview production build:

```bash
# npm
npm run preview

# pnpm
pnpm run preview

# yarn
yarn preview

# bun
bun run preview
```

Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

## mitt

```javascript
// script setup
import { onMounted, onBeforeUnmount } from 'vue'

const { $on, $off } = useNuxtApp()
const { $on, $off } = useNuxtApp()
onMounted(() => {
  $on('startGame', () => {
    // TODO: start game logic
  })
  $on('exitGame', () => {
    // TODO: exit game logic
  })
})

onBeforeUnmount(() => {
  $off('startGame')
  $off('exitGame')
})
```

页面与组件中可以使用
```javascript
// script setup
const { $emits } = useNuxtApp()
$emits('startGame')
```