vue2.0 - layout组件（一）页面结构

King十三

已于 2022-06-16 16:42:12 修改

阅读量1.2k

点赞数 2

文章标签： vue.js javascript 前端

于 2022-06-16 11:26:49 首次发布

本文链接：https://blog.csdn.net/sqleiq/article/details/125312789

版权

本文介绍了如何搭建一个包含面包屑、侧边栏、顶部导航和内容区域的Vue项目，详细阐述了各组件的用途。同时，针对在项目中使用Sass，包括安装node-sass和sass-loader的过程，以及解决高版本sass-loader导致的问题。通过降低sass-loader版本确保项目正常运行。

摘要由CSDN通过智能技术生成

layout {
	components 组件下{
		Bradcrumb - 面包屑
		Sidebar - 侧边栏导航 {
		index.vue -  侧边导航主页面配置
		Item.vue - 图标-标题头
		Link.vue -  跳转
		Logo.vue -  侧边栏Logo
		SidebarItem.vue - 二级路由配置
	}
		Header.vue - 顶部导航栏
		Main.vue -  内容区域
		index.js - 修改组件名称文件
	}
	index.vue - 布局容器
}

在这里插入图片描述
2. 在views下创建Home.vue和About.vue组件(可以在页面中写点内容)

安装sass
项目里面的css我们使用scss（scss的用法以及优势详解请看：SCSS用法及详解），所以需要先安装依赖。又因为scss基于node-sass运行，所以我们需要先装node-sass 。

1.安装node-sass
执行命令：npm install node-sass --save-dev
然后你可能会看到以下报错：
在这里插入图片描述
这时候我们就切换一下数据源至淘宝镜像，执行下面的命令：
npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass
此时再执行：npm install node-sass --save-dev
这时候就会安装成功了

2.安装sass-loader
执行命令：npm install sass-loader --save-dev
下载完成后会出现两个版本
在这里插入图片描述

3. 组件中如何使用

在这里插入图片描述

你也可能会发生以下报错：
原因：这表示你的sass-loader版本太高了，所以我们需要降低版本就可以了
在这里插入图片描述

解决方法：
首先卸载之前的sass-loader,执行命令：npm uninstall sass-loader
再安装低版本的，执行命令：npm install sass-loader@8.0.2 --save-dev
最后再运行项目：npm run dev 或者 npm run serve，就可以正常运行了。