vite + vue3 + ts + SSR 使用 Nuxt 框架

NuxtJs，是一个基于 Vue.js 的通用应用框架。支持单页应用程序（SPA）、服务端渲染（SSR）、静态化（预渲染）。

Nuxt 3，支持 vue 3。Nuxt 2，支持 vue 2。

安装 Nuxt3

npx nuxi init project-name

cd project-name

npm install
npm run dev

安装 Nuxt2

npm init nuxt-app project-name

使用键盘方向键（上下箭头键），来选择单选项，然后回车。使用空格键，选中多选项，然后回车。

# 输入项目名称
? Project name: (nuxtjs)

# 选择编程语言。选中 TypeScript，然后回车
? Programming language: (Use arrow keys)
  JavaScript
> TypeScript

# 选择打包方式。选中 NPM，然后回车
? Package manager:
  Yarn
> Npm

# 选择 UI 框架。选中 Element，然后回车
? UI framework: (Use arrow keys)
 None
  Ant Design Vue
  BalmUI
  Bootstrap Vue
  Buefy
  Chakra UI
>  Element
  Oruga
  Primevue
  Tachyons
  Tailwind CSS
  Windi CSS
  Vant
  View UI
  Vuetify.js

# 选择模板引擎。选中 Pug，然后回车
? Template engine: (Use arrow keys)
 HTML
>  Pug

# 选中第三方模块。使用方向键调整选项，使用空格键选中，选中 Axios、PWA，然后回车
? Nuxt.js modules:
 ◉ Axios - Promise based HTTP client
>◉ Progressive Web App (PWA)
 ◯ Content - Git-based headless CMS

# 选择格式化工具。使用方向键调整选项，使用空格键选中，选中 ESLint、Prettier，然后回车
? Linting tools: (Press <space> to select, <a> to toggle all, <i< to invert selection)
? Linting tools:
 ◉ ESLint
>◉ Prettier
 ◯ Lint staged files
 ◯ StyleLint
 ◯ Commitlint

# 选择测试框架。使用方向键调整选项，选中 Jest，然后回车
? Testing framework:
  None
> Jest
  AVA
  WebdriverIO
  Nightwatch

# 渲染技术。使用方向键调整选项，选中  Universal (SSR / SSG)，然后回车
> Universal (SSR / SSG)
  Single Page App

# 部署方式。Nodejs中部署（也就是SSR部署）、或者是静态文件部署。
? Deployment target: (Use arrow keys)
> Server (Node.js hosting)
  Static (Static/Jamstack hosting)

# 选择开发工具。都不选择，直接回车
? Development tools: (Press <space> to select, <a> to toggle all, <i< to invert selection)
>◯ jsconfig.json (Recommended for VS Code if you're not using typescript)
 ◯ Semantic Pull Requests
 ◯ Dependabot (For auto-updating dependencies, GitHub only)

# 集成的工具，直接回车
? Continuous integration: (Use arrow keys)
> None
  GitHub Actions (GitHub only)
  Travis CI
  CircleCI

# 版本管理工具，选择 None 回车
? Version control system:
  Git
> None

cd project-name
npm run dev