使用vue腳手架工具搭建vue-webpack項目

對於Vue.js來講，若是你想要快速開始，那麼只須要在你的html中引入一個<script>標籤，加上CDN的地址便可。可是，這並不算是一個完整的vue實際應用。在實際應用中，咱們必需要一系列的工具，包括：模塊化，轉譯，預處理，熱加載，靜態檢測和自動化測試等。對於一個須要長期維護和大型的項目而言，這些工具是必不可少的，可是嘗試配置初始化這些很痛苦.這就是咱們發佈vue官方提供的腳手架工具的緣由，一個簡單的構建工具，經過幾個默認的步驟幫助你快速的構建Vue.js項目。

 

1.安裝node環境

可使用自帶的終端cmd命令行工具；windows下推薦安裝git bash，可使用linux命令；

第一步檢測是否安裝node；沒有安裝node的同窗請到官網下載安裝 https://nodejs.org/en/download/

安裝成功後在命令行查看node版本，若是有說明安裝成功。

 

2.安裝vue腳手架工具vue-cli

你們在安裝node的時候，會自動安裝npm；

能夠先行查看npm版本；

使用npm安裝vue-cli：

1	npm install vue-cli -g

 

3.準備工做已經完畢，下面直接使用vue-cli初始化webpack項目；

vue init webpack yourprojectname(項目名)

中間會輸入項目名稱，項目描述，做者等信息；

一路回車

能夠看到咱們剛纔建立的webpack項目已經建好了：

 

4.查看目錄結構

安裝依賴

1	$ npm install

 國內有些包npm沒法安裝，可使用cnpm安裝

1	$ cnpm install

 

5.啓動本地開發

1	npm run dev

　　

 

 本地node服務器已經跑起來了，端口爲配置文件中的端口

 

 

 6.配置路由

建立新的頁面組件，將路由指向該.vue 文件

 

 到此，使用vue-cli建立的vue項目基本能夠上手開發了，恭喜！

 

 7.打包上線

1	$ npm run build

　

看到build complete，證實打包成功；

觀察目錄結構，發現多了一個dist文件夾，這即是webpack打包後的文件，將改文件和後臺商量，以什麼形式放到服務器便可，上線成功。

啦啦啦~ 至此，咱們vue項目算是初步跑起來了，後續會詳解webpack配置，以及本地mock數據開發等文章，歡迎你們批評指正！