vue.js之vue-cli腳手架的搭建詳解

相比于主流的angular和react前端框架，vue在近年來也變得非?；馃?。他吸取了前兩者的優點，同時學習曲線也更加平緩。所以本魔王準備入坑了~~

首先從vue的腳手架搭建開始吧。

這里不得不吐槽，window相對mac和linux確實在軟件開發方面，非常不方便，代碼打包，環境搭建等，簡直爆炸~~..然而，嗯，本魔王就是在用win10，哎~

嘛，廢話不多說，今天的任務就是把腳手架搭好，雖然流程不麻煩，但是npm這個東東，真的可以一不小心就磨掉一下午的時間。這里無論用命令行工具，還是Git Bash，或者WebStrom里的Terminal工具，都是可以的。

（1）檢查node版本

在安裝vue的環境之前，安裝NodeJS環境是必須的?？梢允褂胣ode -v指令檢查，需要保證安裝了4.0版本以上的nodeJS環境。

當然，沒有安裝的話，去Node.js的官網下載一下，各種下一步，傻瓜式安裝就好，非常方便。

tips:這里說一下我自己踩過的一個坑，我最開始，安裝的是國外官網上最新的7.3.0的版本，然后再最后npm run dev的時候各種報錯。最后的解決方式是把node的版本回退到了6.2.0。所以這里推介大家安裝NodeJs 4~6之間的版本。

（2）安裝vue-cli

接下來進入正題，先全局安裝vue-cli。

使用指令

npm install -g vue-cli

接下來就是等等等~~畢竟npm真的很慢。如果發現在一個地方長期卡著不動，可以ctrl+c取消，然后再重新執行。

還有一種解決方式是使用淘寶的cnpm鏡像。

最后做完以后，使用vue 指令檢查一下是否安裝成功，如果成功則結果如下：

（3）初始化項目

先cd到自己想要創建新項目的文件夾下，然后使用vue init指令

vue init 模板類型 項目名稱

 vue的模板類型，有很多種，可以使用vue list 指令查看

我這里使用的是webpack模板，項目名叫sell，指令如下：

vue init webpack sell

然后可以一路回車下去，里邊的選項可以多數是用來確認項目名稱，作者，描述信息以及測試等內容，可以根據需求自己選擇。（這里sell是我的項目名）

接下來進入sell文件夾，運行npm install。會發現項目中多了一個叫node_modules的文件夾，目錄結構如下：

（4）運行vue環境

接下來使用 npm run dev命令運行項目環境，效果如下：

這里顯示了已經監聽了8080端口，接下來在瀏覽器訪問http://localhost:8080/

會看到如下頁面

證明項目已啟動，環境也是搭建成功啦~~

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。