Vue CLI 3.x 簡單體驗

toBeTheLight發表於2018-02-01
Vue

文件

中文文件 補充於02月10日

vue腳手架的3.x版本已經在開發中，現在還處於alpha版本。
我們來看看有哪些變化。

使用

npm install -g @vue/cli

命名方式已經改為npm推薦的新的包名規則，使用作用域。詳情可檢視此文章。

命令變化

vue -h
我們看到

  1. create [options] <app-name> 建立一個由vue-cli-service支援的新專案
  2. invoke <plugin> 在已建立的專案中新增外掛
  3. serve [options] [entry] 在開發者模式下以零配置執行一個js或vue檔案
  4. build [options] [entry] 在生產模式下以零配置構建一個js或vue檔案
  5. init <template> <app-name> 舊api 需要@vue/cli-init // 就是原來的vue-cli init <template> <app-name>

中文是我加的
說到零配置，可以看看這個Parcel，生態還不完善，零配置的缺點就是不夠自由。

那麼vue-cli-service是什麼？這個幾個新的命令有是什麼？
我們先試著建立一個專案。

初始化模板

vue create my-project
這個時候會進入選項

? Please pick a preset:
> default (babel, eslint)
> Manually select features //手動選擇功能

我們選擇default走向

default路線

Pick the package manager to use when installing dependencies: //用哪個下載依賴
> Use Yarn
  Use NPM

// 現在的順序是Yarn在第一位的
因為沒有裝Yarn，所以使用NPM

然後出現提示，進入安裝過程

Vue CLI v3.0.0-alpha.5
✨  Creating project in E:git
otemy-project. // 建立專案
�  Initializing git repository... // 初始化git庫
⚙  Installing CLI plugins. This might take a while... // 安裝腳手架外掛

提示裡多了些符號，氣氛變得活潑起來。

其實這個過程中還會判斷你對npm/yarn源的連線速度，詢問你是否切換至淘寶映象

 Your connection to the the default npm registry seems to be slow.
 Use https://registry.npm.taobao.org for faster installation?

完成之後我們可以看到除node_modules之外的目錄結構變成了

│  package-lock.json
│  package.json
├─public
│      favicon.ico
│      index.html
└─src
    │  App.vue
    │  main.js
    ├─assets
    │      logo.png
    └─components
            HelloWorld.vue

build哪裡去了？config哪裡去了？配置都消失了？

我們觀察一下npm指令碼命令

  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint"

現在是依靠vue-cli-service來執行的。那麼那些配置應該就在vue-cli-service當中（所謂零配置），所以vue-cli-service應該是起的一個服務。

自定義路線

我們選擇Manually select features之後

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 ( ) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

看到可以自由組合現在所需的功能了。
建立的過程中會詢問配置檔案儲存位置是config.js還是package.json，但是其中也是一些簡單的配置。

vue-cli-service功能

vue-cli-service應該還提供了一些沒說明的用法
這部分會持續更新

生成 web components 規範的元件程式碼

配置npm 指令碼"build:components": "vue-cli-service build --target wc-async **/*.vue"

可以直接把 Vue 的元件程式碼生成 web components 規範的元件程式碼，不過要記得 web components 的規範裡元件名中是必須有橫線的，所以使用 app 這樣的元件名會導致構建失敗
來自勾三股四微博

變化

  1. 可以看到以前繁瑣的配置檔案不見了，變成了一種約定大於配置的狀態（檢視issues，其實還是能配置的，需要建立vue.config.js檔案），根據命令列描述和文件說明是可以在此基礎上配置其他各種外掛的，但是我沒有深入研究。
  2. 文件中有提到It automatically infers the entry file in the current directory，所以我嘗試著新增過個html檔案看是否能達到直接變成多頁面應用，沒有成功，可能還有其他方法。
  3. 新增了對npm源的連線速度的判斷

後話

vue-cli還在開發當中，文件還沒完成，建立完專案根據配置不同還是存在一些問題的，大家可以去討論並提出你的想法，參與pr，去拿contribution吧。

更新於02月07日beta版要發版了，下週應該會有官方文件出來

相關文章