Vue 學習筆記 (二) -- 使用 VueCli 3

XiaoChen發表於2018-10-11
Vue筆記

前面的文章已經簡單介紹過了 Vue Cli 3 的新版本特性，下面我們就親自上手感受一下我們新版本的腳手架工具。

先從專案搭建開始。

建立專案

開啟我們的命令列工具，輸入下面的命令建立專案。

vue create hello-world
複製程式碼

身為一名程式設計師，當然要從 hello-world 開始寫嘍。

此處要注意 官方文件 上面這樣說：

如果你在 Windows 上通過 minTTY 使用 Git Bash，互動提示符並不工作。你必須通過 winpty vue.cmd create hello-world 啟動這個命令。

當然如果你的命令並沒有出錯的話完全可以忽略這點。

建立專案命令選項

言歸正傳，輸入上面的命令回車後應該是下面這樣子的：

Vue CLI v3.0.1
? Please pick a preset: (Use arrow keys)
❯ default-project (vue-router, sass, babel) 
  default (babel, eslint) 
  Manually select features 
複製程式碼

上面的第一條，也就是 default-project 這一個選項在你第一次建立專案的時候是並不會出現的，只有你第一次建立完成專案後回提示你儲存為預設配置模板，下次新建專案的時候就可以使用你選用的配置快速新建專案了，不需要再重新選擇配置專案了。

廢話有點多，我們繼續介紹這裡顯示的選項。

這裡的第二條選項便是 vue cli 3 預設的專案模板，包含 babel 和 eslint。

第三條選項便是自主選擇你專案所需的配置。

這裡由於預設模板沒有啥展示的必要所以我們便選擇手動配置。

選取專案配置

選擇第三個選項後是這個樣子的：

Vue CLI v3.0.1
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to t
oggle all, <i> to invert selection)
❯◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◯ Router
 ◯ Vuex
 ◯ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing
複製程式碼

這裡我們可以選擇我們需要的配置選項，選擇完成後回車進入下一步。

Vue CLI v3.0.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, CSS Pre-processors
? Use history mode for router? (Requires proper server setup for index fallback 
in production) (Y/n) 

複製程式碼

上面我選擇新增了 Router 所以這裡會問我需不需要使用 history 模式，選擇是然後進行下一步，在這裡需要注意的是當最後一步的時候會提示你要不要儲存該配置為模板，選擇是後自定義一個名字，以後就可以使用這一套配置為預設模板快速建立專案了，就是我前面的第一條預設配置選項。

如下：

Vue CLI v3.0.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, CSS Pre-processors
? Use history mode for router? (Requires proper server setup for index fallback 
in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported 
by default): SCSS/SASS
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In packag
e.json
? Save this as a preset for future projects? (y/N) 
複製程式碼

然後進入專案目錄，啟動專案就可以了。瀏覽器訪問 hello-world，至此大功告成。

後面文章會講解如何修改 Vue Cli 3 專案基礎配置。

更多文章可檢視 我的部落格

相關文章