聯成電腦-讓你價值連城

Photo credit：Pexels

文、意如老師

續上一篇：聯成電腦分享：最熱門的網頁前端框架，從零開始學Vue.js 安裝篇

任務一：認識目錄結構

續 上一篇 安裝好後，先到專案資料夾下，目前的目錄結構如下圖

我們先來認識一下幾個比較常會用到的資料夾

任務二：了解整個流程，及實作第一個vue.js網頁

首先開啟專案的主要入口點main.js以及index.html

接著修改main.js檔案，如下圖

▶ Index.html 為專案開始的樣板，預設要顯示的網頁內容顯示於

<div id=”app”></div> 中。

▶ main.js程式解說：

var myvue = new Vue({ })  //每個 Vue  都需要通過實例化

程式碼參考如下：

new Vue({

  el:  // index.html 中 id名為app

  router: //傳入 vue-router元件(ES6)

  components : //會使用到UI子元件(App.vue)

  template ://表示html模板套用至<App/> 的 el 的標籤

})

接下來cmd（命令提示字元）執行指令：npm run dev

這個指令會啟動http server，這個指令會同時開啟根目錄下的index.html與src資料夾內的main.js這兩個檔案

main.js也會同時運行App.vue以及在router資料夾內的index.js

▶ App.vue程式解說：

<route-view/>是路由器顯示標籤，為vue-router使用，在index.js下Router函數中所使用的UI元件皆會套用至這個標籤當中。

簡單的說這邊樣板設定會套用至main.js

▶ index.js程式解說：

index.js 是由路由配置，定義路徑和UI元件，可以在Router這個函數內，自定義url路徑名稱(path)，components下可以放入寫好的UI元件。

<router-view/> 為Vue-router使用，這樣index.js Router 這個函數下寫的components才會顯示出來

所以我們要產生新的UI元件，就要寫一個.vue檔，可放置在components資料夾之下；如要顯示這個vue元件，就需要到index.js中修改路由配置。

例：在src/components 新增 mytest.vue

路徑：src/components/mytest.vue

程式碼參考如下：

<template>

    <div class="myfont">

        {{mymsg}}

    </div>

</template>

<script>

export default{

    data(){

        return{

            mymsg:"hi,mymsg!"

        }

    }

}

</script>

<style>

    .myfont{

        background:yellow;

    }

</style>

再開啟路徑：src/router/index.js，程式碼參考如下：

import Vue from 'vue'

import Router from 'vue-router'

import HelloWorld from '@/components/HelloWorld'

import mytest from '@/components/mytest'

Vue.use(Router)

export default new Router({

  routes: [

    {

      path: '/',

      name: 'HelloWorld',

      component: HelloWorld

    },

    {

      path: '/mytest',

      name: 'mytest',

      component: mytest

    }

  ]

})

執行結果：

到cmd（命令提示字元）執行 npm run dev

下指令啟動server（伺服器）後，瀏覽器網址列輸入http://localhost:8080/#/mytest，會如下圖所示，你的第一張vue.js網頁已經完成了。

啟動後，只要一修改程式碼，瀏覽器上的這張網頁也都會自動更新，最後如果要關閉專案執行只要在cmd（命令提示字元）中輸入：Ctrl+C即可關閉整個專案。

文、Alam老師

大家好，我是Alam，人家常說「遠在天邊，近在眼前！」但如果沒有臨危望險，登高遠眺，這些都難以體驗，這次我們雖然簡化很多細節，但也相當受用，不知如此的嘗試效果會如何？想了也沒用，畫了才知道！

1. 在畫布上先灌上一個漸層效果，再打上一個簡稿！

2. 再以「厚塗/紋路油畫抖動」將畫面做出有點像油畫立體的雲彩效果！先試試筆刷後再調整部份筆刷設定參數！

3. 然後將「厚塗/紋路油畫抖動」事先布局在背景的天空上！

4. 繼續嘗試性的增加雲彩布局，然後將多餘的雲彩效果以（橡皮擦20%）稍微抹除。

5. 再將山峰的以及右側的懸峰「補上底色」並調整遠近的「色相」狀況！

6. 再來先介紹一支很好用的修改筆刷，畫出來真得很過癮！此時只要選擇「輕柔噴槍」來修改參數即可，首先選擇「筆尖剖面圖」右上角的三角形圖形按鈕，而角度表現方式改成「方向」，還有其他參數值請參考下圖所示，直到你個人覺得滿意為止！

7. 開始把上述的筆刷運用塗布在峰巒雨懸厓的層面上，可能一開始雲朵狀況有點彆扭而有筆觸邊緣感，但之後還是可以容易修改的。

8. 接下來是要介紹一支專門畫樹上花瓣或其花朵的筆刷，只要事先畫出如圖右下角類似的圖況，再經過「擷取筆尖」手續即可，這次我嘗試「向量筆/可溯向量筆」做擷取對向，當然你也可以找其他的筆刷來嘗試，或許其它筆刷會有更完美的結果，我們可以一邊畫一邊做修正。

9. 「畫樹當然」這時要把整體樹形及陰暗面布局出來，先做個暗色的底色，一幅畫的整體感要先把氣勢營造出來，雖然它只是冰山的一角，但佔很多畫面重點的點綴效果喔！

10. 然後利用步驟8所介紹的筆刷把花朵與樹葉用各種色調方法做一個初步的布置！

11. 接下來，我們再繼續介紹一支「厚塗/重材質調色刀」，這是一支可以畫出油畫與岩石質感的特殊筆刷，只要先在另個地方練習完兩下就很容易熟悉它了。

12. 如水泥匠般的塗上峭壁的立體感與深淺度，再慢慢的將不需要的線搞擦去即可。

13. 繼續處理噌家整體畫面的深度與彩度，再用「混色筆/緣頭漸變筆筆刷」抹動部份雲朵，讓它們有動態漂流的效果。

14. 其他部份的雲彩也如此嘗試，並且增加樹上的花葉數量和加上「下落式陰影」，完成主體造型！

15. 最後，經過「等化」處理過後，將整體色調變得更自然調和些，這既不是油畫也不算國畫，只能算是自己想作的畫！

文、Simi老師

如果是POKEMON的粉絲，想必都對進廣告前那句經典的「我是誰？」搭配角色剪影的問答記憶猶新吧？角色的剪影能否給人明顯的識別度與記憶點是一個重要的課題。

為何要利用剪影進行設計？

許多學生在設計角色造型時，多數情況常是想到什麼就畫什麼，沒有經過嚴密的思考與設計。如果是一次性的插畫可能會有造型形狀沒有考慮到構圖的情形發生（關於構圖形狀請參考：聯成電腦分享：如何用符號來構圖的2種方法，而用於會反覆出現的動、漫畫或遊戲角色，則會造成角色的感覺千篇一律、沒有變化及識別度。而利用剪影是一個易於突破這種盲點的方式。

利用剪影進行設計的方法！

用剪影來設計角色的方式很多元，沒有一定的規則限制。一般來說可以先畫角色草圖再調整剪影形狀，也可以先決定一個構圖形狀，再配合形狀畫出剪影造型。

例如我在設計這系列的角色時，就是先依照設定直覺的畫出各個角色的設計。

在將圖形轉成剪影後，針對多個角色的統整性以及問題點都能容易發現。

例如中間的「多娜星人」這個角色，整體輪廓明顯比其他角色來得零碎，形狀也比較呆版，因此就可以將這個角色抓出來做調整。

在不考慮色彩的情況下，以剪影的輪廓形狀為主，並搭配部分線條輔助做設計修改。建議可以做三種以上不同的設計，強迫自己做各種突破性的調整，以求達到最好的畫面效果。

最後再選出一個最滿意的剪影形狀為主軸，融合其他版本剪影局部或新的想法來進行最終版本的設計。

利用剪影設計只是一種方法，重點在於不要拘泥於形式，而是要理解構圖與角色設計最根本的核心主軸：好看的構圖以及有識別度的形狀，並充分利用剪影的優勢「不受色彩與細節拘束，來進行角色的設計唷！」

Photo credit：Pixabay@Pexels

文、晶典老師

前幾篇文章講述了每年流年時會幫大家加分的「化祿」、「化權」、「化科」星，要開始聊聊會扣分的「化忌」星了。這系列詳解流年的文章建議要依老師粉絲專頁的順序閱讀才會容易瞭解，跳過一篇就容易看不懂哦。

隨著時光流轉，「化忌星」會對不同的星曜產生作用（請參考下表）。農曆西元年尾數為0～9依序對應「四化」這列的庚、辛、壬、癸、甲、乙、丙、丁、戊、己。化祿、化權、化科、化忌這四列則代表這四顆星在那一年，會對什麼星星產生作用。欄位中的即是這些星星的縮寫。

農民曆常說今日「忌」遠行、「忌」動土之類的，代表做這些事的運勢較差，「化忌」星也有此義，但化忌星對流年的影響是一整年，即是說今年在某方面需要特別注意。要特別強調的是，這裡只說要「注意」，並非是招來厄運，不需過於緊張或擔心。忌有時是事情晚成，拖泥帶水，遇事難以判斷或決策，結果不一定是不好的。但如果那件事本身就已是你的弱點，譬如說手頭不寬裕卻遇到投資機會、伴侶間感情不好又突然要分隔兩地，或是身體不好卻遇到新冠疫情大流行，這時就要更用心去處理。

太陽化忌：

農曆西元年尾數為 4 時，每個人都會有一點太陽化忌的運勢。這年在工作上會較不順利，升遷、考運都要更花心思，可能會拖更久時間，甚至就失去機會了。本來信任你的老闆、長官也會有點動搖，連帶也會影響貴人運，要更用心在學業、事業上才能獲得肯定。也要特別注意男性長輩的身體（包括年紀較大的哥哥）。今年可能會有桃花，但是好是壞掌握在自己手中，任何事都需以誠信為前提與原則

太陰化忌：

農曆西元年尾數為 5 時，每個人都會遇到太陰化忌。這有破財的意象，今年理財要特別小心，有可能破財或是收入降低，甚至歸零。如果換工作、職位也不容易談到高薪，或是表面上加薪，實際上要付出更多，CP值（性價比）降低。更別衝動在沒找到新工作前就離職，或是投資事業時，自己幾乎是無給職，甚至不支薪，務必要維持固定收入，不要貿然衝動行事。這年也要注意女性長輩的身體（年紀較大的姐姐亦然）。太陰有時也會指感情上受到傷害（尤指愛情與親情），注意自己還是要給對方空間，勿情緒勒索，才能細水長流。