範例
操作步驟
產生「樣版資料夾」
執行下面指令,產生「my-template」這個資料夾,和「my-template/template」這個資料夾
$ mkdir -p my-template/template
產生「my-template/template/index.html」
執行下面指令,產生「my-template/template/index.html」這個檔案,內容只有一行「{ { name }}」。
$ echo '{ { name }}' > my-template/template/index.html
註:上面的步驟寫成「template-create.sh」這個「script (腳本)」
註:上面「{ {」中間有一個空白,實際操作時,請將空白去除,因為jekyll會置換,所以暫時多一個空白來使其顯示出來。
觀看「my-template」資料夾結構
執行
$ tree my-template
顯示
my-template/
└── template
└── index.html
1 directory, 1 file
根據樣版,產生新的專案
執行「vue init」的樣式是「vue init [template] [project]」,
所以上面的「[template]」這個欄位,填入剛剛產生的「my-template」路徑「./my-template」。
而「[project]」這個欄位,則是填入「my-project」要產生新的專案資料夾名稱。
執行
$ vue init ./my-template my-project
上面的步驟寫成「project-create.sh」這個「script (腳本)」
一直按下「Enter」使用「預設值」
顯示
? name my-project
vue-cli · Generated "my-project".
觀看「my-project」資料夾結構
執行
$ tree my-project/
顯示
my-project/
└── index.html
0 directories, 1 file
觀看「my-project/index.html」這個檔案的內容
執行
$ cat my-project/index.html
顯示
my-project
也就是剛剛的「my-template/template/index.html」
原本的內容是「{ { name }}」,
從剛剛「vue init」的過程,
被轉換成「my-project」,
註:上面「{ {」中間有一個空白,實際操作時,請將空白去除,因為jekyll會置換,所以暫時多一個空白來使其顯示出來。
Next
接下來觀看「create-template-003」這個範例說明。