代理网站备案收钱,外包工好还是派遣工好,asp.net网站开发教程,wordpress获取自定义文章分类名文章目录 本地样式表在组件内导入通过 Nuxt 配置 CSS 属性导入使用字体导入通过 NPM 发布的样式表 外部样式表动态添加样式表【高级】使用 Nitro 插件修改渲染的头部 使用预处理器单文件组件 SFC 样式类和样式绑定使用 v-bind 的动态样式Scoped StylesCSS Modules预处理器支持 … 文章目录 本地样式表在组件内导入通过 Nuxt 配置 CSS 属性导入使用字体导入通过 NPM 发布的样式表 外部样式表动态添加样式表【高级】使用 Nitro 插件修改渲染的头部 使用预处理器单文件组件 SFC 样式类和样式绑定使用 v-bind 的动态样式Scoped StylesCSS Modules预处理器支持 使用 PostCSS利用布局实现多种风格第三方库和模块轻松加载网络字体 Nuxt 官网地址
https://nuxt.com/ Nuxt 在样式设计方面非常灵活。
可以编写自己的样式可以引用本地和外部样式表可以使用 CSS 预处理器、CSS 框架、UI 库和 Nuxt 模块来为应用程序设计样式。
本地样式表
按照惯例将本地样式表放在assets/目录下。
在组件内导入
在组件内导入的样式表将在 Nuxt 渲染的 HTML 中内联。可以通过以下方式导入
可以在页面、布局和组件中直接导入样式表。可以使用 javascript 导入或 css import 语句。
代码示例
创建 /assets/css/first.css 文件内容如下
// assets/css/first.css.first {background-color: red;
}在页面中导入并应用
// pages/about.vuetemplatedivh1 index page/h1AppAlert classfirstAppAlert Component./AppAlert/div
/templatescript
// 使用静态导入以实现服务器端兼容性
// import ~/assets/css/first.css;// 注意动态导入与服务器端不兼容
// import(~/assets/css/first.css);
/scriptstyle
import url(~/assets/css/first.css);
/style通过 Nuxt 配置 CSS 属性导入
可以在 Nuxt 配置中使用 css 属性来导入本地样式表Nuxt 将把它包含到应用程序的所有页面中。这种方式导入样式表也将在 Nuxt 渲染的 HTML 中内联全局注入并出现在所有页面中。 注意即便页面中没有用到样式表中的样式规则也会注入并在 HTML 中内联。 代码示例
创建 /assets/css/main.css 文件内容如下
// assets/css/main.css.text-bold {font-weight: bold;
}在 Nuxt 配置中导入
// nuxt.config.tsexport default defineNuxtConfig({devtools: { enabled: true },pages: true,vite: {css: {preprocessorOptions: {scss: {additionalData: use /assets/scss/_colors.scss as *;,},},},},// 导入本地样式表css: [~/assets/css/main.css],
});在页面中导入并应用
// pages/about.vuetemplatedivh1 index page/h1AppAlert classfirst text-boldAppAlert Component./AppAlert/div
/templatescript
// 使用静态导入以实现服务器端兼容性
// import ~/assets/css/first.css;// 注意动态导入与服务器端不兼容
// import(~/assets/css/first.css);
/scriptstyle
import url(~/assets/css/first.css);
/style使用字体
将下载的字体文件放在 ~/public/ 目录下例如~/public/fonts。然后就可以在样式表中使用 url() 引用它们。
代码示例
在 css 文件引用字体并在样式中使用:
// assets/css/main.css.text-bold {font-weight: bold;
}// 引用定义字体
font-face {font-family: MyFont;src: url(/fonts/test.ttf);font-weight: normal;font-style: normal;font-display: swap;
}// 样式汇中使用字体
.cool-text {font-family: MyFont;font-size: 22px;
}在样式表、页面或组件中通过样式应用字体
// pages/index.vuetemplatedivh1 index page/h1AppAlert classfirst text-boldAppAlert Component./AppAlertp classcool-text爱拼才会赢/p/div
/template导入通过 NPM 发布的样式表
可以引用通过 npm 发布的样式表。让我们以流行的 animate.css 库为例。
先安装 animate.css 库
pnpm add animate.css导入 animate.css:
在页面、布局和组件中直接引用
// pages/index.vuescript
// 通过js导入
import animate.css;
/scriptstyle
// 通过css导入
import url(animate.css);
/style在 Nuxt 配置的 css 属性中导入
// nuxt.config.tsexport default defineNuxtConfig({devtools: { enabled: true },pages: true,vite: {css: {preprocessorOptions: {scss: {additionalData: use /assets/scss/_colors.scss as *;,},},},},css: [~/assets/css/main.css, animate.css],
});使用 animate.css 的动画样式
templatedivh1 index page/h1AppAlert classfirst text-boldAppAlert Component./AppAlertp classcool-text animate__animated animate__bounceIn爱拼才会赢/p/div
/templatescript
// 使用静态导入以实现服务器端兼容性
// import ~/assets/css/first.css;// 注意动态导入与服务器端不兼容
// import(~/assets/css/first.css);// import animate.css;
/scriptstyle
import url(~/assets/css/first.css);
/* import url(animate.css); */
/style外部样式表
通过在 nuxt.config 文件的 head 部分添加链接元素就可以在应用程序中包含外部样式表。我们可以使用 Nuxt 配置中的 app.head 属性来操作头部
// nuxt.config.tsexport default defineNuxtConfig({devtools: { enabled: true },pages: true,vite: {css: {preprocessorOptions: {scss: {additionalData: use /assets/scss/_colors.scss as *;,},},},},css: [~/assets/css/main.css],app: {head: {link: [{rel: stylesheet,href: https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css,},],},},
});当然还可以使用不同的方法实现这一结果而且本地样式表也可以这样包含。
动态添加样式表
可以在代码中使用 useHead 组合式函数来动态设置 head 中的值。
useHead({link: [{rel: stylesheet,href: https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css,},],
});注意 这种方式目前使用体验不是很好如果要使用这种方式需要做更多技术实践。
【高级】使用 Nitro 插件修改渲染的头部
如果需要更高级的控制可以使用钩子拦截渲染的 html并以编程方式修改头部。 此处暂不介绍如有兴趣提供官方链接https://nuxt.com/docs/getting-started/styling#dynamically-adding-stylesheets
使用预处理器
常用预处理器 SCSS、Sass、Less 或 Stylus 等使用前需要先安装。 本文以 SCSS 为例
进行安装
pnpm add sass创建 scss 文件
// assets/scss/main.scss.parent {background-color: #eee;padding: 20px;.child {background-color: aquamarine;padding: 20px;}
}两种导入方式 可以在页面、布局和组件中使用预处理器的语法导入源文件。 style langscss
use ~/assets/scss/main.scss;
/style可以使用 Nuxt 配置文件中 css 属性全局导入。 export default defineNuxtConfig({css: [~/assets/scss/main.scss],
});无论使用上面的哪种导入方式编译后的样式表将被内联到 Nuxt 渲染的 HTML 中。 如果你需要在预处理文件中注入代码比如带有颜色变量的 sass 部分你可以使用 vite 预处理器选项来实现。前一篇文章静态资源中全局样式导入有样式实现或者参考官方文档https://nuxt.com/docs/getting-started/styling#dynamically-adding-stylesheets Nuxt 默认使用 Vite。如果希望使用 webpack请参阅每个预处理器加载器的文档。 单文件组件 SFC 样式
Vue 和 SFC 最棒的地方之一就是它能很自然地处理样式。可以直接在组件文件的样式块中编写 CSS 或预处理代码因此无需使用 CSS-in-JS 之类的东西就能获得绝佳的开发体验。 【拓展】如果你想使用 CSS-in-JS你可以找到支持它的第三方库和模块比如 pinceau。可以参考Vue 文档获取关于SFC中组件样式的全面参考。 类和样式绑定
在 Vue 的 SFC 组建中可以通过类和样式属性来为组件设置样式。 详细内容请阅读 Vue 文档Class 与 Style 绑定
使用 v-bind 的动态样式
可以使用 v-bind 函数在样式块中引用 JavaScript 变量和表达式。绑定将是动态的这意味着如果变量值发生变化样式也将随之更新。
// pages/test.vuescript setup
const color ref(red);
setTimeout(() {color.value yellow;
}, 3000);
/scripttemplatediv classtexthello/div
/templatestyle
.text {color: v-bind(color);
}
/styleScoped Styles
范围属性允许对组件进行独立样式化。使用该属性声明的样式将仅适用于该组件。
templatediv classexamplehi/div
/templatestyle scoped
.example {color: red;
}
/style更多内容请阅读 Vue 文档单文件组件 CSS 功能
CSS Modules
可以通过 module 属性使用 CSS 模块。使用注入的 $style 变量访问它。
templatep :class$style.redThis should be red/p
/templatestyle module
.red {color: red;
}
/style预处理器支持
SFC 样式块支持预处理器语法。Vite 内置支持.scss、.sass、.less、.styl 和.stylus 文件无需配置。只需先安装它们然后就可以直接在 SFC 中使用 lang 属性。
style langscss
/* Write scss here */
/style使用 PostCSS 科普PostCSS 是什么 PostCSS 是一个使用 JS 插件转换 CSS 的工具。这些插件可以支持变量和混合、transpile 未来 CSS 语法、内联图像等。 官网链接https://www.postcss.com.cn/ Nuxt 内置了 postcss。可以在nuxt.config文件中进行配置。
export default defineNuxtConfig({postcss: {plugins: {postcss-nested: {}postcss-custom-media: {}}}
})为了在 SFC 中使用正确的语法高亮可以使用 postcss lang 属性。
style langpostcss/* Write stylus here *//style默认情况下Nuxt 已经预配置了以下插件
postcss-import: Improves the import rulepostcss-url: Transforms url() statementsautoprefixer: Automatically adds vendor prefixescssnano: Minification and purge
利用布局实现多种风格
如果需要为应用程序的不同部分设计完全不同的布局样式可以使用布局。 布局在上一篇文章的视图章节有简单介绍此处不做更多讲解后续专门用一篇文章来细说。
第三方库和模块
在样式设计方面Nuxt 并不墨守成规而是为我们提供了多种选择。可以使用任何想要的样式工具如 UnoCSS 或 Tailwind CSS 等流行库。社区和 Nuxt 团队开发了大量的 Nuxt 模块使集成变得更加容易。可以在网站的模块部分找到它们。这里有几个模块可以帮助我们开始使用
UnoCSS: Instant on-demand atomic CSS engineTailwind CSS: Utility-first CSS frameworkFontaine: Font metric fallbackPinceau: Adaptable styling frameworkNuxtLabs UI
轻松加载网络字体
可以使用Nuxt Google Fonts 模块来加载 Google Fonts。 如果使用的是UnoCSS请注意它自带了一个网页字体预设可以方便地加载来自常见供应商的字体包括 Google Fonts 等。
