因為公司項目要用vue框架，所以會用vue-cli來新建項目。用過vue的都知道，要全局安裝vue以及腳手架vue-cli，然後執行vue init webpack projectname來新建vue項目模板。但是最近新建項目的時候發現，即使是在本機全局安裝了vue最新版本2.5.17，可是用vue ...
因為公司項目要用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-cli官方解釋是，它是一個基於vue.js進行快速開發的完整系統，提供：
- 通過 @vue/cli 搭建互動式的項目腳手架。
- 通過 @vue/cli + @vue/cli-service-global 快速開始零配置原型開發。
- 一個運行時依賴 (@vue/cli-service)，該依賴：
- 可升級；
- 基於 webpack 構建，並帶有合理的預設配置；
- 可以通過項目內的配置文件進行配置；
- 可以通過插件進行擴展。
- 一個豐富的官方插件集合，集成了前端生態中最好的工具。
- 一套完全圖形化的創建和管理 Vue.js 項目的用戶界面。
接下來廢話少說，我就直接說說vue-cli最新版本怎麼安裝，怎麼新建項目。
- 安裝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。敬請期待~~~~
