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

6、路由

默认根据页面层级结构决定path

嵌套路由

比如user文件夹包含list.vue，该页面路由就是/user/list

使用definePageMeta修改页面路由

//定义页面路由
definePageMeta({
  path:'/user-list'
})

 修改后，访问/user/list则为404

动态路由

pages目录下新建user文件夹，新建[id].vue

// [id].vue
<template>
  <div>动态路由</div>
</template>
<script setup lang="ts">
  const route = useRoute()
  console.log(route.params.id)
</script>
<style scoped>

</style>

 访问路径http://localhost:3000/user/1，输入值为1

7、路由中间件

页面中添加下面代码

definePageMeta({
    // middleware(to, from) {
    //   console.log('匿名中间件，只在当前页面使用',to,from);
    // },
    middleware: ['router']
})

 新建文件夹middleware，新建router.js

//router.js
export default defineNuxtRouteMiddleware((to, from) => {
    console.log(to,from)
})

即可获取路由相关信息 

重新命名router.js为router.global.js，即为全局中间件，页面中无需引入即可执行

可以用于权限判断，路由重定向

export default defineNuxtRouteMiddleware((to, from) => {
    console.log(to,from)
    if(to.path==='/'){
        return navigateTo('/login')
    }
})

return abortNavigation(); // 停止导航 

 8、错误页面处理

根目录下新建error.vue

//error.vue
<template>
  <div>
    <h1>发生错误</h1>
    <p>抱歉，页面无法加载。</p>
    <p>错误代码：{{ error.statusCode }}</p>
  </div>
</template>

<script>
export default {
  props: ['error'],
}
</script>

展示效果

其余待完善。。。