nuxt3项目创建

安装

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'
        //登录后获取token
        if(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