Nuxt3项目实战篇1---安装到启动

首先：感谢村长杨，他的博客带领我入门，看了他的一系列教程，受益匪浅。 历经一个月，终于做完了一个完整的项目，做完后发现有很多问题，所以决定重新做一遍，顺便把之前和现在的问题都拿出来记录一遍。让我们开始吧.

工欲善其事必先利其器，要使用nuxt3, 我们需要用到的工具有:

• Node.js* (latest LTS version)
• Visual Studio Code
• Volar Extension : 与vetur相同，volar是一个针对vue的vscode插件，不过与vetur不同的是，volar提供了更为强大的功能，让人直呼卧槽。直接安装到vscode就行

注意：如果您已经安装了 Node.js，请检查node --version您使用的是 14.16 或更高版本 16.11。

进入正题：让我们打开nuxt3这个新世界的大门吧！

安装Nuxt3

npx nuxi init nuxt3-new
//安装成功后的目录
--.gitignore
--app.vue
--nuxt.config.ts
--package.json
--README.md
--tsconfig.json

2. 进入目录, 安装依赖

//进入目录
cd nuxt-new

//安装依赖
yarn install

3. 启动项目

yarn dev

项目正常启动。 到目前为止，我们的Nuxt项目结构是这样

--.nuxt
--node_modules
--.gitignore
--app.vue
--nuxt.config.ts
--package.json
--README.md
--tsconfig.json

安装中遇到的问题：
could not fetch remote https://github.com/nuxt/starter
Failed to clone template from nuxt/starter#v3. Please check the repo is valid and that you have installed git correctly.

既然是提示git安装不正确，那么我们重新在vscode里面安装一个git

如果vscode中也还是没有弄好，node的终端也没有成功，我们可以直接在git bash中运行npx nuxi init nuxt3-new。 至少我是在git bash中成功了的。

目前我们有一个最简单的目录结构，对于新手的我们，仍然毫无头绪，标准的目录结构到底应该是什么样子呢，官方给了我们标准的答案。请参考：https://v3.nuxtjs.org/guide/concepts/introduction

nuxt ： 开发环境生成的包。 即： npm run dev的时候自动生成的目录
.output： 项目打包生成的目标文件，生产环境需要用到的包.  即： npm run build自动生成的包
assets：网站资源目录， 一般存放css,sass,fonts和一些需要生成base64的小图。 注意：大图不放在这，放在public目录下
components： 放组件， 这里的组件可以自动导入您的页面和其他组件中，不需要再用import引入
composables：  Nuxt3支持使用自动composables/导入，自动将您的 Vue 组合导入到您的应用程序中！个人认为用于存储等功能
content：Nuxt内容模块读取content/项目中的目录并解析.md、和文件.yml，为您的应用程序创建基于文件的 CMS。.csv.json
layouts： 布局框架，可以整个应用中使用，公共的header好footer放在这里不要太爽
middleware：Nuxt提供了一个可定制的路由中间件框架，您可以在整个应用程序中使用它常适合在导航到特定路由之前提取您想要运行的代码。
node_modules
pages： 页面目录。 没有pages这个目录，就意味着vue-router不被引入，此目录不存在是为了减少应用程序的包的大小
plugins： 插件目录，导入外部插件，Nuxt 将自动读取您plugins目录中的文件并加载它们。您可以在文件名中使用.server或.client后缀以仅在服务器或客户端加载插件。
public： 和nuxt2中的static效果一样，该public/ 目录直接在服务器根目录中提供，并包含必须保留其名称。 有意思的是，在public下的images可以直接使用/images/xxx.jpg, 而不需要使用过public/images/xxx。jpg
server
.gitignore
app.vue： Nuxt 3 应用程序中的主要组件， 启动文件。 如果您有pages/ 目录，要显示当前页面，请使用组件，配合layouts的布局文件使用，应该会更爽吧
.nuxtignore ：您可以使用.nuxtignore文件让 Nuxt 在构建阶段忽略项目根目录中的layout、pages和components文件。该文件遵循与和文件相同的规范，其中每一行都是一个全局模式，指示应忽略哪些文件。
nuxt.config.ts: 您的nuxt的所有所有配置都在这里了， 配置head,seo，打包，跨域等
package.json ：您的应用程序的所有依赖项和脚本
tsconfig.json

接下面，我们就按照这个标准目录动手吧。

nuxt3开发中的踩坑记录

• 1. pages下面必须有一个index.vue的文件 有了pages， app.vue中的就可以光荣退场了。退场之后，pages目录下需要一个index.vue作为启动启动文件的入口。否则会报错 [Vue Router warn]: No match found for location with path "/"。 在官网中并没有的api, 所以它具体是干什么的，我是没有任何头绪。
• 2. public文件夹替换掉nuxt2的static文件夹 熟悉nuxt2的人都知道static文件夹是问了存放静态资源，里面的文件可以直接原样打包到目标文件下。如果在nuxt3中还是使用static,那么你可能读取不到你的favicon.icon（坑了老娘很久）
• 3. .output是生产环境需要的目标文件。 相当于nuxt2的的.nuxt文件夹

留个问题：既然使用的是nuxt, 就代表需要做seo, 在nuxt3中怎么实现做seo?