Nuxt 3 项目模板

Look at the Nuxt 3 documentation 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

你用 @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:

# npm
npm install

# pnpm
pnpm install

# yarn
yarn install

# bun
bun install

Development Server

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

# npm
npm run dev

# pnpm
pnpm run dev

# yarn
yarn dev

# bun
bun run dev

Production

Build the application for production:

# npm
npm run build

# pnpm
pnpm run build

# yarn
yarn build

# bun
bun run build

Locally preview production build:

# npm
npm run preview

# pnpm
pnpm run preview

# yarn
yarn preview

# bun
bun run preview

生成静态html页面

pnpm dlx nuxi generate  

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

pnpm dlx serve .output/public

Check out the deployment documentation for more information.

浏览器兼容性

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

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