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

javascript 复制代码
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一样,无需配置代理

javascript 复制代码
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

其余待完善。。。

相关推荐
灵魂猎手27 分钟前
3. MyBatis Executor:SQL 执行的核心引擎
java·后端·源码
Undoom33 分钟前
虚拟机一站式部署Claude Code &可视化UI界面
后端
Asthenia041237 分钟前
建好了表,还在手动写CRUD的xml?兄弟,真得学习MBG了!
后端
楽码1 小时前
底层技术SwissTable的实现对比
数据结构·后端·算法
林开落L1 小时前
库的制作与原理
linux·开发语言·动静态库·库的制作
m0_480502642 小时前
Rust 入门 泛型和特征-特征对象 (十四)
开发语言·后端·rust
程序员爱钓鱼2 小时前
Go语言实战案例-使用ORM框架 GORM 入门
后端
M1A12 小时前
TCP协议详解:为什么它是互联网的基石?
后端·网络协议·tcp/ip
瓦特what?2 小时前
关于C++的#include的超超超详细讲解
java·开发语言·数据结构·c++·算法·信息可视化·数据挖掘
一枚小小程序员哈2 小时前
基于微信小程序的家教服务平台的设计与实现/基于asp.net/c#的家教服务平台/基于asp.net/c#的家教管理系统
后端·c#·asp.net