vue-cli入門

這也僅僅是入門而已了☺

本身也在慢慢學習中，不對的地方但願大佬能夠多多指教，請不吝賜教，感激涕零。

 

這章主要是搭建環境：

一、安裝node環境

從官網下載並安裝node，傻瓜操做，安裝完成以後，命令行工具輸入 node -v ，出現相應的版本號則說明安裝成功； npm包管理器是集成在node中的，因此直接輸入 npm -v 就會顯示npm的版本信息；

二、安裝cnpm

因爲有些npm有些資源被屏蔽或者是國外資源的緣由，常常會致使用npm安裝依賴包的時候失敗 ，可選擇安裝npm的國內鏡像 cnpm

 如下命令：

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

三、安裝vue-cli腳手架構建工具

 npm install -g vue-cli

 以上須要的環境和工具都準備好了，接下來使用vue-cli來構建項目

四、用vue-cli構建項目

先選定目錄，建立文件夾，進入文件根目錄，命令行安裝vue-cli

vue init webpack firstVue 　

初始化一個項目，webpack是構建工具，也就是說整個項目是基於webpack的，其中 firstVue是項目名稱，

回車填寫相應的項目名稱，描述，做者等信息，不想寫能夠直接回車默認信息；

目錄結構以下：

 

主要在src中作一些修改；

五、安裝項目所須要的依賴

npm install 

安裝成功以後會有一個node_modules文件夾，這裏邊就是咱們項目須要的依賴包資源，這裏就不附圖了啊哈哈

 六、運行項目 

npm run dev 

用熱加載的方式運行咱們的應用，熱加載可讓咱們在修改完代碼後不用手動刷新瀏覽器就能實時看到修改後的效果 其中的「run」對應的是package.json文件中，scripts字段中的dev，也就是 node build/dev-server.js命令的一個快捷方式。 項目運行成功後，瀏覽器會自動打開localhost:8080（若是瀏覽器沒有自動打開，能夠手動輸入）。運行成功後，會看到以下所示的界面。

 

 

 

---

 

以上，ending暫告一段落，下一章會簡單寫一個項目。蟹蟹