一、引入并使用Scss
(1) Scss 介绍
Sass中文网 https://www.sass.hk/docs/
Sass ( Syntactically Awesome StyleSheets) 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、**导入 (inline imports) **等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。
两种语法格式：
- Scss （Sassy CSS）—— 仅在 CSS3 语法的基础上进行拓展， 以 .scss 作为拓展名
- Sass —— 缩进格式 (Indented Sass) ， 使用 “缩进” 代替 “花括号” 表示属性属于某个选择器，用 “换行” 代替 “分号” 分隔属性，以 .sass 作为拓展名
举例如下：
// Sass语法
$font-stac: Helvetica, sans-serif //定义变量
$primary-color: #333 //定义变量
body
font: 100% $font-stack;
color: $primary-color; // 没有 {} 和 ;
// Scss语法
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
// 编译出来的css
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
(2) 项目中引入SCSS
- 安装scss
- 先安装scss-loader
- 后安装 node-sass
node-sass是一个库，它将Node.js绑定到LibSass（流行样式表预处理器Sass的C版本）。它允许用户以令人难以置信的速度将.scss文件本地编译为css，并通过连接中间件自动编译
使用中国镜像 cnpm
cnpm install sass-loader --save-dev
cnpm install node-sass --save-dev
scss-loader 安装成功提示
node-sass 安装成功提示
(3) 使用Scss编写页头样式内容
<template>
<div class="myHearder">
<img src="@/assets/logo.png" alt="">
<div class="headerTitle">
<div>WellCome to</div>
<div class="projectName">{{ strHeader }} </div>
</div>
<div class="nav">
<div>英雄联盟</div>
<div>王者荣耀</div>
<div>我的</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
const strHeader = ref("MyGame!");
</script>
<!-- scopded 实现组件样式的私有化，不对全局样式造成污染，表示当前style属性只属于当前模块 -->
<!-- lang="scss" 声明使用 scss 语法 -->
<style scoped lang="scss">
$imgLogoWidth: 60px;
.myHearder{
width: 100%;
display: flex;
align-items: center;
color: #333;
img {
width: $imgLogoWidth;
margin: 10px 30px;
}
.headerTitle{
text-align: left;
.projectName{
font-size: 2rem;
font-weight: 800;
}
}
.nav{
flex-grow: 1;
display: flex;
justify-content: right;
margin-right: 40px;
div{
padding: 10px;
color: #999;
}
}
}
</style>
（4）预览测试
页头样式预览图
二、安装 element-plus
官方文档
https://element-plus.gitee.io/zh-CN/guide/design.html
https://element-plus.gitee.io/zh-CN/guide/installation.html#%E7%89%88%E6%9C%AC
1、使用国内镜像 cnmp安装 element-plus
cnpm install element-plus --save
2、 安装图标库
从 @element-plus/icons-vue 中导入所有图标并进行全局注册
cnpm install @element-plus/icons-vue
3、main.js 中配置
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 引入element-plus及其样式
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// 引入ElementPlusIconsVue
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App);
app.use(ElementPlus)
.use(store).use(router).mount('#app')
// 从 @element-plus/icons-vue 中导入所有图标并进行全局注册
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
4、测试UI调用结果
在 TestView.vue 中测试调用
<template>
<div class="about">
<h1>This is an Test page</h1>
<el-row>
<el-button type="warning" circle>
<el-icon style="vertical-align: middle">
<Star />
</el-icon>
</el-button>
<el-button type="primary" circle>
<el-icon style="vertical-align: middle">
<Edit />
</el-icon>
</el-button>
<el-button type="success" circle>
<el-icon style="vertical-align: middle">
<Check />
</el-icon>
</el-button>
<el-button type="info" circle>
<el-icon style="vertical-align: middle">
<Message />
</el-icon>
</el-button>
<el-button type="danger" circle>
<el-icon style="vertical-align: middle">
<Search />
</el-icon>
</el-button>
</el-row>
</div>
</template>
正常调用示例
