一、引入并使用Scss

(1) Scss 介紹

Sass中文網(wǎng) https://www.sass.hk/docs/

Sass ( Syntactically Awesome StyleSheets) 是一款強(qiáng)化 CSS 的輔助工具，它在 CSS 語(yǔ)法的基礎(chǔ)上增加了變量 (variables)、嵌套 (nested rules)、混合 (mixins)、**導(dǎo)入 (inline imports) **等高級(jí)功能，這些拓展令 CSS 更加強(qiáng)大與優(yōu)雅。使用 Sass 以及 Sass 的樣式庫(kù)（如 Compass）有助于更好地組織管理樣式文件，以及更高效地開(kāi)發(fā)項(xiàng)目。
兩種語(yǔ)法格式：

• Scss （Sassy CSS）—— 僅在 CSS3 語(yǔ)法的基礎(chǔ)上進(jìn)行拓展， 以 .scss 作為拓展名
• Sass —— 縮進(jìn)格式 (Indented Sass) ， 使用 “縮進(jìn)” 代替 “花括號(hào)” 表示屬性屬于某個(gè)選擇器，用 “換行” 代替 “分號(hào)” 分隔屬性，以 .sass 作為拓展名

舉例如下：

// Sass語(yǔ)法
$font-stac: Helvetica, sans-serif  //定義變量
$primary-color: #333 //定義變量
body 
  font: 100% $font-stack;
  color: $primary-color; // 沒(méi)有 {} 和 ;

// Scss語(yǔ)法
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
  font: 100% $font-stack;
  color: $primary-color;
}

// 編譯出來(lái)的css
body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

(2) 項(xiàng)目中引入SCSS

• 安裝scss
  • 先安裝scss-loader
  • 后安裝 node-sass

node-sass是一個(gè)庫(kù)，它將Node.js綁定到LibSass（流行樣式表預(yù)處理器Sass的C版本）。它允許用戶(hù)以令人難以置信的速度將.scss文件本地編譯為css，并通過(guò)連接中間件自動(dòng)編譯

使用中國(guó)鏡像 cnpm

cnpm install sass-loader --save-dev
cnpm install node-sass --save-dev

scss-loader 安裝成功提示

node-sass 安裝成功提示

(3) 使用Scss編寫(xiě)頁(yè)頭樣式內(nèi)容

<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>英雄聯(lián)盟</div>
            <div>王者榮耀</div>
            <div>我的</div>
        </div>
    </div>
</template>

<script setup>
    import { ref } from 'vue';
    const strHeader = ref("MyGame!");
</script>

<!-- scopded 實(shí)現(xiàn)組件樣式的私有化，不對(duì)全局樣式造成污染，表示當(dāng)前style屬性只屬于當(dāng)前模塊 -->
<!-- lang="scss" 聲明使用 scss 語(yǔ)法 -->
<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）預(yù)覽測(cè)試

頁(yè)頭樣式預(yù)覽圖

二、安裝 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、使用國(guó)內(nèi)鏡像 cnmp安裝 element-plus

cnpm install element-plus --save

2、 安裝圖標(biāo)庫(kù)

從 @element-plus/icons-vue 中導(dǎo)入所有圖標(biāo)并進(jìn)行全局注冊(cè)

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 中導(dǎo)入所有圖標(biāo)并進(jìn)行全局注冊(cè)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

4、測(cè)試UI調(diào)用結(jié)果

在 TestView.vue 中測(cè)試調(diào)用

<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>

正常調(diào)用示例