目录

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

其余待完善。。。

本文是转载文章,点击查看原文
如有侵权,请联系 xyy@jishuzhan.net 删除
相关推荐
Vitalia20 分钟前
⭐算法OJ⭐二叉树的后序遍历【树的遍历】(C++实现)Binary Tree Postorder Traversal
开发语言·c++·算法·二叉树
GoGeekBaird30 分钟前
69天探索操作系统-第54天:嵌入式操作系统内核设计 - 最小内核实现
后端·操作系统
做一个码农都是奢望43 分钟前
MATLAB 调用arduino uno
开发语言·算法·matlab
鱼樱前端1 小时前
Java Jdbc相关知识点汇总
java·后端
二进制人工智能1 小时前
【QT5 多线程示例】互斥锁
开发语言·c++·qt
canonical_entropy1 小时前
NopReport示例-动态Sheet和动态列
java·后端·excel
kkk哥1 小时前
基于springboot的母婴商城系统(018)
java·spring boot·后端
沈阳信息学奥赛培训1 小时前
C++语法之命名空间二
开发语言·c++·算法
王者鳜錸2 小时前
四、小白学JAVA-石头剪刀布游戏
java·开发语言·游戏
会敲代码的Steve2 小时前
慕慕手记项目日记 首页数据的渲染,使用js 2025-3-16
开发语言·javascript·ecmascript