Facebook加入
LINE加入
2021/12/25
Getting Started with Vue-CLI
Vue：2.6.11
Vue-CLI：4.4.4
在我們使用 Vue.js 開發 Single Page Application（SPA）時，在前置作業上要做不少的設定，比如套件的安裝、格式的設定等等，頗為麻煩。
因此就有了 Vue CLI 這個工具的誕生，只要透過一些簡易的選項，Vue CLI 可以快速的幫助我們產生一個 SPA 專案，可以節省設定的時間。
Installation
首先，要先安裝 vue-cli 套件才可以使用 vue 的指令。
; npm
npm install -g @vue/cli
; yarn
yarn global add @vue/cli安裝成功以後，可以試試看是否有 vue 的指令可以使用。
vue --versionCreate Project
可以透過以下指令建立專案：
vue create 下完指令之後，系統會開始詢問相關的設定。
Initial Configuration
Please pick a preset
一開始會先詢問你要使用哪種模組，選擇預設的話只會安裝 babel 和 eslint。
通常建議選擇自訂，按照自己專案的需要做調整。
Check the features needed for your project
此選項是用來選擇專案需要用到的套件
一樣按照你的需求選擇需要的工具，選擇完成以後，接下來會再詢問這些套件更細節的設定。
Use class-style component syntax?
TypeScript 的設定，決定是否要用 class-style 的語法。
Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)?
決定是否要使用 Babel 做轉譯。
Use history mode for router? (Requires proper server setup for index fallback in production)
Vue Router 的設定，選擇是否要使用 history mode，使用 history mode 的話，URL 會像一般常見的 https://localhost/id/3，這種模式會透過 history.pushState 的特性達成頁面跳轉時無需重 load 頁面的功能。
另一種則是 hash mode，URL 會像 https://localhost#id。
Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default)
選擇 CSS 的預處理器。
Pick a linter / formatter config
選擇 ESLint 的規範設定。
Pick additional lint features
ESLint 的設定，選擇程式碼檢查的時機。
Pick a unit testing solution
選擇 unit test 的套件。
Where do you prefer placing config for Babel, ESLint, etc.
選擇要將各套件的 config 拆開，還是都寫在 package.json 裡。
Save this as a preset for future projects
這個選項是詢問要不要把上述這些設定當成模組，如果選擇要的話，可以再為這個模組命名，下一次在一開始選模組那個步驟就會多出新模組的選項。
Run your app
建立完成以後，進入你的專案根目錄，執行以下指令就可以執行你的專案了。
npm run serveNotice： 該指令只是建立一支 process 監聽 http request，只適合用來測試；正式環境建議還是用
npm run build產生編譯過的檔案。
Remove Preset
上面有提到可以建立設定模組，讓之後也可以透過自訂模組產生專案。
在管理方面，也可以透過 vue 指令來進行刪除。
; 顯示目前自訂的模組設定
vue config
; 刪除自訂模組
vue config --delete presets.YOUR_PRESET_NAME
熱門推薦
留言回覆
