# nuxt-demo

**Repository Path**: free_pan/nuxt-demo

## Basic Information

- **Project Name**: nuxt-demo
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2024-02-23
- **Last Updated**: 2024-04-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Nuxt 3 项目模板

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

## 已整合特性

* tailwind css
* pinia
* @nuxt/image
* nuxt-swiper
* @vant/nuxt
* nuxt-icons
* vant
* postcss
* 限制了包管理器，仅允许使用pnpm

## 你可能会有的疑惑

### 为什么整合的是 vant, 而非 element-plus

`element-plus`广泛用于做后台管理系统，而应该没人用 `nuxt` 做后台管理系统，nuxt主要优点是利于SEO，类似门户网站，企业站适合 nuxt, 而现如今基本要求适配移动端，因此选择了`vant`

### 为什么你既安装了`@pinia/nuxt`又安装了`pinia`?

必须两个都安装，否则: 执行 `pnpm dlx nuxi generate` 命令，生成静态文件时，会报错: `Cannot find module 'pinia/dist/pinia.mjs'`, 相关问题可见：[Pinia not working](https://github.com/nuxt/nuxt/issues/14585)

### 你用 `@nuxt/kit` 这个依赖做了什么?

执行 `pnpm dlx nuxi generate` 命令，依赖`@nuxt/kit`

### 为什么安装了`nuxt-swiper`又安装了`swiper`?

为了使用`swiper`包的ts定义

### 为什么安装了`@nuxtjs/tailwindcss`又安装了`tailwindcss`?

为了使用`tailwindcss`包的ts定义

### `systemjs`, `@ungap/global-this` 这两个包是做什么用的?

为了解决nuxt在低版本浏览器报如下两个错的问题：

* `Uncaught ReferenceError: System is not defined`
* `Uncaught ReferenceError: globalThis is not defined`

## 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
```

生成静态html页面

```bash
pnpm dlx nuxi generate  
```

静态html页面生成之后，可以通过如下命令预览

```bash
pnpm dlx serve .output/public
```

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

## 浏览器兼容性

nuxt3默认配置的情况下，最低只能到`Chrome80`版本。

当前通过 `@vitejs/plugin-legacy`, `systemjs`, `@ungap/global-this` 的组合配置，最低兼容到`Chrome 69`