使用vue-cli腳手架+webpack搭建vue項目

前言

世間萬難 無非一拖二懶三不讀書 對 說的就是我

忽然以爲這句話說的很對，自從上次寫完nodejs安裝及npm全局模塊路徑的設置已通過去兩月有餘，而個人vue框架學習也就止步於此。仍是沒有給本身施加壓力，渾渾噩噩的又度過了這麼長時間，想一想就很愧疚。(實際上是懶癌患者)或許本身仍是個少年吧，比較彷徨。

學習真的是本身的事，本身不想學，自制力不夠，半點不禁人。畢竟學無止境，並且技術的更新速度又很是快，應當時刻保持敬畏之心。固然也不是一件事沒作，最近在看《JavaScript設計模式》(張容銘著)一書，收穫頗多。對於JavaScript的面向對象有了更深的看法，對原型及原型鏈，以及對象的封裝、繼承、多態有了新的認識。但今天的重點不在於此，只是想經過寫文章記錄下本身在vue框架學習上的積累。

首先安裝node.js並設置其環境變量

這裏我就很少說了，畢竟上篇文章已經寫的很清楚了。請戳：nodejs安裝及npm全局模塊路徑的設置，安裝設置完成後，爲了驗證安裝是否正確，請window+r，輸入cmd，快捷打開cmd控制檯後，在命令行輸入如下內容：

// 查看node安裝是否正常
node -v 
// 回車後看到輸出當前安裝node的版本號，例如：v8.11.1，即安裝正常

因爲目前nodejs中已經集成了npm，因此咱們在命令行輸入如下內容，就可查看npm是否安裝。

// 查看npm安裝是否正常
npm -v 
// 回車後看到輸出當前安裝npm的版本號，例如：5.6.0，即安裝正常

經過以上步聚，說明已經安裝完nodejs並能正常運行。

其次安裝vue、vue-cli腳手架和webpack打包工具

第一步已經安裝完node及npm包管理工具，接下來就很好辦了，直接在cmd命令行中輸入：

1.安裝vue

// 下載安裝vue
npm install vue -g （-g表示安裝全局模塊的意思）

2.安裝vue-cli

// 下載安裝vue-cli腳手架
npm install vue-cli -g （-g表示安裝全局模塊的意思）

3.安裝webpack

// 下載安裝webpack打包工具
npm install webpack -g （-g表示安裝全局模塊的意思）

至此，以上三行命令表示將vue、vue-cli、webpack三個模塊安裝到了npm包管理工具設置後的全局路徑中。

再次用vue-cli腳手架搭建vue項目

第二步將vue、vue-cli、webpack模塊安裝完成後，就可使用如下命令建立vue項目了。

// vue init <template-name> [project-name]
vue init webpack vue-web

// 回車後有如下內容須要填寫
Project name (vue-web)    // 項目名稱
Project description (this is my first vue project)     // 項目描述（能夠自行描述一段話）
Author (liwei)    // 項目做者
Vue build (standalone)    
Install vue-router? (Yes)    // 安裝vue路由
Use ESLint to lint your code? (Yes)   
Pick an ESLint preset (none)
Set up unit tests (No)    // 單元測試
Setup e2e tests with Nightwatch? (No)    // 單元測試
Should we run `npm install` for you after the project has been created? (recommended) (npm)

cmd命令行填寫完後直接回車就能夠建立項目名稱爲vue-web的項目了。

最後檢驗vue項目是否建立成功

首先在cmd命令行中先進入到vue項目所在的路徑下，而後輸入：

// 安裝package.json中的依賴
npm install 

// 運行項目
npm run dev
// 命令行顯示無異常，而後能夠在瀏覽器打開http:localhost:8080/#/查看結果

// 項目打包發佈
npm run build（暫時不作過多介紹）

小結

經過以上步聚，就能夠完成vue-cli配合webpack搭建vue項目的開發。固然，開發的過程當中存在很多要填的坑，其實每走一步，都是很成功的。

你必須不停地奔跑 才能留在原地

共勉。