資訊專欄INFORMATION COLUMN
摘要：單元測試前端的單元測試目前有兩個比較熱的框架，一個是的方式，一個是。小伙伴們不用急，關于單元測試這塊，我會找時間寫博客的。首先前端的測試分為兩種，一個是單元測試，另一個就是測試了。
? ? ? ? 因為公司項目要用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最新版本怎么安裝，怎么新建項目。
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。
? ? ? ??
? ? ? ? 這里我選擇的是第三個，標準配置。
? ? ? ??
? ? ? ? 我在這里選擇的是第一個，在保存的時候檢查。第二個的意思是在提交的時候檢查。根據個人需要來選擇吧。
? ? ? ??
? ? ? ? 前端的單元測試目前有兩個比較熱的框架，一個是karma+mocha+chai的方式，一個是jest。根據個人習慣選擇就好，因為我比較喜歡第一種，所以我選擇的是第一種。小伙伴們不用急，關于單元測試這塊，我會找時間寫博客的。
? ? ? ? 關于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。敬請期待~~~~
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1763.html
摘要：從零開始搭建一個項目一搭建一個可靠成熟的項目介紹我是去年六月份接觸的，當時還是個菜逼，當然現在也是，寫了一年，抄代碼的時候一直是，在別人的框架基礎上開發，然后漸漸發現很多的模板都各有優點，所以慢慢的開始集合到了一起。 從零開始搭建一個vue項目 -- vue-cli/cooking-cli（一） 1.vue-cli搭建一個可靠成熟的項目 1.介紹 vue-cli 我是去年六月...
摘要：查看安裝是否正常回車后看到輸出當前安裝的版本號，例如，即安裝正常通過以上步聚，說明已經安裝完并能正常運行。再次用腳手架搭建項目第二步將模塊安裝完成后，就可以使用以下命令創建項目了。 前言 世間萬難 無非一拖二懶三不讀書 對 說的就是我 突然覺得這句話說的很對，自從上次寫完nodejs安裝及npm全局模塊路徑的設置已經過去兩月有余，而我的vue框架學習也就止步于此。還是沒有給自己施加壓力...
摘要：什么是讀音，類似于是一套用于構建用戶界面的漸進式框架。的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。 什么是vue.js Vue (讀音 /vju?/，類似于 view) 是一套用于構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與現代化...
摘要：下面來就來講講腳手架的安裝吧。如何安裝安裝只需要在終端下輸入下面一條命令自帶不需要安裝安裝完成后使用即可。原因是的問題，要求版本是。想用安裝，就必須用安裝一下。 前言 Vue作為前端三大框架（Angular，React，Vue）之一，號稱是最簡單，最容易上手的框架，同時也是行內的大趨勢，還可以用來開發最火的小程序。具有開發快，雙向數據流等特點，有些人認為Vue是Angular和Reac...
摘要：下面來就來講講腳手架的安裝吧。如何安裝安裝只需要在終端下輸入下面一條命令自帶不需要安裝安裝完成后使用即可。原因是的問題，要求版本是。想用安裝，就必須用安裝一下。 前言 Vue作為前端三大框架（Angular，React，Vue）之一，號稱是最簡單，最容易上手的框架，同時也是行內的大趨勢，還可以用來開發最火的小程序。具有開發快，雙向數據流等特點，有些人認為Vue是Angular和Reac...
閱讀 2310·2021-11-22 12:01
閱讀 1983·2021-11-12 10:34
閱讀 4508·2021-09-22 15:47
閱讀 2827·2019-08-30 15:56
閱讀 2861·2019-08-30 15:53
閱讀 2398·2019-08-30 13:53
閱讀 3371·2019-08-29 15:35
閱讀 3119·2019-08-29 12:27
