低代码网站开发平台,软件开发分为哪几个步骤,wordpress自动分享插件,中国建设银行预约网站文章目录 public 目录assets 目录全局样式导入 Nuxt 官网地址#xff1a;
https://nuxt.com/ Nuxt 使用以下两个目录来处理 CSS、fonts 和图片等静态资源#xff1a;
public 目录
public 目录用作静态资产的公共服务器#xff0c;可通过应用程序定义的 URL 公开获取。 换… 文章目录 public 目录assets 目录全局样式导入 Nuxt 官网地址
https://nuxt.com/ Nuxt 使用以下两个目录来处理 CSS、fonts 和图片等静态资源
public 目录
public 目录用作静态资产的公共服务器可通过应用程序定义的 URL 公开获取。 换言之就是可以通过应用程序的代码或浏览器通过根 URL / 获取 public 目录中的文件。 public 目录下的内容将原样提供给服务器根目录。 应用
在应用程序代码中通过根 URL / 获取 public 目录中的文件
template!-- 在静态 URL /img/nuxt.png 上引用 public/img/ 目录中的图像文件 --img src/img/nuxt.png altDiscover Nuxt 3 /
/template在浏览器中通过根 URL / 获取 public 目录中的文件
可以在浏览器中地址栏输入 http://localhost:3000/img/nuxt-logo.png 访问 public/img/ 目录中的图像文件。
assets 目录
Nuxt 使用 Vite 或 webpack 来构建和捆绑应用程序。这些构建工具的主要功能是处理 JavaScript 文件但也可以通过插件Vite或加载器webpack进行扩展以处理其他类型的资产如样式表、字体或 SVG。这一步主要出于性能或缓存目的如样式表最小化或浏览器缓存失效对原始文件进行转换。
按照惯例Nuxt 使用 assets/ 目录来存储这些文件但该目录没有自动扫描功能您可以使用任何其他名称。
在应用程序的代码中可以使用 ~/assets/ 路径引用 assets/ 目录中的文件。
templateimg src~/assets/img/nuxt.png altDiscover Nuxt 3 /
/template如上例所示引用一个图像文件如果构建工具被配置为处理该文件扩展名该文件就会被处理。 注意 Nuxt 不会通过静态 URL如/assets/my-file.png提供 assets/目录下的文件。如果您需要静态 URL请使用 public/目录。 全局样式导入
要在 Nuxt 组件样式中全局插入语句可以在 nuxt.config 文件中使用 Vite 选项。 应用代码如下
在 assets/scss 目录下创建一个 _colors.scss 文件来定义页面和组件要统一使用的颜色:
// assets/scss/_colors.scss$primary: blue;
$secondary: lightblue;在 nuxt.config 中进行配置
// nuxt.config.tsexport default defineNuxtConfig({vite: {css: {preprocessorOptions: {scss: {additionalData: use /assets/_colors.scss as *;,},},},},
});在 Nuxt 页面和组件中使用步骤 1 中定义的颜色
// pages/about.vuetemplatedivh1 about page/h1AppAlertAppAlert Component./AppAlertdivp classprimary-textpublic 目录下的图片/pimg src/img/avatar.jpg styleheight: 80px //divdivp classsecond-textassets 目录下的图片/pimg src~/assets/img/avatar.jpg styleheight: 80px //div/div
/templatestyle langscss scoped
.primary-text {// 此处使用全局样式color: $primary;
}.second-text {// 此处使用全局样式color: $secondary;
}
/style注意上面代码要正常运行需要安装 SCSS 预处理器安装命令为 pnpm add sass。
至于更多在 Nuxt 中样式设计和使用将会在下个章节会做进一步详细介绍。
