vue3Blog首页基础布局样式规划

思考:我们已经安装了一个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的组件,在该组件中定义博客的首页布局, 大概样式如下 

vue3Blog首页基础布局样式规划_第1张图片

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

你可能感兴趣的:(Vue3组件化开发实战,vue.js,javascript,前端)