.NET Core與Vue3組合開發技_第03天_使用vite創建後台管理系統專案part1.


npm init vite@latest 專案目錄名稱



看要選typescript還是javascript
這邊選ts





當npm install完畢後
運行起來

就可看到運行起來的專案具有VITE+VUE顯示

補安裝sass
npm install sass --save

SASS有捨麼好處呢 舉個例子

比方這邊我們在App.vue中去新增一個div並設置相應class叫做main
當中包兩個span 各自class分別為left跟right


那如果我要進行相對html顏色樣式指定
左右側各自紅藍顏色
就會發現傳統css要寫重複兩階層的main

App.vue Before版本

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Vite + Vue" />
  <div class="main">
    <span class="left">我是左側</span>
    <span class="right">我是右側</span>
  </div>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}

.main .left{
  color: red;
}
.main .right{
  color:blue;
}
</style>


可以將style指定language要是SCSS語言,讓層次結構更清楚且main只寫一次。


App.vue After版本

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Vite + Vue" />
  <div class="main">
    <span class="left">我是左側</span>
    <span class="right">我是右側</span>
  </div>
</template>

<style lang="scss" scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}

.main {
  .left{
    color: green;
  }
  .right{
    color:blue;
  }
}

</style>

安裝配置Element Plus (based on vue3)

npm install element-plus --save

到main.ts中去進行全域導入(因為每一頁都會用到)

main.ts Before版本

1
2
3
4
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
createApp(App).mount('#app')

main.ts After版本

1
2
3
4
5
6
7
8
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
createApp(App)
.use(ElementPlus)
.mount('#app')

這裡可以到別頁組件中測試一下是否可以成功引用到element-plus組件

我到官網要引用這個按鈕

就可成功使用樣式有套到

藉此畫面元件框架可以節省自己弄樣式的時間












留言

這個網誌中的熱門文章

何謂淨重(Net Weight)、皮重(Tare Weight)與毛重(Gross Weight)

Architecture(架構) 和 Framework(框架) 有何不同?_軟體設計前的事前規劃的藍圖概念

(2021年度)駕訓學科筆試準備題庫歸納分析_法規是非題