快速搭建一個Vue-cli專案(簡單到爆炸)
引言:
2013-2020年,這7年是web前端技術的一個高速發展期,也是前端開發崗位的考驗期。
在我接觸前端時,JQuery十分熱門,開發者從原生JS到JQ的應用,可以說是大大提高了開發效率,也被廣大前端所接受。
但事物發展的過程總是螺旋式上升、波浪式前進的。雖然JQuery有自己的一段輝煌歷史,但同樣面臨著被新事物取代的危機。
近幾年,前端三大框架的相繼出現,給前端開發者帶來了更加新穎的開發理念,web前端技術在短時間內也算進入了一個穩定期。
Vue作為三大框架之一,是國內市場的“領頭羊”,也是大勢所趨,學習Vue是前端開發者一定要做的事情。
本文就為大家帶來Vue腳手架構建專案的最簡單流程。(適合初學者或新接觸Vue框架的使用者)
開始:
1.裝環境:
注:node環境和全域性vue環境這裡不再贅述。
我們需要的環境很簡單,就是vue-cli,開啟命令列輸入以下命令(注意:不是想當然的vue-cli)。
npm install @vue/cli -g
安裝成功後,輸入以下命令:
vue ui
就會從瀏覽器開啟Vue的專案管理器,接下來進行視覺化操作。
在“建立欄”,點選最下邊的綠色按鈕,“建立新專案”。
在這裡,我給專案起名為“mypro”,大家可以隨意取合法的名字。
下邊的包管理器,我用的npm,用yarn的小夥伴也可以自行選擇。
初始化git倉庫
選擇好了,就可以點選“下一步”。
到了“預設”,這裡建議大家手動配置專案。(按需配置)
手動配置後,我們有各種選擇,下圖有詳細說明:
選好之後“下一步”,出現再配置的步驟。
1.第一個選項,預設是雜湊模式,若選上就是歷史模式。(預設就行)
2.第二個選項,選擇CSS前處理器,注意Sass有坑,node-sass會被“牆”,Stylus寫起來比較不適應(習慣python的可以嘗試),用less沒有問題。
3.第三個選項,是選擇ESlint的模式,這裡選擇標準配置就行。
後邊的不管,如圖:
點選“建立專案”,會出現一個預設儲存,看自己心情咯!
完事建立專案,需要等待若干分鐘......
若干分鐘後,出現此頁面就建立成功了。
2.啟動專案:
現在關掉瀏覽器,用vscode開啟專案,會出現如圖專案結構:
我們開啟終端,在當前目錄下輸入:
npm run serve
這樣,一個Vue-cli專案就構建好了!
按住“ctrl”,點選http://localhost:8080/。
3.補充:
每次都得手動點選連結去開啟網頁,很不方便,這裡我們可以手動配置下,讓專案啟動時自動開啟瀏覽器。
首先在根目錄下建立vue.config.js。(名字要一模一樣)
在這個檔案中加入以下程式碼:(表示自己啟動)
module.exports = { devServer: { open: true } }
再重新開啟專案,就達到了我們想要的效果。
4.擴充套件:
關於開發環境和生產環境。
一般在開發當中,程式會在記憶體中去執行的環境叫做開發環境。指令是“npm run serve”。
一般在專案完成時,我們的專案會進行打包壓縮合並等操作,最終出來一個目錄/dist。這個/dist檔案可以直接拉到伺服器上進行上線部署,這就叫做生產環境。指令是“npm run build”。
結語:
本文介紹的流程較為簡單,還有許多細節沒有說到,這就需要我們在實踐中探索了。
對於流程性問題,更多在於熟練,再慢慢深入Vue的原理,這樣學習Vue這個框架才能達到事半功倍的效果。