按照「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
script:
- bundle exec rake book:build
- mkdir public
- cp progit.html public/index.html
- cp progit.{pdf,epub} public/
- cp -r images/ public/
接著是部屬的部分，目錄 /publc 就是我們要放在網頁上的資料，develop 則是我們目前的分支名稱：
deploy:
provider: pages
skip_cleanup: true
github_token: $GITHUB_API_TOKEN
local_dir: ./public
on:
branch: develop
.travis.yml 完整程式碼請參考[這裡]，或到官網參考更多的設定參數。
<template>
<input
v-model.number="heightModel"
type="number">
<div
ref="myBlock"
class="border border-danger">
Block
</div>
</template>
<script>
export default {
data() {
return {
height: 50,
};
},
computed: {
heightModel: {
get() {
return this.height;
},
set(height) {
this.height = height;
this.changeHeight(height);
},
},
},
mounted() {
if (this.height) {
this.changeHeight(this.height);
}
},
methods: {
changeHeight(height) {
this.$refs.myBlock.style.height = `${height}px`;
},
}
}
</script>
// Register a global custom directive called `v-focus`
Vue.directive('focus', {
// When the bound element is inserted into the DOM...
inserted: function (el) {
// Focus the element
el.focus()
}
})<template>
<input
v-model.number="height"
type="number">
<div
v-height="height"
class="border border-danger">
Block
</div>
</template>
<script>
export default {
directives: {
height: (el, binding) => {
el.style.height = `${binding.value}px`;
},
},
data() {
return {
height: 50,
};
},
}
</script>See the Pen Vue.js Reference ID VS Custom Directives by chenuin (@chenuin) on CodePen.
mkdir script vim script/cibuildscript/cibuild 內容如下(參考檔案):
#!/usr/bin/env bash set -e # halt script on error JEKYLL_ENV=production bundle exec jekyll build # bundle exec htmlproofer ./_site
language: ruby
rvm:
- 2.6
script: ./script/cibuild
before_script:
- chmod +x ./script/cibuild
deploy:
provider: pages
skip_cleanup: true
github_token: $GITHUB_TOKEN
repo: chenuin/chenuin.github.io
local_dir: ./_site
target_branch: master
on:
branch: master
TOKEN 設定(參考)
git add . git commit -m 'init commit' git push origin master
git clone https://github.com/[github-account]/jekyll-asciidoc-quickstart
# .travis.yml rvm: - 2.6完整檔案請看: .travis.yml
git add .travis.yml git commit -m 'update rvm version'
git push -u origin master可以到 Travis CI 上確認執行結果，若正確設定的話，將自動把 master 的內容編譯後，自動上傳到分支 gh-pages 。