vue3Blog首页基础布局样式规划

news2025/1/17 22:10:03

思考:我们已经安装了一个ant-design-vue的组件库,是否还可以安装其他的UI组件库混合使用?

答案是可以的,比如这个组件库没有要用到的组件,但另外一个组件有,我们完全可以再安装,单独将某一个使用到的组件引入即可,当项目打包的时候也不会说把所有的安装的都打包进去,只会打包我们是用的组件,前提是,没有全局引入相关UI组件库!

引入bulma第三方css框架

这是一个类似于bootstrap的第三方css框架,它非常简洁,没有带任何js相关的东西,只专注样式,我觉得里边一些通用的样式非常有用,使用其中的某些内置样式,可以进一步提高开发效率。

npm install bulma --save

该库呢用到的是sass的相关语法开发的,那么如果要定制化使用这个包,我们就还需要安装sass包

npm install sass --save-dev

编译使用

我们在src目录下新建一个layout的文件夹,用来存放站点通用布局相关的组件!

1、 新建一个layout.vue的组件,在该组件中定义博客的首页布局, 大概样式如下 

2、再开始之前呢,先确保已经删除了App.vue中不相关的一些代码,留下如下所示的代码即可

<s

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/48971.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

VS Code + Vue 开发环境搭建

1、下载并安装 Visual Studio Code 2019 2、Visual Studio Code 2019安装成功后&#xff0c;打开VS Code 工具点击左侧【扩展】菜单&#xff0c;在搜索栏中输入 Chinese 查找中文语言汉化包插件下载安装&#xff0c;然后重启VS Code 3、点击左侧【扩展】菜单&#xff0c;在搜…

【JS】数据结构之图结构

文章目录基本概念图的实现基本概念 什么是图&#xff1f; 图是一种数据结构&#xff0c;与树结构有些相似&#xff08;在数学的概念上&#xff0c;树是图的一种&#xff09;树结构是一对多的关系&#xff0c;而图结构是多对多的关系比如导航的最优路径&#xff1a;可以看成多个…

【Pandas数据处理100例】(一百):Pandas中使用filter()过滤器实现数据筛选

前言 大家好,我是阿光。 本专栏整理了《Pandas数据分析处理》,内包含了各种常见的数据处理,以及Pandas内置函数的使用方法,帮助我们快速便捷的处理表格数据。 正在更新中~ ✨ 🚨 我的项目环境: 平台:Windows10语言环境:python3.7编译器:PyCharmPandas版本:1.3.5N…

Oracle的学习心得和知识总结(八)|Oracle数据库PL/SQL语言GOTO语句技术详解

目录结构 注&#xff1a;提前言明 本文借鉴了以下博主、书籍或网站的内容&#xff0c;其列表如下&#xff1a; 1、参考书籍&#xff1a;《Oracle Database SQL Language Reference》 2、参考书籍&#xff1a;《PostgreSQL中文手册》 3、EDB Postgres Advanced Server User Guid…

Java常见漏洞——整数溢出漏洞、硬编码密码漏洞、不安全的随机数生成器

目录 前言&#xff1a; &#xff08;一&#xff09;整数溢出漏洞 0x01 整数溢出漏洞介绍 1.1 上界溢出 1.2 下界溢出 0x02 整数溢出漏洞修复 &#xff08;二&#xff09;硬编码密码漏洞 修复案例&#xff1a; &#xff08;三&#xff09;不安全的随机数生成器 前言&a…

1、Shell 概述

文章目录1、Shell 概述1.1 Linux 提供的 Shell 解析器有1.2 bash 和 sh 的关系1.3 Centos 默认的解析器是 bash尚硅谷2022版Linux扩展篇Shell教程-讲师&#xff1a;武晟然 壁立千仞 无欲则刚 1、Shell 概述 硬件–>操作系统核心&#xff08;Linux内核&#xff09;–>解释…

ubuntu2004 有线与另一个Ubuntu系统通信

在Ubuntu2004&#xff08;从机&#xff09;打开一个终端&#xff0c;输入如下配置有线网络ip&#xff0c;其中eth0 为有线网络的名称,up使能有线网络eth0&#xff1a; ifconfig eth0 192.169.10.2 up 并在.bashrc文件中输入 export ROS_MASTER_URIhttp://192.169.10.1:11311 …

Java多线程之线程池

Java高并发应用开发过程中会频繁的创建和销毁线程&#xff0c;为了节约成本和提升性能&#xff0c;往往会使用线程池来统一管理线程&#xff0c;使用线程池主要有以下几点优势 降低资源消耗&#xff1a;重复利用已创建的线程降低线程创建和销毁造成的消耗 提高响应速度&#xf…

ImageNet classification with deep convolutional neural networks

使用深度卷积神经网络进行ImageNet图像分类 目录 1.引言 2.网络结构 2.1 小细节 2.2 代码部分 3. 创新点 3.1 非线性激活函数ReLU&#xff08;提速&#xff09; 3.2 多GPU训练&#xff08;提速&#xff09; 3.3局部响应归一化&#xff08;增强泛化能力&#xff0c;已不…

我国天宫空间站以及各个仓位介绍

一、天宫空间站 天宫空间站&#xff08;China Space Station&#xff09;是中国从2021年开始建设的一个模块化空间站系统&#xff0c;为人类自1986年的和平号空间站及1998年的国际空间站后所建造的第三座大型在轨空间实验平台&#xff0c;基本构型由天和核心舱、问天实验舱和梦…

Head First设计模式(阅读笔记)-07.适配器模式

火鸡冒充鸭子 现在缺少一个绿头鸭对象&#xff0c;需要用野生火鸡对象冒充一下&#xff0c;但是二者的接口都不一样该怎么去冒充呢&#xff1f; // 鸭子接口 public interface Duck{public void quack(); // 呱呱叫public void fly(); // 飞行 } // 火鸡接口 public interfac…

应力奇异,你是一个神奇的应力!

在用ANSYS进行压力容器应力分析计算的时候&#xff0c;总会出现一些应力集中的问题&#xff0c;而且&#xff0c;有些应力集中点竟然没办法采用倒圆角的办法消除&#xff0c;采用网格加密方法时&#xff0c;甚至应力值比之前更大。这个情况&#xff0c;大家通常称为应力奇异。 …

springboot-mybatisplus-redis二级缓存

前言 mybatis可以自己带有二级缓存的实现&#xff0c;这里加上redis是想把东西缓存到redis中&#xff0c;而不是mybaits自带的map中。这也就构成了我们看到的springboot mybatisplus redis实现二级缓存的题目。 具体步骤如下&#xff1a; 首先加入需要的依赖 <dependenc…

《InnoDB引擎六》InnoDB 1.0.x版本之前的Master Thread

Master Thread 工作方式 在后台线程中提到&#xff0c;Master Thread是核心的后台线程。InnoDB存储引擎的主要工作都是在一个单独线程中完成的。 InnoDB 1.0.x版本之前的Master Thread Master Thread具有最高的线程优先级别。内部由多个循环组成&#xff1a;主循环(loop)、后台…

[附源码]SSM计算机毕业设计医院仪器设备管理系统JAVA

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

基于萤火虫算法优化的BP神经网络预测模型(Matlab代码实现)

目录 1 概述 2 萤火虫算法 3 萤火虫算法优化BP神经网络的算法设计 3.1 基本思想 3.2 萤火虫算法优化BP神经网络算法 4 运行结果 5 参考文献 6 Matlab代码及文章 1 概述 现实的世界中混沌现象无处不在,大至宇宙,小到基本粒子,都受到混沌理论支配.如气候变化会出 现混沌…

(三)DepthAI-python相关接口:OAK Nodes

消息快播&#xff1a;OpenCV众筹了一款ROS2机器人rae&#xff0c;开源、功能强、上手简单。来瞅瞅~ 编辑&#xff1a;OAK中国 首发&#xff1a;oakchina.cn 喜欢的话&#xff0c;请多多&#x1f44d;⭐️✍ 内容可能会不定期更新&#xff0c;官网内容都是最新的&#xff0c;请查…

[MySQL]-压力测试_TPCC-MySQL

[MySQL]-压力测试_TPCC-MySQL 森格 | 2022年10月 对数据库学习来说&#xff0c;压力测试也是十分必要的一环&#xff0c;本文章主要介绍了TPCC-MySQL这个工具的使用。 一、基本概念 1.1 基准测试VS压力测试 基准测试&#xff1a; 直接简单、易于比较&#xff0c;用于评估服务…

CAD必练图形

这次我们用CAD梦想画图软件绘制一个CAD新手必练图形&#xff0c;它用到的有CAD矩形、直线、圆弧、等分等命令结合起来完成绘制的&#xff0c;可以跟着一起操作一下。 目标图形 操作步骤 1.使用CAD矩形命令&#xff08;快捷键&#xff1a;REC&#xff09;绘制一个长80宽30的矩…

为什么macbook不能删除u盘里东西?苹果电脑如何删除u盘文件

为什么macbook不能删除u盘里东西&#xff1f;有时候&#xff0c;我们会发现U盘不能够在Mac上正常使用&#xff0c;只能够读取U盘上的文件数据&#xff0c;但是若想要对其进行删除或者是编辑操作&#xff0c;完全不能够实现&#xff0c;本文为大家详细介绍了不同情况的不同解决方…