iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 5
2
Modern Web

平時沒注意的 JavaScript - JS 生態系及週邊工具整理系列 第 5

什麼是 Boilerplate ? 使用 Vue-Cli 來創建你的第一個 Project ! (Messenger Extension 第五天)

  • 分享至 

  • xImage
  •  

什麼是 Vue-cli

cli 這個詞的是代表 command line(終端)

也就是 Vue 所提供的一套 command line 工具

提供你在終端的環境使用


(在你的終端輸入 Vue 就可以使用)

後續將會講解功能、安裝方式

Vue-cli 的安裝方式

基本上在 google 搜尋 vue cli install 就可以找到相關的安裝教學

我們這邊就直接參考 vue-cli 在 npm 上提供的教學 (連結)

先裝好 npm 和 node

接下來在終端輸入 npm install -g vue-cli

就完成了

在終端輸入 vue 就可以測試是否有安裝成功(還會跳出相關用法)

什麼是 Vue-cli

基本上 Vue-cli 這個工具唯一的用途就是幫你創建 boilerplate

如果不知道 boilerplate 的意思,他就是一種樣板

意思是我們在使用不同程式語言時,常常會有一些基本設定,或是常常需要你重複寫的 code

舉例來說,像是每次都要寫的 html

如果每次重新開啟一個專案時,都要手動輸入這些內容

肯定會很枯燥乏味

所以就出現了不少工具,可以根據你的需求產生不同的樣板,也就是 boilerplate

舉例來說,像是許多編輯器都會支援的一個工具 - emmet

就提供了像是,輸入 html:5 後按

就能自動產出 html boilerplate 的功能

[維基百科: boilerplate code]
[What is boilerplate in programming] - Stackoverflow
[Emmet 官網]

常見的 boilerplate 套件

就舉跟 JavaScript 比較相關的 express, vue, react, angular

Express Generator - 自動產生 express 這個後端框架的 boilerplate

Create-React-App - 自動產生 React 開發的 boilerplate

Angular-Cli - 自動產生 Angular 開發的 boilerplate

Vue-Cli - 自動產生 Vue 開發的 boilerplate

Vue-cli 包含了什麼

開始使用 vue-cli,可以先輸入 vue list 來查看 vue-cli 支援哪幾種 template

★ browserify - 使用 browserify 作為打包工具,附加 hot-reload, lint, 單元測試
★ browserify-simple - 輕量版 browserify 樣板
★ pwa - 使用 webpack 作為打包工具,附加 Progressive Web App 的相關支援
★ simple - 最輕量的 Vue 樣板,幾乎沒有附加任何工具
★ webpack - 使用 webpack 作為打包工具,附加 hot-reload, lint, 單元測試, css 編譯
★ webpack-simple - 輕量版的 webpack 樣板

這邊我們將使用 webpack 樣板,讓我們能夠盡可能了解 Vue-Cli 的各種功能
(除了 PWA 以外,webpack 樣板提供了最多設定)

這邊我們就實際來初始化(init)一次吧!

vue-cli 初始化

這邊就一步一步的介紹

  1. 使用 vue init webpack <資料夾名稱> 來創建一個 boilerplate
  2. 輸入 project name,你的專案想使用的名稱(會寫入 package.json 裡)
  3. 輸入 project description,簡介(會寫入 package.json 裡)
  4. 輸入 author,作者,可以隨意填(或按 enter,會寫入 package.json 裡)
  5. Vue build - 你想使用的編譯器,這裡選 Runtime + Compiler
  6. 安裝 Vue-Router - 一個很不錯的插件,選 Y (Yes)
  7. 使用 ESLint 來規範你的 coding style,後續會介紹,選 Y (Yes)
  8. 這邊會叫你選擇 ESLint 的設定檔,我們使用 Standard
  9. 是否要加入 Unit test (單元測試),對這個 project 不需要,選 n (no)
  10. 是否要加入 e2e 測試 (自動模擬使用者操作的測試),選 n (no)

接下來他就會創一個資料夾了,裡面會有滿滿的 boilerplate code

cd 進入我們的資料夾後

可以先使用 npm install 把該裝的套件都裝好

使用你偏好的編輯器打開,可以看見許多奇妙的檔案

這我們會在後續花篇幅一一介紹,我們明天見!


上一篇
打造 Messenger Extension - Day 4 - Vue.js 基本介紹 + 優缺點
下一篇
你所不知道的 JavaScript 模組化歷史,NPM & Module
系列文
平時沒注意的 JavaScript - JS 生態系及週邊工具整理33
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言