Vue CLI 3.x 簡單體驗

文檔

中文文檔 補充於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\note\my-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版要發版了，下週應該會有官方文檔出來