Vue Cli安裝以及使用

 

 

        由於公司項目要用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最新版本怎麼安裝，怎麼新建項目。

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。敬請期待~~~~