按照指令安裝 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
sudo apt update sudo apt install ruby-full build-essential zlib1g-dev設定用戶的環境變數，應避免用root安裝Ruby Gems。
echo '# Install Ruby Gems to ~/gems' >> ~/.bashrc echo 'export GEM_HOME="$HOME/gems"' >> ~/.bashrc echo 'export PATH="$HOME/gems/bin:$PATH"' >> ~/.bashrc source ~/.bashrc
gem install jekyll bundler
jekyll new myblog在目錄下應該會發現新的資料夾 /myblog，大致的內容可以參考一下。
├── 404.html
├── about.markdown
├── _config.yml
├── Gemfile
├── Gemfile.lock
├── index.markdown
├── _posts
│ └── 2020-05-27-welcome-to-jekyll.markdown
└── _site
├── 404.html
├── about
├── assets
├── feed.xml
├── index.html
└── jekyll
cd myblog bundle exec jekyll serve // or you can ... bundle exec jekyll serve --host=[ip address] --port=[port number]瀏覽器開啟 http://localhost:4000 ，就可以看到預設的首頁，安裝就告一段落，可以開始進行開發。
ext install joaompinto.asciidoctor-vscode(3) 按 [Enter] 送出
sudo apt-get install -y asciidoctor
asciidoctor --version asciidoctor -V
.Sample document ==== Here's a sample AsciiDoc document: [listing] .... = Title of Document Doc Writer :toc: This guide provides... .... The document header is useful, but not required. ====
asciidoctor sample.adoc在同一個目錄下會產生同檔名的HTML檔案 sample.html
// for *.xml asciidoctor -b docbook sample.adoc
git clone https://github.com/darshandsoni/asciidoctor-skins.git
asciidoctor -a stylesheet=./asciidoctor-skins/css/notebook.css sample.adoc // or asciidoctor -a stylesheet=notebook.css -a stylesdir=./asciidoctor-skins/css sample.adoc
// -o, --out-file asciidoctor sample.adoc -o mypage.html
// -D, --destination-dir asciidoctor sample.adoc -D pages輸出檔案會在資料夾 /pages 內。
// -s, --no-header-footer asciidoctor sample.adoc -o mypage.html只會輸出html中 <body> 標籤裡的內容，方便用於嵌入式頁面。
cd /bin git clone https://github.com/asciidoc/asciidoc asciidoc-8.6.9 cd asciidoc-8.6.9 git checkout 8.6.9
ln -s /bin/asciidoc-8.6.9/asciidoc.py /bin/asciidoc ln -s /bin/asciidoc-8.6.9/a2x.py /bin/a2x
autoconf ./configure make sudo make install
apt install asciidoc
sudo apt-get install libcurl4-gnutls-dev libexpat1-dev gettext \ libz-dev libssl-dev
wget https://mirrors.edge.kernel.org/pub/software/scm/git/git-2.26.0.tar.gz tar zxvf git-2.26.0.tar.gz git-2.26.0※如果需要其他 git 版本 [https://mirrors.edge.kernel.org/pub/software/scm/git/]
./configure --prefix=/usr \
--with-gitconfig=/etc/gitconfig \
--with-python=python3 && make安裝sudo make install
git --version git version 2.26.0
git sparse-checkout init開啟設定之後，在目錄會自動新增檔案 sparse-checkout ，預設內容是：
/* !/*/代表根目錄內第一層內所有的檔案都列入追蹤；換句話說，根目錄裡任何資料夾內的檔案(包含資料夾)都會被忽略。
git sparse-checkout list
git sparse-checkout add [folderPath/filePath]
git sparse-checkout set [folderPath/filePath]
git sparse-checkout disable
npm install --save-dev jestnpm的安裝教學可以參考「教學」。
// combineArray.js
const combineArray = (array, separator = ',') => {
if (!Array.isArray(array)) {
return new Error('Invalid input array');
}
if (typeof separator !== 'string') {
return new Error('Invalid input separator');
}
return array.join(separator)
};
module.exports = combineArray;
測試的副檔名 *.test.js// combineArray.test.js
const combineArray = require('./combineArray');
test('Combine array: [1, 2]', () => {
expect(combineArray([1,2])).toBe('1,2');
});{
"scripts": {
"test": "jest"
}
}npm run test所有的*.test.js都會跑過一次，並顯示結果，包含有多少測試項目以及成功和失敗的數量。
const combineArray = require('./combineArray');
describe('Combine array', () => {
const inputArray = [1, 2];
test('Default', () => {
expect(combineArray([])).toBe('');
expect(combineArray(inputArray)).toBe('1,2');
expect(combineArray(inputArray, undefined)).toBe('1,2');
});
test('With custom separator', () => {
expect(combineArray(inputArray, ' ')).toBe('1 2');
expect(combineArray(inputArray, '*')).toBe('1*2');
expect(combineArray(inputArray, '-')).toBe('1-2');
});
describe('With invalid input', () => {
test.each(
[undefined, null, 1, 'string', {}]
)('Input array: %s', (item) => {
expect(() => {
combineArray(item);
}).toThrow(new Error('Invalid input array'));
});
test.each(
[null, 1, [], {}]
)('Input separator: %s', (item) => {
expect(() => {
combineArray(inputArray, item);
}).toThrow(new Error('Invalid input separator'));
});
});
});
執行結果
npm install @storybook/vue --save-dev安裝其他相依套件，包含：vue、vue-loader、vue-template-compiler、@babel/core、babel-loader、babel-preset-vue。
npm install vue --save npm install vue-loader vue-template-compiler @babel/core babel-loader babel-preset-vue --save-dev
{
"scripts": {
"storybook": "start-storybook"
}
...
}import { configure } from '@storybook/vue';
configure(require.context('../src/components/stories', true, /\.stories\.js$/), module);代表會載入所有在資料夾 ../src/components/stories 內的符合 *.stories.js 的檔案。// src/components/stories/Button.stories.js
import Vue from 'vue';
import MyButton from '../Button.vue';
export default { title: 'Button' };
export const withText = () => '<my-button>with text</my-button>';
export const withEmoji = () => '<my-button>😀 😎 👍 💯</my-button>';
export const asAComponent = () => ({
components: { MyButton },
template: '<my-button :rounded="true">rounded</my-button>'
});npm run storybook打開瀏覽器確認
./
├── .storybook
│ └── config.js
├── babel.config.js
├── package.json
├── package-lock.json
├── public
│ ├── favicon.ico
│ └── index.html
├── README.md
└── src
├── App.vue
├── assets
│ └── logo.png
├── components
│ ├── Button.vue
│ └── stories
│ └── Button.stories.js
└── main.js
composer create-project --prefer-dist laravel/laravel blog指令執行後會自動 composer install 讀取 composer.json 安裝所需及相依的套件。
composer global require "laravel/installer"2-A. 把 $HOME/.composer/vendor/bin 路徑放置於環境變數 $PATH 裡。
export PATH="~/.config/composer/vendor/bin:$PATH" laravel new blog2-B. 如果沒有設定環境變數，可能會有錯誤訊息laravel: command not found，也可以用決定路徑來執行。
# "沒有"設定環境變數 .config/composer/vendor/bin/laravel new blog
php artisan key:generate # Example oupout Application key set successfully.如果沒有執行這一段，執行專案可能會跳出錯誤訊息 No application encryption key has been specified.。
php artisan serve也可以指定 HOST 或 PORT
php artisan serve --port=8080 --host=192.168.88.139
php artisan -V Laravel Framework 5.8.29
npm install --global @vue/cli
vue --version // or vue -V
vue create [APP_NAME]你可以使用預設選項或根據需求選擇，結束後會自動幫你執行 npm install。
npm run servevue cli不再使用dev當作開發環境的指令，如果你習慣用dev，可以到 package.json 修改script。
VUE_APP_NODE_ENV: '"development"' VUE_APP_ROOT_API: '"http://localhost/api"'
VUE_APP_NODE_ENV: '"production"' VUE_APP_ROOT_API: '"https://example.com/api"'
export default {
mounted() {
console.log(process.env.VUE_APP_ROOT_API);
}
}npm install axios
import axios from 'axios' // use axios in your project // ...
axios.post('[URL]', {headers:[HEADER], params: [PARAM]})
.then(response => {
console.log(response);
})
.catch(err => {
console.log(err.response);
});
axios.get('[URL]', [DATA], {headers:[HEADER]})
.then(response => {
console.log(response);
})
.catch(err => {
console.log(err.response);
});
axios.put('[URL]', [DATA], {headers:[HEADER]})
.then(response => {
console.log(response);
})
.catch(err => {
console.log(err.response);
});
axios.delete('[URL]', {headers:[HEADER], data:[DATA]})
.then(response => {
console.log(response);
})
.catch(err => {
console.log(err.response);
});
sudo apt install php
php-xml php-curl php-mbstring php-zip unzip
php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php -r "if (hash_file('sha384', 'composer-setup.php') === '48e3236262b34d30969dca3c37281b3b4bbe3221bda826ac6a9a62d6444cdb0dcd0615698a5cbe587c3f0fe57a54d8f5') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
php composer-setup.php
php -r "unlink('composer-setup.php');"touch install.sh chmod +x install.sh
#!/bin/sh
EXPECTED_SIGNATURE="$(wget -q -O - https://composer.github.io/installer.sig)"
php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
ACTUAL_SIGNATURE="$(php -r "echo hash_file('sha384', 'composer-setup.php');")"
if [ "$EXPECTED_SIGNATURE" != "$ACTUAL_SIGNATURE" ]
then
>&2 echo 'ERROR: Invalid installer signature'
rm composer-setup.php
exit 1
fi
php composer-setup.php --quiet
RESULT=$?
rm composer-setup.php
exit $RESULT
./install.sh
sudo cp composer.phar /bin/composer
composer create-project symfony/website-skeleton my-project
cd my-project/ php bin/console server:run預設為http://127.0.0.1:8000，打開瀏覽器看到畫面就算大功告成了！
composer require symfony/requirements-checker
composer remove symfony/requirements-checker
$ sudo apt install python3-pip $ sudo pip3 install virtualenv $ mkdir web_project $ cd web_project $ virtualenv env --no-site-packagesb. 安裝Django、新增專案
$ source env/bin/activate $ pip3 install django $ django-admin.py startproject myproject .c. 請在settings.py加上伺服器本身的IP，在開發階段可以用*代替。STATIC_ROOT這行本來在檔案裏面沒有，要手動自己加上去。
# myproject/settings.py ALLOWED_HOSTS = ["*"] ... STATIC_ROOT = os.path.join(BASE_DIR, "static/")d. 加入static的檔案
$ python3 manage.py collectstatic成功之後資料夾內會多一個static的目錄。
# python3 $ sudo apt update $ sudo apt install apache2 libapache2-mod-wsgi-py3 # python2 $ sudo apt update $ sudo apt install apache2 libapache2-mod-wsgi如果希望重開伺服器時，apache2可以自動啟動，請執行下面指令。
$ sudo systemctl enable apache2完成安裝後，可以在 http://localhost/ 看到apache預設的首頁。
# /etc/apache2/sites-available/django.conf
<VirtualHost *:80>
DocumentRoot /var/www/web_project
Alias /static /var/www/web_project/static
<Directory /var/www/web_project/static>
Require all granted
</Directory>
<Directory /var/www/web_project/myproject>
<Files wsgi.py>
Require all granted
</Files>
</Directory>
WSGIDaemonProcess myproject python-path=/var/www/web_project python-home=/var/www/web_project/env
WSGIProcessGroup myproject
WSGIScriptAlias / /var/www/web_project/myproject/wsgi.py
</VirtualHost>
$ sudo a2ensite django.conf $ sudo a2dissite 000-default.conf $ sudo service apache2 reload打開 http://localhost/ 就可以看到網站了。
$ npm install vue-resource
# src/main.js import VueResource from 'vue-resource' Vue.use(VueResource)
this.$http({
url: {URL},
method: 'GET',
body: {},
headers: {HEADER}
}).then(function (response) {
console.log('success');
}, function (response) {
console.log('fail');
});
this.$http.post({URL}, {BODY}, {HEADER}).then(
function (response) {
console.log('success');
}, function (response) {
console.log('fail');
});
this.$http({
url: {URL},
method: 'POST',
body: {BODY},
headers: {HEADER}
}).then(function (response) {
console.log('success');
}, function (response) {
console.log('fail');
});
sudo curl -LsS https://symfony.com/installer -o /usr/local/bin/symfony sudo chmod a+x /usr/local/bin/symfony
# create a symfony project
symfony new my_project 3.4
php my_project/bin/symfony_requirements
# run application
cd my_project
php bin/console server:run
