nuxt引入组件和公共样式

ゝ一世哀愁。 2022-04-21 16:45 275阅读 0赞

### 1，引入组件 ###

在components目录创建组件，在页面中引入组件

例如引入公共导航栏

创建组件components/Nav.vue

![20181126142611434.png][]

引入组件layouts/default.vue

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjE4NTAyOA_size_16_color_FFFFFF_t_70][]

### 2，引入公共样式 ###

### assets/css/common.css ###

在nuxt.config.js中引入

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjE4NTAyOA_size_16_color_FFFFFF_t_70 1][]

### 若引入less或者sass： ###

### ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjE4NTAyOA_size_16_color_FFFFFF_t_70 2][] ###

[20181126142611434.png]: /images/20220414/88a1077326794f3da8f7c2c6d2e0598f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjE4NTAyOA_size_16_color_FFFFFF_t_70]: /images/20220414/7cd0a3834eb04be798de26a63c014956.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjE4NTAyOA_size_16_color_FFFFFF_t_70 1]: /images/20220414/371128176ccb4ef9b1ba548e51c6ef89.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjE4NTAyOA_size_16_color_FFFFFF_t_70 2]: /images/20220414/157a9e1dfe524cd994ea151e18e53088.png

发表评论取消回复

表情：

评论列表（有 0 条评论，275人围观）

还没有评论，来说两句吧...

相关阅读

相关 Nuxt全局引入JS、CSS，单个页面引入JS、CSS，nuxt引入外部JS、CSS

面以**wangEditor**编辑器为外部JS/CSS，作为演示的例子方法一、全局引入CSS ![在这里插入图片描述][watermark_typ...

刺骨的言语ヽ痛彻心扉/ 2024年04月17日 21:30/ 0 赞/ 88 阅读

相关 Thymeleaf中设置每个页面引入公共css样式

场景 Thymeleaf提取公共页面（从实例入手，以inspinia模板为例）： [https://blog.csdn.net/BADAO\_LIUMANG\_QIZH

迷南。/ 2023年10月18日 20:40/ 0 赞/ 59 阅读

相关 Bootstrap引入样式和脚本

引入样式和脚本方式一：下载到本地，导入工程，页面再引用 ![在这里插入图片描述][5169dde5392a48ecb312953f909b01af.png] 方

女爷i/ 2023年09月24日 16:56/ 0 赞/ 17 阅读

相关 uni-app 动态修改公共组件行内样式

公共组件 <template> <view> <view :style="{ color: font_color}"> {

野性酷女/ 2023年01月11日 10:58/ 0 赞/ 217 阅读

相关 Leafage 诞生记（三、nuxt.js 配置和页面自动引入组件）

本文个人博客地址：[https://www.leafage.top/posts/detail/21310GTY2][https_www.leafage.top_posts_de

清疚/ 2022年11月06日 11:59/ 0 赞/ 432 阅读

相关 CSS重置样式和公共样式

有时候需要写几个简单的活动页面，但是浏览器的默认样式并不是我们想要的，各个浏览器的样式还都不一样；这时候就需要对样式进行重置，写一些公共的样式，来兼容各个浏览器的默认样式了。以

╰+攻爆jí腚メ/ 2022年10月11日 01:08/ 0 赞/ 263 阅读

相关引入CSS样式表和引入HTML文件

引入CSS样式表和引入HTML文件 2006-11-14 08:54:19| 分类： [免费代码][Link 1] | 标签：[博客代码][Link 2]

深藏阁楼爱情的钟/ 2022年06月06日 09:47/ 0 赞/ 276 阅读

相关 js引入公共头部和尾部

index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></titl

怼烎@/ 2022年06月01日 02:29/ 0 赞/ 311 阅读

相关 nuxt引入组件和公共样式

1，引入组件在components目录创建组件，在页面中引入组件例如引入公共导航栏创建组件components/Nav.vue ![2018112614261

ゝ一世哀愁。/ 2022年04月21日 16:45/ 0 赞/ 276 阅读

相关 vue使用scss，并且全局引入公共scss样式

要如何在我们的vue项目中全局引入scss文件呢？ 1. `main.js`可以直接`import css`文件，而不可以直接`import scss`文件。 2. 在i

Myth丶恋晨/ 2022年01月17日 00:39/ 0 赞/ 806 阅读