Nuxt3
官网：https://nuxt.com/
特点：自动导入，vue中所有的API都不需要引入，剩下的我还不知道
安装：pnpm dlx nuxi init <project-name> 推荐fan安装
配置变量
配置文档：Nuxt Configuration Reference · Nuxt
next-config
next-config.ts 配置服务端或客户端环境变量
export default defineNuxtConfig({
runtimeConfig: {
// 创建在外部的是只有在服务端可见的
apiSecret: '123',
public: {
// 创建在内部的是服务端和客户端都可见的
apiBase: '/api'
}
}
})
.env
# 如果`nuxt.config.ts`有该配置项，会直接覆盖`nuxt.config.ts`中的元素，不需要拿到。名称必须一样
# 在这里面写的变量会添加到process.env.xxx中
NUXT_APP_KEY='DDDDD'
NUXT_PUBLIC_BASE_URL='http:111111'
vue文件中通过const runtimeConfig = useRuntimeConfig()访问
app.config
app.config.ts 配置公共变量
export default defineAppConfig({
title: 'Hello Nuxt',
theme: {
dark: true,
colors: {
primary: '#ff0000'
}
}
})
vue文件通过const appConfig = useAppConfig()访问
配置head，页面中的头部
方法一：next-config.ts
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
// app配置
app: {
// 给app所有的页面的head添加的配置（SEO,添加的资源）
head: {
title: "LWH",
charset: "UTF-8",
viewport:
"width=device-width, initial-scale=1.0,maximum-scale=1.0,minmum-scale=1.0,user-scalalbe=no",
meta: [
{
name: "keywords",
content: "LLWWHH",
},
{
name: "description",
content: "QQQ",
},
],
link: [
{
rel: "shortcut icon",
href: "favicon.ico",
type: "image/x-icon",
},
],
style: [
{
children: `
body:{
color:red
}
`,
},
],
script: [
{
src: "123123123",
},
],
},
},
});
方法二：vue使用useHead添加head
// 配置head 方法二
// 动态给app中所有页面添加head内容
useHead({
// 页面内的会覆盖所有的
title: "app useHead",
meta: [
{
name: "页面内使用head",
},
],
});
方法三：vue组件内添加
<!-- 页面内添加head -->
<Head>
<Meta name="key" content="key key key"></Meta>
</Head>
优先级：1.组件内是最高的，2.useHead(()=>{})，3.nuxt.config.ts
路由
在Nuxt3中是不需要创建路由的，Nuxt会根据pages中的.vue文件自动创建
路由展位
<!-- 是对router-view的封装 -->
<NuxtPage />
ClientOnly只在客户端显示
<ClientOnly fallback="Loading comments...">
<div>我只会在客户端渲染</div>
</ClientOnly>
<!-- 插槽使用方法 -->
<ClientOnly>
在客户端显示
<template #fallback>
<!-- this will be rendered on server side -->
<p>在服务器端能看到</p>
</template>
</ClientOnly>
全局样式
Assets · Get Started with Nuxt
方法一：在nuxt.config.ts写入样式路径即可全局导入，也可以导入字体图标
css: ["@/assets/styles/main.css"，'@/assets/css/main.scss'],
方法二：在nuxt.config.ts写入vite引入样式
$primary: #49240F;
$secondary: #E4A79D;
export default defineNuxtConfig({
vite: {
css: {
preprocessorOptions: {
scss: {
// as vb: 给这个模块起一个命名空间通过'别名.$primary'使用
// as * :可以胜率命名空间直接使用 $primary
additionalData: '@use "@/assets/_colors.scss" as *;'
}
}
}
}
})
图片
Assets · Get Started with Nuxt
如果照片存放在public/ 目录下可以直接访问
<template>
<img src="/img/nuxt.png" alt="Discover Nuxt 3" />
</template>
如果存放在**assets/**目录下不可以直接访问
<template>
<-- @和~都可以直接访问，推荐~ -->
<img src="~/assets/img/nuxt.png" alt="Discover Nuxt 3" />
</template>
