一、引入并使用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>

正常调用示例