vue-cli 3.0(2)

在 vue-cli 中,除了可以使用命令行來創建和配置 vue 項目,也爲您新增了界面的形式來創建和配置 vue 項目。我們可以輸入 vue ui 來打開界面來配置我們的項目。

界面佈局上面有 3 標籤頁,分別爲 projects(項目)create(創建)和 import(導入),在 create 標籤下我們可以創建一個項目。在下面有導航,可以瀏覽放置項目的位置。

點擊“create a new project here” 按鈕來創建一個 vue 項目,然後進入下一個頁面,默認是開啓 features (特性)頁面吧。這裏我們可以根據需要來選擇一些 vue 的擴展,說是 features 也可以叫模塊,選擇我們項目所需的模塊。router 用來配置和管理我們單頁應用的路由。vuex 管理應用的狀態,類似 redux 或是 flux。這讓我想起 react + redux + rxjs 來創建應用。Linter 和 Formatter 規範我們的代碼,提高我們的 code 質量,這裏有機會給大家講一講 Prettier。

選擇後可以將所做的選擇保存下來作爲預設,以便下一次使用預設來創建項目。

然後在 Project configuration(項目配置)頁面中,可以配置 vue project 項目和 ESLint,提供可視化來配置我們項目的輸出路徑等。

ESLint 可以幫助我們檢查代碼,提高代碼的質量。可以配置 ESLint 的規則來檢查代碼。ESLint 會根據我們定義的規則,檢查 javascript 文件並給出 js 的報告,我們也可以定義報告輸出格式和樣式。

(Project tasks)項目任務,這裏可以配置或寫一些任務腳步,例如 serve 任務是啓動我們項目,在開發模式可以邊開發邊調試,build 任務就是將我們項目進行構建出一些列生產環境下的 bundle 文件,lint 任務檢查我們工程文件,我們當然也可以直接在 package.json 中寫一些腳步。

當我們運行 serve 任務來啓動項目我們可以界面上看到許多和項目相關信息,一目瞭然。

我們 Add a plugin 頁面可以搜索安裝插件,以列表形式列出所有插件,列表中可以查看到插件相關信息。

這裏我們下載 vue-cli-plugin-vuetify,vuetify 個人用過是一個在 vue 接觸封裝一些組件的框架,感興趣以後給大家分享一下。

在 projects 標籤下可以查看我們項目的一些具體文件。

在 import 標籤我們可以輕鬆地導入文件。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章