因為公司專案要用vue框架，所以會用vue-cli來新建專案。用過vue的都知道，要全域性安裝vue以及腳手架vue-cli，然後執行vue init webpack projectname來新建vue專案模板。但是最近新建專案的時候發現，即使是在本機全域性安裝了vue最新版本2.5.17，可是用vue-cli腳手架建立vue專案木板的時候發現，vue的版本還是2.5.2版本。查過官方文件之後瞭解到，vue-cli有最新版本，需要重新安裝，而且新建專案的方式也有所不同。這篇文章將針對vue以及vue-cli最新版本進行介紹。

       vue-cli官方解釋是，它是一個基於vue.js進行快速開發的完整系統，提供：

• 通過 @vue/cli 搭建互動式的專案腳手架。
• 通過 @vue/cli + @vue/cli-service-global 快速開始零配置原型開發。
• 一個執行時依賴 (@vue/cli-service)，該依賴：
  • 可升級；
  • 基於 webpack 構建，並帶有合理的預設配置；
  • 可以通過專案內的配置檔案進行配置；
  • 可以通過外掛進行擴充套件。
• 一個豐富的官方外掛集合，集成了前端生態中最好的工具。
• 一套完全圖形化的建立和管理 Vue.js 專案的使用者介面。

       接下來廢話少說，我就直接說說vue-cli最新版本怎麼安裝，怎麼新建專案。

1.  安裝Vue Cli

1. 關於舊版本Vue Cli的包名稱由vue-cli改成了@vue/cli。如果你已經全域性安裝了舊版本的vue-cli(1.x或2.x)，你需要先通過npm uninstall vue-cli -g解除安裝它。(注：安裝linux系統的注意一下，包括深度以及ubuntu使用者，執行這句命令前，需要新增sudo來給這條語句一個執行許可權)

2. Node版本要求Vue Cli需要Node.js 8.9或更高版本。目前我電腦中安裝的是8.12.0版本。windows系統的小夥伴們可以直接在node官網下載安裝包進行安裝。但是linux系統的小夥伴們就沒那麼幸運了，即使是下載了node官方的壓縮包，大家還是一臉懵逼，不知道怎麼用。這裡做個小插曲，給大家以ubuntu版本的liunx系統為例，講一下怎麼升級node.js到最新穩定版本。

3. node.js中文版官方網址ubuntu官方包管理中，node.js最新版本是8.10.0版本，因為我們是一群患有重度強迫症的程式設計師，總是會在有新的穩定版本的東西出來後，就要更換，所以官方源中的版本並不滿足於我們，so，我們要從其他源中來下載最新且穩定的版本。首先開啟我們的終端，然後在裡面執行curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -這句命令，來獲取最新的下載安裝源，之後輸入sudo apt-get install -y nodejs來安裝最新版本的node.js。安裝成功之後，我們執行node -v來看一下版本。(v8.12.0)

        好，收！有點跑題了，有興趣的小夥伴可以私下試一試，注：如果系統不小心癱瘓，本人概不負責(開個玩笑哈，我已經試驗成功了，不然就不會寫這篇文章了)

        接下來，我們就來說說怎麼安裝最新版的vue-cli。其實很簡單，就一句命令：npm install @vue/cli -g (啊，是的，我又要寫注意了，其實就是想提醒一下linux系統的小夥伴，別忘了加sudo給許可權。O(∩_∩)O)

        安裝之後，你就可以在命令列中訪問 vue 命令。你可以通過簡單執行vue，看看是否展示出了一份所有可用命令的幫助資訊，來驗證它是否安裝成功。當然，你還可以用下面這個命令來檢查其版本是否正確(3.x):

vue --version

        到此為止，Vue Cli就安裝成功了，但是...emmm...你以為安裝成功就大功告成了麼？嘿嘿，接下來的坑，你們不想跳都不行了，恭喜你，成功進入天坑~~~

        2.  建立一個專案

         vue create

        來，我們執行以下命令來建立一個新專案：

vue create hello-world

        小夥伴們，這裡有個坑，就是你新建專案的時候，不能用駝峰方式命名專案名稱了，它會報錯的，只能用全小寫外加下劃線的方式。不信邪的小夥伴們可以試試哈，要是成功了記得告訴我一聲，讓我也開心一下~~~

        接下來我就講講具體怎麼建立專案：

• 首先，我們在終端裡輸入命令，然後回車，出現以下介面：

        這裡我選擇的是自定義安裝，也就是第二個。

• 接下來進入第二步，選擇你需要的模組。

        因為個人習慣的問題，我選擇的是babel、Router、Vuex、Linter/Formatter、unit Testing、E2E Testing。選擇完成後，就按回車進入下一步。

• 接下來會讓你進行一系列的框架或外掛版本選擇，首先是路由部分

        因為我的專案不需要，所以我選擇了n。

• eslint配置

        這裡我選擇的是第三個，標準配置。

• 檢查設定

        我在這裡選擇的是第一個，在儲存的時候檢查。第二個的意思是在提交的時候檢查。根據個人需要來選擇吧。

• 單元測試

        前端的單元測試目前有兩個比較熱的框架，一個是karma+mocha+chai的方式，一個是jest。根據個人習慣選擇就好，因為我比較喜歡第一種，所以我選擇的是第一種。小夥伴們不用急，關於單元測試這塊，我會找時間寫部落格的。

• e2e(端到端測試)

        關於e2e測試，做前端開發的小夥伴有些可能對e2e測試沒什麼概念，我這裡簡單說一下這是做什麼的。e2e，中文解釋為端到端測試。首先前端的測試分為兩種，一個是單元測試，另一個就是e2e測試了。e2e測試主要是來測試頁面的業務邏輯，主要注重使用者體驗。可以模仿使用者在頁面的點點點操作。有興趣的小夥伴可以專門學一下。這裡就不在贅述了。

        因為個人習慣吧，我比較喜歡用nightwatch框架，語法簡潔，比較容易理解，至於Cypress框架，本人沒有接觸過，所以不敢妄加評論。有會的小夥伴可以教教我哈~~~~

• 配置檔案存放

        這裡是在問你，怎麼存放這些配置檔案。第一個是單獨存放，第二個是整合在package.json。我選擇第一個，單獨存放。

• 儲存當前配置

        這裡是在詢問你是否儲存當前配置，我選擇的是否。你也可以根據你的習慣選擇是，下一個在建立專案的時候，就會出現一個你儲存過的配置選項。

        選擇完成後，專案就會自動建立，並且會預設安裝你選擇的這些外掛或模組。到此為止，專案就算建立完成了。但是，哈哈哈，是的，還有個坑在等著你們~~~建立過vue專案的小夥伴有沒有遇到過安裝chromedriver時，報錯的？肯定有...

        就比如上圖中的錯誤。這個問題網上有一堆教程，有的會說，用npm install chromedriver –chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver這個命令就行了。沒錯，你在單獨安裝這個外掛的時候，可以用這個命令，但是咱們這是用@vue/cli命令在建立專案啊，如果這一步過不去，後面的就全都失敗了，你開啟專案資料夾之後就會傻眼了，裡面除了一個package.json還有個node_module資料夾，這是專案建立失敗的表現。這可咋整~~~別急，這個錯誤的出現可能是因為FQ的問題，有的小夥伴會說，我電腦安裝了FQ軟體了啊？可是，這個是通過npm管理器進行安裝的，並不是所有FQ軟體都能讓它正常執行。所以我們需要在本地全域性配置一下chormedriver源，開啟終端就一個命令：npm config set chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver。然後在重新建專案就會發現一次性通過，堪稱完美~~~

        進入到這一步，就說明你已經成功了。然後我們開啟專案目錄：

        左側是新建好的專案，但右側是vue-cli 2.x版本建立的目錄。我們看到，新建的專案沒有了build和config資料夾。這也是@vue/cli 3.0的新特性，一些webpack打包的配置，我們可以自己動手去配置了，正好也給了我們學webpack的機會。這裡就先不講新專案的webpack配置了，有興趣的小夥伴可以自己研究著配置。我下篇部落格會講新專案究竟如何配置webpack。敬請期待~~~~