Vue：使用Vue-cli3創建Vue項目

本文轉載自查看原文 2020-02-24 20:38 718 Vue

一、使用Vue-cli3創建Vue項目

1、檢查當前Vue版本

輸入下面的命令檢查當前安裝的Vue-cli版本：

$ vue -V

結果如下：

說明本機安裝的是3版本。如果是2.xx版本，就需要先卸載掉舊版本，然后在安裝新版本。卸載舊版本命令：

npm uninstall vue-cli -g

注意：上面檢查Vue-cli版本的命令中，V一定要大寫。

2、下載並安裝Vue-cli3

使用下面的命令進行安裝：

$ npm install @vue/cli -g

因為我本機已經安裝了vue-cli3，這里就不在演示了，安裝時間稍微長一些，請耐心等待

3、使用命令行創建項目

下面先使用命令行工具創建一個Vue項目：

首先執行創建命令：

vue create my-project

如下圖所示：

輸入命令以后直接回車，然后會讓你選擇是使用默認（default）還是手動（Manually）。

注意：如果是在Windows平台上面使用命令行創建項目，Git Bash有一個坑：就是使用鍵盤上面的方向鍵選擇默認模式還是手動模式的時候不起作用，如果是使用默認默認，則用Git Bash或者CMD、Power Shell都一樣。如果要選擇手動模式，則要使用CMD或者Power Shell。

按鍵盤的上下鍵就可以選擇默認還是手動設置。如果選擇default，一直回車下去就可以了。這里選擇手動(Manually)。

然后會出現選擇配置界面：

注意：使用鍵盤的上下方向鍵可以上下選擇切換，空格鍵是選中或者取消，a是全選

各選項簡介：

TypeScript：支持使用TypeScript進行編碼。
Progressive Web App (PWA) Support：PWA支持。
Router：支持vue-router。
Vuex：支持Vuex狀態管理。
CSS Pre-processors：支持CSS預處理器。
Linter / Formatter：支持代碼風格檢查和格式化。
Unit Testing：支持單元測試。
E2E Testing：支持E2E測試。

選擇好以后直接回車，進入路由配置選擇界面：

注意：Y表示使用history模式，N表示使用hash模式(即URL地址里面帶有#)

選擇好以后繼續回車，然后選擇CSS預處理器，這里選擇Less模式：

繼續回車，選擇標准配置作為代碼檢查：

繼續回車，樣式檢查選擇保存的時候進行檢查：

繼續回車，選擇Jest作為單元測試：

繼續回車，這里選擇Chrome:

繼續回車，會讓你選擇配置文件是在獨立的文件中還是集成到package.json中，這里選擇獨立文件：

繼續回車，會讓你選擇是否保存這次的配置方案以便以后使用，這里選擇不保存：

選擇好配置以后就開始創建項目了：

創建完成界面如下：

根據提示，進入項目文件里面，輸入npm run serve命令啟動項目：

項目啟動成功界面如下：

在瀏覽器里面輸入http://localhost:8080/就可以瀏覽項目了：

4、使用Vue UI可視化界面創建項目

上面的例子中使用的是命令行創建的項目，下面在使用可視化界面創建。在Vue Cli3中提供了可視化界面來創建Vue項目。

注意：使用可視化界面創建項目的時候，使用Git Bash、CMD或者Power Shell都可以。

輸入下面的命令，會啟動vue ui可視化界面，然后創建項目

$ vue ui

然后就可以在瀏覽器里面看到可視化界面了：

可視化界面主要分為下面幾個部分：

項目：該面板會列出所有的Vue項目。
創建：使用該面板可以創建新的Vue項目。
導入：可以導入Vue項目。

下面開始創建一個新的Vue項目。選擇“創建”，然后點擊下面的“在此創建新項目”按鈕，如圖所示：

在上方的地址欄中，還可以幫助我們選擇根目錄、新建文件夾、收藏文件夾功能。點擊“在此創建新項目”進入詳情頁面

這里要求輸入項目名稱，選擇包管理器，還有若目標文件夾已存在則覆蓋功能，以及常用的git init。這里選擇npm作為包管理器，如圖所示：

然后點擊“下一步”進入“預設”界面：

在“預設”界面，這里采用了約定大於配置的思想，使用了預設的功能。我看既可以一鍵創建一個新的Vue項目，也可以采用自定義的方式，甚至支持git的遠程預設。這里選擇“手動配置項目”選項，如圖所示：

然后點擊“下一步”進入功能界面：

在功能界面選擇一些需要安裝的插件，一些插件介紹如下：

Babel：將ES6、ES7等代碼轉換成ES3等低級別的瀏覽器可以支持的代碼。
TypeScript：添加對TypeScript的支持。
PWA：移動支持應用。
Router：Vue的路由功能。
Vuex：Vue官方的狀態管理工具。
CSS Pre-processors：CSS預處理器。
Linter：ESLint，進行代碼檢測。
使用配置文件：使用配置文件。

在這里，我們可以自定義的選擇我們需要用到的功能。除了項目中可能用到的vuex、vue-router這種業務相關的功能外，我們還能選擇CSS預處理、ESLint、TypeScript等這種項目相關的功能，能夠幫助我們減少很多復雜的配置。以CSS預處理為例，我們不需要再去配置less-loader、sass-loader、stylus-loader。

這里選擇Router、Vuex、Linter等進行安裝，其它功能也可以在項目創建完成以后再進行安裝。然后點擊“下一步”進入配置界面

這一步，我們需要進行配置：

是否使用類樣式語法。
為TypeScript自動選擇polyfill。
使用history路由還是hash路由（默認使用hash路由，如果使用history路由則需要服務端做相應配置）。
選擇使用的CSS預處理語言：SCSS/SASS、LESS、STYLUS。這里選擇使用LESS。
選擇代碼檢查或者格式化的配置：TSLint、ESLint。這里選擇ESLint。
代碼檢查時機：Lint on save：保存代碼的時候檢測代碼是否有錯誤。Lint and fix on commit：提交代碼的時候檢測代碼是否有錯誤。這兩個需要哪個勾選哪個，可以都勾選，也可以都不勾選。

配置完成以后，點擊“創建項目”，然后會彈出一個對話框，詢問是否保存這次的配置，以便下次創建項目的時候使用該次配置，這里選擇不保存，如圖所示：

然后就會開始創建項目，請耐心等待。創建過程中，會添加需要的模塊，並自動運行Vue：

等待安裝完成以后，會自動跳轉到項目管理頁這個頁面，如下圖所示：

5、導入項目

上面我們使用可視化界面創建了項目，除了可以直接創建項目以后，還可以導入已經存在的項目。

在Vue項目管理器界面選擇導入項目，然后選擇項目所在的文件夾，最后點擊“導入這個文件夾”按鈕即可將項目導入，如下圖所示：

這樣就可以導入項目了。

二、項目管理

在上面的步驟中，我們創建了一個vue項目，創建完成以后，會自動跳轉到項目管理頁面。該頁面主要是跟packages.json相關的配置。

在該頁面可以安裝vue的調試工具，返回創建新項目，如下圖所示：

1、項目儀表盤

默認打開的就是項目儀表盤頁面，這里是一些使用介紹，如下圖所示：

1、插件

選擇左側列表的“插件”，會切換到插件頁面，該頁面顯示了項目中安裝的插件，這里大多數是全局插件。在右上角的搜索框里面可以搜索需要安裝的插件，然后點擊“添加插件”就可以安裝插了，如下圖所示：

2、依賴

點擊左側列表的“依賴”，可以切換到依賴界面。在這里，我們可以很方便的管理項目相關的依賴，可以安裝新的依賴，也可以刪除依賴。點擊“查看詳情”，查看依賴的具體說明，如下圖所示：

3、配置

點擊左側列表的“配置”，可以切換到配置界面。這里的配置頁，基本上是以前的config文件夾的相關內容。如下圖所示：

主要有下面一些設置：

公共路徑：應用的根目錄。
輸出目錄：build生成的目錄。
資源目錄：靜態資源存放的目錄。
啟用運行時編譯：允許在組件中使用template，但是會因此讓app多10kb負載。
Enable Production Source Map：在生產環境使用js Source Map便於調試，但是會影響build的速度。
並行編譯：多線程並行編譯Babel或者TypeScript。
啟用CSS Modules：默認只有以*.module.[ext]結尾的文件才會被視為CSS模塊。開啟此項，允許你在文件名中刪除module並將所有的樣式文件(css|scss|sass|less|styl(us)?)視為CSS模塊。
抽取CSS：是否將CSS導出為一個CSS文件，而不是寫在js中內聯，並動態注入。在構建為web組件時，默認情況下也會禁用此選擇(樣式內聯並注入shadowRoot)。構建庫時，您也可以將其設置為false，以避免用戶自己導入CSS。
啟用CSS Source Maps：為CSS啟用Source map，會影響構建性能。

點擊“更多信息”，可以查看相關的幫助和詳情。