VUE初體驗篇-安裝

現代前端框架大行其道，講前端思想從操做dom的階段，升級到操做數據的階段。vue做爲三大前端框架之一，其中平緩的學習曲線，讓好多前端新手很是喜歡，應用也愈來愈普遍。雖然其餘兩個框架有facebook，和google撐腰，可是vue已然是不可小覷的對手了。不管你去作前端面試仍是公司新項目技術選型，vue必定不會跑出大家的備選名單。下面簡單講講作vue開發第一部，安裝！

 

安裝nodejs

 

vue依託nodejs，因此首先要安裝nodejs，官網直接百度

 

點擊下載連接，其中LTS或者 Current版。因爲我電腦是window，我這邊步驟就是直接下載好以後，點擊安裝，一路下一步下一步，就安裝完了。

 

打開cmd，輸入命令， node -v。正常出現版本號，說明你已經安裝成功了。

 

小知識：LTS版本是按期更新的穩定版本，是按照時間維度來發布的版本。Current屬於嚐鮮版。

 

npm說明

 

npm是Node Package Manager。node的包管理工具，使用node以後你會接觸各類各樣成千上萬的Package（包），就須要一個管理工具能很好的解決它的安裝，更新，依賴包安裝等等的維護。默認安裝完node以後，npm會自動安裝上的。仍是cmd，輸入命令 npm -V 。正常出現版本號，就能夠了。

 

vue安裝

 

有了npm以後，vue只是萬千包中的一個，後續使用命令就不在贅述

 

npm install vue

 

等待安裝結束就行了，是否是很簡單

 

提示：大部分安裝都會指導使用國內的taobao的cnpm，用過幾回以後速度雖然提高很多，可是不知道什麼緣由，老是容易出現奇怪的相似依賴裝不上之類的問題。直接用npm雖然沒有刷刷的，可是隻要不是特別多包，正常的等個三五分鐘仍是能夠接受的。

 

vue-cli腳手架工具

 

官方提供方便的項目搭建工具，vue-cli。最開始進公司的時候，同事一說什麼腳手架，我說啥玩意兒啊，其實就是搭建工具。去工地蓋房子先要搭建 腳手架 才能開始幹活嘛。vue-cli能夠很方便的講不少基礎性的東西都搭建好，知足絕大部分項目需求。命令：

 

npminstall -g @vue/cli

 

官方最新版本3.0的腳手架還提供了圖形界面，用起來簡直不要太爽啊！

 

直接使用命令啓動圖形界面：vue ui

 

這裏吐槽下我用的項目的腳手架是公司專門請什麼高人作的腳手架，報錯一大篇，不知道什麼鬼。

 

項目搭建

 

至於在圖形界面下如何搭建，就鼠標點點點就搭建完了。步驟圖見下圖

 

安裝完啓動

 

上面安裝界面也都很快的。安裝完以後能夠很清晰的看到配置文件：

 

大功告成了

 

好了，到這裏就啓動完畢了。能夠對照官網瞭解修改下里面的東西試試。原本向講的簡單點兒，又囉嗦了！