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

其余待完善。。。

相关推荐
咖啡Beans10 分钟前
Python工具DrissionPage推荐
后端·python
小喷友38 分钟前
阶段三:进阶(Rust 高级特性)
前端·rust
华仔啊1 小时前
工作5年没碰过分布式锁,是我太菜还是公司太稳?网友:太真实了!
java·后端
摸鱼仙人~1 小时前
深入理解 MyBatis-Plus 的 `BaseMapper`
java·开发语言·mybatis
卿·静1 小时前
Node.js对接即梦AI实现“千军万马”视频
前端·javascript·人工智能·后端·node.js
ITKEY_1 小时前
flutter日期选择国际化支持
开发语言·javascript·flutter
刃神太酷啦1 小时前
C++ 异常处理机制:从基础到实践的全面解析----《Hello C++ Wrold!》(20)--(C/C++)
java·c语言·开发语言·c++·qt·算法·leetcode
q567315232 小时前
告别低效:构建健壮R爬虫的工程思维
开发语言·爬虫·r语言
SamDeepThinking2 小时前
在 Cursor IDE 中配置 SQLTools 连接 MySQL 数据库指南(Windows 11)
后端·ai编程·cursor
武子康2 小时前
大数据-92 Spark 深入解析 Spark Standalone 模式:组件构成、提交流程与性能优化
大数据·后端·spark