转入已备案网站,课堂资源管理网站开发需求分析,app制作费用一览表,pv3d 优秀网站内置组件
Nuxt3框架也提供一些内置的组件#xff0c;常用的如下#xff1a;
SEO组件#xff1a;Html、Body、Head、Title、Meta、Style、Link、NoScript、BaseNuxtWelcome:欢迎页面组件#xff0c;该组件是nuxt/ui的部分NuxtLayout:是Nuxt自带的页面布局组件NuxtPage:是N…内置组件
Nuxt3框架也提供一些内置的组件常用的如下
SEO组件Html、Body、Head、Title、Meta、Style、Link、NoScript、BaseNuxtWelcome:欢迎页面组件该组件是nuxt/ui的部分NuxtLayout:是Nuxt自带的页面布局组件NuxtPage:是Nuxt自带的页面占位组件 需要显示位于目录中的顶级或嵌套页面pages/是对router-view的封装 ClientOnly:该组件中默认插槽的内容只在客户端渲染 而fallback插槽的内容只在服务器端渲染 NuxtLink:是Nuxt自带的页面导航组件 是Vue RouterRouterLink组件和HTMLa标签的封装 script setup langts/scripttemplateh2这是首页/h2
!-- 1. 普通用法--ClientOnly fallback-tagh3 fallbackloading...h3我只会在客户端渲染/h3/ClientOnly
!-- 2. 插槽用法--ClientOnlyh3我只会在客户端渲染/h3template #fallbackh3loading.../h3/template/ClientOnly
/templatestyle scoped/styletemplatediv
!-- NuxtPage 是对 router-view 的封装--NuxtPage //div
/template
script setup/script全局样式
基础使用
在assets非必须中编写全局样式比如globel.scss接着在nuxt.config中的css选项中配置接着执行npm i -D sass即可 main.css
.page-container {color: hotpink;
}global.scss
$color: lightBlue;.global-container {color: $color;
}variables.scss
$fsColor: lightgreen;
mixin border() {border: 1px solid $fsColor;
}nuxt.config.ts
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({compatibilityDate: 2024-04-03,devtools: {enabled: true},css: [/assets/styles/main.css,/assets/styles/global.scss]
});
index.vue
script setup langts/scripttemplateh2 classpage-container这是首页/h2!-- 1. 普通用法--ClientOnly fallback-tagh3 fallbackloading...h3 classglobal-container我只会在客户端渲染/h3/ClientOnly!-- 2. 插槽用法--ClientOnlyh3 classhome-container我只会在客户端渲染/h3template #fallbackh3loading.../h3/template/ClientOnly
/templatestyle scoped langscss
//第一种写法import 前后导入相同变量会出现覆盖的情况
//import /assets/styles/variables.scss;//第二种写法use 使用命名空间as * 默认不使用命名空间 而且性能更好
use /assets/styles/variables.scss as myVariables;
.home-container {color: myVariables.$fsColor;include myVariables.border();
}
/styleapp.vue
templatedivdiv classpage-container这是 app 页面/divdiv classglobal-container这也是 app 页面/div
!-- NuxtPage 是对 router-view 的封装--NuxtPage //div
/template
script setup/script
style scoped/style以上的情况配置中导入了 css 文件和 scss 全局样式文件在单个组件中导入了 全局变量文件。
如果不在单个组件中导入 全局变量文件也是可以在配置中导入的。 assets index.vue
script setup langts/scripttemplateh2 classpage-container这是首页/h2!-- 1. 普通用法--ClientOnly fallback-tagh3 fallbackloading...h3 classglobal-container我只会在客户端渲染/h3/ClientOnly!-- 2. 插槽用法--ClientOnlyh3 classhome-container我只会在客户端渲染/h3template #fallbackh3loading.../h3/template/ClientOnly
/templatestyle scoped langscss
//第一种写法import 前后导入相同变量会出现覆盖的情况
//import /assets/styles/variables.scss;//第二种写法use 使用命名空间as * 默认不使用命名空间 而且性能更好
//use /assets/styles/variables.scss as myVariables;
//use /assets/styles/variables.scss as *;
.home-container {color: $fsColor;include border();
}
/stylenuxt.config.ts
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({compatibilityDate: 2024-04-03,devtools: {enabled: true},css: [/assets/styles/main.css,/assets/styles/global.scss],vite: {css: {preprocessorOptions: {scss: {// 会自动给 **scss 所有模块** 引入 variables.scssadditionalData: import /assets/styles/variables.scss;}}}}
});
