Figma 如何匯入現有網站，可以使用 Figma to HTML, CSS, React & more! 快速解決！
可以先安裝 google chrome 的擴充功能、Figma的擴充功能，再到網站使用 google chrome 的擴充功能匯出 Json，並到 Figma 將檔案匯入。
成果雖然會和實際網站有些差別，但很方便。
Figma的擴充功能
https://www.figma.com/community/plugin/747985167520967365/Figma-to-HTML%2C-CSS%2C-React-%26-more!
google chrome 的擴充功能
https://chrome.google.com/webstore/detail/html-to-figma/efjcmgblfpkhbjpkpopkgeomfkokpaim
操作方式：
以下說明如何使用 webpack5 打包 Vue3 專案，若尚未安裝 webpack5，可以參考「webpack5 安裝及基礎教學」。
需要安裝的套件如下，特別需要注意的是，在 Vue3 裡支援副檔名 .vue 的 single-file components 的套件，從 vue-template-compiler 變成 @vue/compiler-sfc：
請先新增專案，並在目錄內新增 package.json，並 npm 執行安裝。
執行指令安裝：
首先針對 Vue 專案所設定的，Loader 可分為test、loader，前者是定義哪些檔案需要處理，像這裡就是副檔名為 .vue 的檔案；後者則是使用哪一個套件處理 ：
當專案內import vue 可以使用別名(alias)：
因此完整的 webpack.config.js 如下：
在目錄內 src/ 新增兩個檔案:
Vue3 主要元件 App.vue
新增 Entry File: index.js
設定別名的用途可以看第一行 import App from './App.vue';。
目錄 dist/ 則是新增 index.html，要注意的是先前 index.js 是綁定到 #app，所以 <div id="app"></div> 就是 vue render的地方。
此時的專案架構應該會像是：
專案已經上傳 Github [vue3-webpack5-template]，可以下載使用。
執行下面的指令開始打包
完成後目錄 dist/ 下多了一個檔案 main.js，此時可以開啟 index.html ，看到 Hello World! 就代表打包成功囉！
根據維基百科：「Webpack 是一個開源的前端打包工具。Webpack 提供了前端開發缺乏的模組化開發方式，將各種靜態資源視為模組，並從它生成優化過的程式碼。」，使用前必須安裝 Node.js。
webpack 從版本4.0.0開始，可以不需要設定設定檔(webpack.config.js)，設定檔最基本的設定分別是：Entry、Output，前者代表 webpack 必須從哪邊開始進行打包，後者則是定義封裝輸出的路徑以及檔案名稱。
以下參考官網簡單的範例，執行前請先安裝 Node.js，可以參考「安裝node js」替換成需要的版本。
請先新增一個專案目錄，並安裝 webpack、webpack-cli
此時目錄內應該會多一個 package.json 和 node_module/。
新增目錄 src/，以及檔案 index.js
新增目錄 dist/，以及檔案 index.html
此時的專案架構應該會像是：
執行下面的指令開始打包
完成後會發現目錄 dist/ 下多了一個檔案 main.js，此時可以開啟 index.html ，看到 Hello World! 就代表打包成功囉！
在沒有設定檔的情況下，webpack預設會尋找檔名 src 或是目錄 src/ 底下的 index，並將打包好的檔案放到目錄 dist/ 底下，預設檔名是 main.js，等同於：
可以透過指令來指定設定檔的路徑及名稱：
範例還未使用Loader、Plugin等功能，在這個範例還未使用 css/image，也可以透過 Loader設定處理，webpack可以處理Javascript、Json，安裝loader可以讓webpack處理更多類型的檔案。另外在這個範例裡手動新增 index.html ，其實也可以透過相關的 Plugin 自動產生。
其他進階設定的功能可以參考 https://webpack.js.org/guides/getting-started/ 了解更多。
按照「Ubuntu 安裝 web server Caddy 2」遇到的安裝問題：
執行第二行 update 後會跳出錯誤訊息：
代表需要先安裝 ca-certificates
安裝後重新再一次指令 sudo apt update ，就不會出現錯誤了。
<template>
<div>
<p v-text="message" />
<button v-on:click="$emit('accepted')">OK</button>
</div>
</template>
<script>
export default {
props: ['message']
}
</script>
<template>
<div>
<p v-text="message" />
<button v-on:click="$emit('accepted')">
OK
</button>
</div>
</template>
<script>
export default {
props: ['message'],
emits: ['accepted'],
}
</script>
雖然這個變動不大，但如果元件內忘記宣告，上層會收到兩次的事件觸發，造成非預期性的事件產生。<template>
<div>
<input v-model="message">
<button v-on:click="$emit('confirm', message)">
OK
</button>
</div>
</template>
<script>
export default {
emits: {
confirm: message => message.length > 10,
},
data() {
return {
message: undefined,
};
},
}
</script>
<template>
<label>
<input
type="text"
v-bind="$attrs"
v-on="$listeners">
</label>
</template>
<script>
export default {
inheritAttrs: false
}
</script>
<template>
<label>
<input
type="text"
v-bind="$attrs">
</label>
</template>
<script>
export default {
inheritAttrs: false
}
</script>
<template>
<my-element
:name="$attrs.name"
@update-name="$listeners['update-name']" />
</template>
<template>
<my-element
:name="$attrs.name"
@update-name="$attrs['onUpdateName']" />
</template>
按照指令安裝 Caddy 2
安裝完成後，執行 caddy 應該會跑出相關的指令提示
執行 caddy
等同於 caddy run，在背景程式運作
將 Caddyfile 轉成 json config
重新載入 caddy，可使新的設定生效
關閉 caddy
假設你已經安裝 Vue cli 3.x，你可以直接到專案裡執行：
vue add i18n
接著會詢問你預設的語言、備用語系(fallbackLocale)及字典檔的目錄，所謂的備用語系指的是當使用者選擇語言的字典檔有缺時，會採用哪個語言的資料替代。
若按照預設值執行的話，可以確認一下專案是否出現目錄 /[Your Project]/src/locales/ ，裡面有個 en.json 英文的字典檔。
這個方法相關的設定已經自動完成，可以直接在 template 上使用：
{{ $t('message') }}
Step 1: 安裝套件
npm install vue-i18n
Step 2: 新建目錄及字典檔
mkdir locales新增目錄 /[Your Project]/src/locales/ ，加入第一個字典檔 en.json 。
{
"hello": "Hello!"
}
接著 index.js
import en from './en';
export const messages = {
en,
};
你也可以在 locales/ 下繼續新增其他語系
Step 3: 設定
新增 i18n.js 設定 locale 預設語言及 fallbackLocale 備用語言等，messages 是所有語系的字典檔。
import Vue from 'vue';
import VueI18n from 'vue-i18n';
import {messages} from './locales';
Vue.use(VueI18n);
export default new VueI18n({
locale: 'en', // set locale
fallbackLocale: 'en',
messages, // set locale messages
});
將設定加入 main.js
import Vue from 'vue'
import App from './App.vue'
import i18n from './i18n'
Vue.config.productionTip = false
new Vue({
i18n,
render: h => h(App),
}).$mount('#app')
試著在 template 上使用：
{{ $t('hello') }}
上述的檔案完成後，專案的架構如下列所示：
./src/ ├── App.vue ├── i18n.js ├── locales │ ├── en.json │ └── index.js └── main.js
更多的安裝資訊可以參考[文件]
$i18n.locale
fallbackLocale
sudo apt update sudo apt install build-essential libssl-dev curl https://raw.githubusercontent.com/creationix/nvm/v0.36.0/install.sh | sh source ~/.profile nvm install v12.19.0
npm install -g @angular/cli
ng new my-app執行需要一點時間，完成後會在目前的目錄中出現一個 my-app/ 的資料夾。
cd my-app ng serve
