一、Nuxt3官网

快速创建一个Nuxt3应用

npx nuxi@latest init my-app

（填个坑）

//如果报错
Failed to download template from registry: request to https://raw.githubusercontent.com/nuxt/starter/templates/templates/v3.json failed, reason: connect ECONNREFUSED 0.0.0.0:443

解决：先ping raw.githubusercontent.com是否连通
如果不通，访问https://ipaddress.com/website/raw.githubusercontent.com
Win 修改C:\Windows\System32\drivers\etc-----mac下host配置路径：/etc/hosts

直接在最后新增一行(这个添加是当你的IP被Ban的时候建议使用，可以进去的话建议用下面格式，IP4地址是测试出来的IP) 185.199.108.133（建议用你测试出来的IP） raw.githubusercontent.com
格式是(IP4地址 raw\.githubusercontent.com)

添加完host后，再ping一下 ping raw\.githubusercontent.com\ 是否连通

二、开始运行测试Nuxt

//安装环境
npm install
//运行
npm run dev

三、自行选择安装tailwindcss

按官方教程安装tailwindcss

四、关闭SSR

最新的Nuxt可能会自动打开ssr在前面学习的过程中建议关闭，这样便于学习

在nuxt.config.ts下添加

ssr:false

五、创建使用一个Route

在Nuxt上使用Route可以创建一个Pages文件。在文件下创建.vue文件，创建后会自动生成路由，其内部实现原理是一个vue-router

（文件名）.vue,文件名就是对应的路由地址。

我们也可以在pages下创建文件夹，文件夹下的index.vue就是对应文件夹路由的view。pages下的index.js就是根路由的view。

[id].vue文件用于路由参数对应vue-router的

{
"path": "/login/:id",
"component": "pages/login/[id].vue"
}

我们需要在app.vue下添加一个<NuxtPage />来展示内容（具体pages内容可以查看Installation · Get Started with Nuxt）

Link系列可以使用<NuxtLink></NuxtLink> NuxtLink 有很多attrs可以自行操作

    <NuxtLink to="/login">Login</NuxtLink>

六、创建使用一个Compoment

根目录下创建一个Compoments文件夹内部创建.vue文件即可以在别的.vue文件引入组件。引入不需要import而是直接组件使用的方式

app.js下引入

一个简单的构建

//Myheader引入  （命名规则查看下图）
<template>
  <div>header</div>
  <div><KON></KON></div>
</template>

Nuxt--快速入门 一