vue-cli改版 3.0betaUI介面初體驗

ANFOUNNYSOUL發表於2018-07-10

聽說vue-cli3.0.0-rc.3版本的釋出了,那估計距離穩定版本也不遠了。

你是不是還在看這個

vue-cli改版  3.0betaUI介面初體驗vue-cli改版  3.0betaUI介面初體驗

不不不,這些我都不感興趣,騷年,來讓你3個命令列,你有我快?

vue-cli改版  3.0betaUI介面初體驗

其中GUI特別有意思。趕緊來嚐嚐鮮。對於開發者也越來越友好。

首先確定該安裝的都裝了,直接進入到@vue-cli安裝程式,mac記得sudo

> npm i -g @vue/cli複製程式碼

yarn

> yarn global add @vue/cli複製程式碼

別誤會,vue-cli@vue/cli不是同一個源。@是npm賬戶下作用域,和本文暫時沒關係。

安裝完後檢查下

> vue -V
> 3.0.0-rc.3複製程式碼

ok,建立個乾淨的資料夾

> mkdir newVue
> cd newVue/
> vue ui複製程式碼

然後就開始建立了,並且瀏覽器會自動開啟http://localhost:8001/project/select,進入到專案管理器,emmm....上次是english,應該是翻譯了

vue-cli改版  3.0betaUI介面初體驗

在這個介面,我們可以看到一些輔助功能。

vue-cli改版  3.0betaUI介面初體驗


先建立一個專案

vue-cli改版  3.0betaUI介面初體驗

設定好下一步vue-cli改版  3.0betaUI介面初體驗

這裡我們選擇手動。

vue-cli改版  3.0betaUI介面初體驗

在這可以選擇要用什麼樣的外掛,這些外掛在建立專案的時候用的較多。如果要用其他外掛的話,到後面我們可以去搜尋其他外掛安裝。繼續下一步

vue-cli改版  3.0betaUI介面初體驗

其他功能裡預設啟用lint每次儲存時自動檢查。linter配置這裡我們選第一個,僅用eslint的語法提示建立專案,建立專案

vue-cli改版  3.0betaUI介面初體驗

這裡讓我們將配置預設,下次可以快捷配置。

vue-cli改版  3.0betaUI介面初體驗

點選建立專案


vue-cli改版  3.0betaUI介面初體驗

建立完畢後,會自動進入到專案詳情頁

vue-cli改版  3.0betaUI介面初體驗先到左上角新增外掛去安裝我們開發需要的外掛,

vue-cli改版  3.0betaUI介面初體驗

目前只能單個安裝,或許是考慮到測試版本依賴包的緣故。我們安裝一個PWA外掛。

vue-cli改版  3.0betaUI介面初體驗

ps:這個gif有點大,諒解下哈。

安裝完畢後自動進入到外掛安裝配置頁面,並選擇配置提交。

vue-cli改版  3.0betaUI介面初體驗

果然是沒有翻譯完全。在配置頁,可以進行專案外掛的相關配置。

vue-cli改版  3.0betaUI介面初體驗

外掛的其他配置可以自行探索,主要將大部分外掛配置視覺化操作,不用那麼苦13的找文件去了。給尤大點個?先。

既然有plugins 那肯定少不了npm run dev吧?

vue-cli改版  3.0betaUI介面初體驗

這樣下來,結合官方文件,vue對於新手越來越容易上手,emmm...

vue-cli改版  3.0betaUI介面初體驗