安装
npx nuxi@latest init <project-name>
此时会出现报错，需要在host文件中加入
185.199.108.133 raw.githubusercontent.com
再次执行命令，进入安装
此处选择npm，出现下图表示安装成功
启动项目
执行npm run dev，访问http://localhost:3000/出现下入界面
删除app.vue页面内容，页面底部会出现一个按钮
找到nuxt.config.ts文件，将属性设为false即可
语法介绍
1、配置layouts
新建Header和Footer组件，新建layouts文件夹，新建global.vue，内容如下：
使用布局
新建pages文件夹，新建about页面
2、添加element-plus
npm install element-plus
npm install @element-plus/nuxt
nuxt.config.ts文件中添加两行代码
3、添加scss，使用变量
npm install sass
新建assets文件夹，新建styles文件夹，新建common.scss文件，加入变量
nuxt.config.ts文件中添加几行代码，即可使用
4、动态tdk、SEO
页面中添加useSeoMeta
const num = Math.random()
useSeoMeta({title: '首页'+num,ogTitle: '我的神奇网站',description: '这是我的神奇网站，让我来告诉你关于它的一切。',ogDescription: '这是我的神奇网站，让我来告诉你关于它的一切。',ogImage: 'https://example.com/image.png',twitterCard: 'summary_large_image',
})
5、添加请求axios
npm install axios
新建api文件夹，新建request.js文件，其余用法与vue一样，无需配置代理
import axios from 'axios'
import { ElMessage } from "element-plus"
const request = axios.create({baseURL:'http://192.168.0.102:48080',//本地使用
})
request.interceptors.request.use(config => {const token = 'Bearer c4322eded85c4c2a80b56095fdf1b6ac'//登录后获取tokenif(token){config.headers.authorization = `${token}`}return config},err => {return Promise.reject(err)}
)
request.interceptors.response.use(response => {if (response.data.code !== 0) {return Promise.reject(response.data)} else {return response.data}},error => {// console.log('error:', error)if(error.response){ElMessage({message: '请求错误！请求服务器无响应！',type: 'error',duration: 2000 //提示持续2秒})}return Promise.reject(error.response)}
)
export default request
)
)
