一、使用Vue-cli3創(chuàng)建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

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

3、使用命令行創(chuàng)建項目

下面先使用命令行工具創(chuàng)建一個Vue項目：

首先執(zhí)行創(chuàng)建命令：

vue create my-project

如下圖所示：

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

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

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

然后會出現(xiàn)選擇配置界面：

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

各選項簡介：

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

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

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

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

繼續(xù)回車，選擇標準配置作為代碼檢查：

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

繼續(xù)回車，選擇Jest作為單元測試：

繼續(xù)回車，這里選擇Chrome:

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

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

選擇好配置以后就開始創(chuàng)建項目了：

創(chuàng)建完成界面如下：

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

項目啟動成功界面如下：

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

4、使用Vue UI可視化界面創(chuàng)建項目

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

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

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

$ vue ui

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

5、導入項目

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

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

這樣就可以導入項目了。

二、項目管理

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

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

1、項目儀表盤

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

1、插件

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

2、依賴

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

3、配置

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

主要有下面一些設置：

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

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

4、任務

點擊左側列表“任務”，可以切換到任務界面

server開發(fā)環(huán)境

這里對應的任務，對應于package.json中的script腳本。

輸出界面可以顯示一些編譯的信息

控制臺能很方便的看到單頁應用運行的信息，包括錯誤數(shù)、警告數(shù)、靜態(tài)資源大小、模塊大小、依賴大小。在控制臺選項，點擊“啟動app”就可以運行項目，相當于以前的npm run dev命令。

分析界面能幫助我們分析代碼和模塊的大小。一般在生產模式下，才會考慮這個問題：

build生產環(huán)境

各個功能和server中的類似，在分析界面可以很明顯的看到編譯后的文件和未編譯文件在大小上的差距。

lint

在該界面可以進行代碼檢測。

inspect審查

在這個模式下，我們可以看到詳細的webpack配置。

點擊運行旁邊的“變量”按鈕，可以選擇開發(fā)環(huán)境、生產環(huán)境、測試環(huán)境。默認是生產環(huán)境。

三、啟動順序

項目創(chuàng)建完成以后，在瀏覽器里面輸入下面的URL地址：http://localhost:8080/，Vue項目就可以啟動了，啟動后的界面如下：

有沒有人思考過這樣一個問題：Vue項目的啟動順序是如何呢？我們使用VS Code打開創(chuàng)建的項目：

Vue項目代碼整體結構如下：

網(wǎng)頁啟動的時候首先是啟動一個HTML頁面，我們發(fā)現(xiàn)在public文件夾下面有一個index.html文件，打開該文件：

我們發(fā)現(xiàn)index.html中的title標題和啟動以后頁面顯示的標題一致，我們猜想：是不是首先啟動的index.html頁面呢？我們修改一下titie標題的值：

然后在看一下頁面的titie值：

我們發(fā)現(xiàn)：頁面顯示的title值和index.html代碼里面title的值一致，所以我們確定Vue項目啟動的時候，首先顯示index.html頁面。

這時候又有人會提出疑問：index.html頁面里面只有一個div標簽，而啟動頁面下面顯示了很多內容，下面的內容是從哪里來的呢？

四、總結

vue ui 提供了一套完整的vue項目構建的頁面。既保留了vue-cli的即開即用的便利性，同時也保證了webpack配置的自由度。

對應使用vue的開發(fā)者來說，使用vue ui創(chuàng)建項目，非常友好，整個功能從構建到管理得到了優(yōu)化。

總結

以上是生活随笔為你收集整理的Vue：使用Vue-cli3创建Vue项目的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。