完整的 nuxt3 + vue + ts 服务端渲染项目搭建教程，克隆就能用，新手必学，建议收藏

前言

一、新建仓库

1.1 新建 gitee 仓库

1.2 克隆到本地

二、初始化 nuxt 项目

2.1 初始化 nuxt

2.1.1 使用什么包管理工具

2.1.2 是否初始化 git仓库

2.1.3 整理项目结构

2.1.4 提交代码

2.2 运行项目

2.2.1 运行 npm run dev

2.2.2 增加 .nvmrc 文件

2.2.3 运行项目

2.2.4 提交代码

三、添加各种插件

3.1 安装 sass

3.1.1 增加 assets/css/common.scss

3.2.2 增加 pages/index.vue

3.2.3 修改 app.vue

3.2.4 运行项目

3.2.5 提交代码

3.2 使用 autoprefixer

3.2.1 安装 autoprefixer

3.2.2 在 nuxt.config.ts 中配置

3.2.3 提交代码

3.3 安装 tailwindcss

3.3.1 安装 tailwindcss

3.3.2 在 nuxt.config.ts 中配置

3.3.3 增加 tailwind.config.js

3.3.4 修改 common.scss

3.3.5 测试一下

3.3.6 提交代码

3.4 使用 pinia

3.4.1 安装 pinia

3.4.2 安装 @pinia/nuxt

3.4.3 配置 nuxt.config.ts

3.4.4 新建 store/index.ts

3.4.5 测试一下

3.4.6 提交代码

3.5 使用 nuxt-icons

3.5.1 安装 nuxt-icons

3.5.2 在 nuxt.config.ts 中配置

3.5.3 新建 assets/icons

3.5.4 测试一下

3.5.5 提交代码

3.6 使用 prettier + eslint

3.6.1 安装插件

3.6.2 新增 .eslintrc.js

3.6.3 新增 .prettierrc.js

3.6.4 新增 .prettierignore

3.6.5 格式化所有文件

3.6.6 提交代码

3.6.7 使用路径别名

3.6.8 应用全局样式

3.7 增加 browserslist

3.7.1 增加 browserslist

3.7.2 提交代码

3.8 使用 ant-design-vue

3.8.1 安装 ant-design-vue

3.8.2 引用样式编辑

3.8.3 测试一下

3.8.4 提交代码

小结

四、请求封装

4.1 安装 axios

4.2 新建/复制文件

五、公共方法

5.2 安装 callapp-lib

5.3 新建/复制文件

5.4 提交代码

六、多语言

6.1 安装 vue-i18n

6.2 安装 @nuxtjs/i18n

6.3 新建 plugins 文件夹

6.4 提交代码

七、测试

7.1 测试请求

7.2 解决问题

7.3 测试请求

7.3.1 增加请求

7.3.2 测试效果

7.3.3 提交代码

7.4 测试多语言

7.4.1 增加代码

7.4.2 测试效果

7.4.3 提交代码

八、部署

8.1 本地打包

8.1.1 运行 npm run build 打包

8.1.2 运行 npm run preview 预览

8.1.3 解决问题

8.1.4 提交代码

8.2 仓库推送到远端

8.3 使用 vercel 部署

总结

前言

在我的《前端工程化系统教程》用了3篇文章，来详细讲解 vite + ts +vue3 项目的搭建流程，本篇文章的内容是，搭建服务端渲染的 Nuxt3 项目。有很多内容和在 vite 项目中有重叠，所以可能不够详细，大家可以参考之前的文章。vite 是打包工具，nuxt3 也是基于 vite的一个框架，所以二者大同小异。

项目的完整的流程图如下

一、新建仓库

1.1 新建 gitee 仓库

我用 gitee 仓库纯粹是因为不方便科学上网，大家也可以使用 github

我的仓库地址是 learn-nuxt，这里面有个小问题，如果你的仓库没有一个文件，是没有 master 分支的，所以至少需要初始化一个文件，比如readme之类的。还可以根据 git 的提示增加开源许可证之类的。

1.2 克隆到本地

在之前这篇搭建vite项目的文章中，是先创建本地的仓库，再创建远端gitee仓库，然后再关联起来，都行，看你怎么方便怎么来。

二、初始化 nuxt 项目

在本地电脑选择一个文件夹初始化 nuxt 项目，我选择在本地仓库地址 learn-nuxt 的文件夹下面新建项目，因为如果你在 workspace 下面再创建一个名字叫 learn-nuxt 的项目，二者名字会冲突。

2.1 初始化 nuxt

pnpm dlx nuxi@latest init learn-nuxt

运行之后有几个选项，

2.1.1 使用什么包管理工具

我们选择 pnpm

2.1.2 是否初始化 git仓库

我们选择 yes，这个步骤选择 yes，其实就是给你自动创建一个 .gitignore 文件

2.1.3 整理项目结构

初始化之后项目结构如下，我们可以看见，项目有两层learn-nuxt文件夹，所以我们要把文件复制到外层，删掉里面的

最终的项目结构如下

2.1.4 提交代码

2.2 运行项目

2.2.1 运行 npm run dev

npm run dev

然后我们发现有问题，首先是一个警告，说当前版本 node 是 16.16.0 可能有兼容问题，需要升级到18。随后就是一个运行错误。其实这个问题就是因为 node 版本过低导致的。

请看nuxt官方的文档，强调了需要使用 16 以上的 node，虽然我的是1 6.16.0 但是看起来还是版本不够，所以我们可以需要使用 node 18 的版本。

Q: 你知道为什么 node16 版本太低，就用 node18 么，咋不用 node17 呢? 答案在这里

2.2.2 增加 .nvmrc 文件

配置 .nvmrc 里面写上需要的 node 版本号，再下一次打开 terminal 的时候会自动执行 nvm use 命令，切换 node 版本，当然这有几个条件需要我们：

安装了 node18
安装了 nvm
使用 vscode【因为这是 vccode 的插件的功能】
使用 mac 电脑【因为这个插件暂时不支持 window 】

2.2.3 运行项目

这回我们可以成功运行项目了

2.2.4 提交代码

三、添加各种插件

3.1 安装 sass

pnpm i sass -D

sass 是每一个使用 scss 项目都要安装的一个预处理器，运行命令发现下面这个错误，按照提示，重新运行 pnpm install ，然后再安装 sass 即可。

3.1.1 增加 assets/css/common.scss

在根目录下，依次新建文件夹 assets 、css 以及文件common.scss，并加入样式

3.2.2 增加 pages/index.vue

nuxt 项目是自动生成路由的，无需使用 vue-router，所有的路径都放在 pages 文件夹下面

3.2.3 修改 app.vue

3.2.4 运行项目

完美运行

3.2.5 提交代码

3.2 使用 autoprefixer

3.2.1 安装 autoprefixer

pnpm install autoprefixer -D

3.2.2 在 nuxt.config.ts 中配置

3.2.3 提交代码

3.3 安装 tailwindcss

在 vite项目中，我们使用的是 windicss，这篇文章我们用 tailwindcss，他们两个其实差不多，有部分语法不通，但是 tailwindcss 的社区更加强大，你想用啥都行。

3.3.1 安装 tailwindcss

pnpm i tailwindcss -D

3.3.2 在 nuxt.config.ts 中配置

3.3.3 增加 tailwind.config.js

3.3.4 修改 common.scss

3.3.5 测试一下

修改 pages/index.vue 使用 tailwind 语法设置样式

3.3.6 提交代码

这里面有一个小问题，如果你用的是 vscode，在上面一个步骤中编辑器可能有这个提示红线。

仔细一看，提示的错误是，模版只能有一个根元素。

但是仔细想想不对啊！！我们用的 vue3 已经允许模版有多个根元素了，所以这个肯定不是语法错误，是编辑器提示的问题。

这是因为我们安装了两个 vcode 关于 vue 的提示插件，一个是针对 vue2 的，一个是针对vue3 的，我们在这个项目中只需要保留对 vue3 的 volar 即可

当然，我们也不能把 vuter 卸载了，要不其他的 vue2 项目就不给提示了，所以我们只需要把vuter 插件针对这个项目禁用即可，禁用后需要重启编辑器才能生效

3.4 使用 pinia

3.4.1 安装 pinia

pnpm i pinia

3.4.2 安装 @pinia/nuxt

pnpm i @pinia/nuxt

3.4.3 配置 nuxt.config.ts

3.4.4 新建 store/index.ts

3.4.5 测试一下

3.4.6 提交代码

3.5 使用 nuxt-icons

3.5.1 安装 nuxt-icons

pnpm i nuxt-icons

3.5.2 在 nuxt.config.ts 中配置

3.5.3 新建 assets/icons

随便放一个svg 图片进去

3.5.4 测试一下

3.5.5 提交代码

3.6 使用 prettier + eslint

3.6.1 安装插件

后面的 typescript 一定要安装，这个和 vite 项目不通，nuxt3 项目初始化后默认没有 typescript 插件

pnpm i @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-prettier eslint-plugin-prettier prettier eslint-plugin-vue typescript -D