Vue CLI 3 快速建立篇

Vue CLI 3 在建立專案上已經可以利用 GUI 的方式來建立，不需要輸入一堆指令！
官網說明：https://cli.vuejs.org/zh/guide/creating-a-project.html

使用 GUI 介面建立專案

先介紹如何使用 GUI 介面建立專案

在終端機輸入：

1

vue ui

輸入後就會開啟一個瀏覽器介面，如下圖：

建立新專案

點選創建，並選擇要創建專案的資料夾位置，選好後按下在此建立項目即可

Step1: 詳情 (Details)

預設是填寫專案名稱以及選擇模組管理要使用 npm 或是 yarn，選擇預設則會兩者都有安裝，最後也有提供創建 git 的選擇
可以依照自己的開發習慣填入，就可以到下一步了～

Step2: 預設 (Presets)

預設有提供三個選項:

• 默認 (Default preset)
• 手動 (Manual)
• 遠程預設 (Remote preset)

默認 (Default preset)

默認是一套已經定義好的插件與配置，選擇後就會使用這個配置直接創建專案
預設也可以自己設定，可以透過選擇手動 (Manual) 來選取自己在開發上常用的配置並設為預設

手動 (Manual)

只有選擇手動才會進入頁面中的功能與配置頁面

選擇手動 (Manual) 配置可以選擇下一步，就會進入功能頁面（Step3）

可以選擇自己常用的插件，像是 Bebal、ESLint、CSS 預處理器等等

選擇好以後按下一步就會進入到最後的配置頁面（Step4）
這邊可以選擇像是 ESLint 要使用何種規範等等的細節設定

遠程預設 (Remote preset)

遠程預設是可以使用 github、gitlab 等等已經設定好的遠端設定檔來直接創建專案
主要是載入 preset.json 這個檔案

如果是使用 github 公開儲存庫中的檔案只要輸入 username / repo 就可以了
如果是使用 gitlab, bitbucket 可以在前面加上前綴詞

這邊載入的是這位作者寫好的：https://github.com/xiabaiyang/vue-preset

以上，不管使用何種方式都可以建立起一個新專案～

RUN 一下新建立的專案

在終端機輸入：
npm

1

npm run serve

yarn

1

yarn serve

就可以建立起來了！
畫面：

還想再安裝插件

如果在預設的時候沒有選擇好插件或是配置，可以再透過指令在建置好的專案中加入

例如：

ESLint

在終端機輸入：

1

vue add @vue/eslint

加入 Router

1

vue add router