Vue入坑——vue-cli（腳手架）搭建

一塊兒學vue——vue學習總路線

——————————^~^我是萌萌噠分割線^~^————————————————

語法學了，如今就該實操了。

安裝個腳手架試試。

1、安裝環境

（1）、安裝node

先從node.js官方下載，安裝過程很簡單，這裏就不贅述了（傻瓜式安裝）

    安裝完成後，用命令行輸入：node -v，顯示版本號，就說明安裝成功

安裝好node之後就自帶npm安裝包管理工具了，npm的服務器是國外的，所以會很慢，也許對後面的操做產生影響，所以在這裏安裝淘寶鏡像：

輸入：

npm install -g cnpm --registry=https://registry.npm.taobao.org

安裝完以後，輸入：cnpm -v，顯示版本號則安裝成功

（2）、安裝webpack

輸入：

npm install webpack -g

這裏的-g是全局安裝的意思，若是不想全局安裝能夠不要

安裝好後，仍是查看一下版本號以確認是否安裝成功：webpack -v

（3）、安裝vue-cli腳手架：

輸入：

npm install vue-cli -g

安裝完後輸入：vue -V（V是大寫哦！）

2、構建項目

經過以上步驟，環境咱們都搭建好了，如今開始構建咱們的項目

一、在你想要建項目的目錄下，打開命令行，若是安裝了git，可使用git bash here

二、輸入：vue init webpack vueclipractice

這裏的vueclipractice是項目名稱，本身隨便起，可是不能用中文哈

好啦，項目建立好了，看看剛剛新建的那個項目是否是存在了

三、進入項目，安裝依賴

npm install 

四、安裝vue路由模塊和網絡請求模塊

cnpm install vue-router vue-resource --save

好了，如今就弄完了，看看目錄長什麼樣

五、我用編譯器打開，解釋一下各個目錄各個文件都是幹嗎使得。

六、啓動項目

輸入：

npm run dev

成功後顯示下圖

在瀏覽器輸入localhost:8080

注意：8080端口不要被佔用

好啦，到此爲止vue-cli就搭建好了。下一步就能夠來認識一下vue-cli的項目結構

——————————^~^我是萌萌噠分割線^~^————————————————

                                                                                        下一篇：認識vue-cli的項目目錄結構