如何使用webpack新建項目（以vue為例）

寫在開始的閑言碎語：

這是學vue時自己的筆記，傳上來留著方便自己查找

然而，作為我的第一篇blog，它也太不正經了點……

算了，『好的開始』是成功的一半，那 『開始』 好歹也是成功的四分之一對吧，沒毛病

第二篇，我一定好好寫……馬上，不會太遠的！

初始化等準備工作

1.安裝 node nginx git相關軟體

2.測試開發環境 打開終端

node -v

npm -v

檢測埠 netstat -aon|findstr "80" （非必需）

3.安裝vue淘寶鏡像 （之後可用cnpm代替npm）

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

4.安裝webpack

npm install webpack -g

5.安裝vue腳手架

npm install vue-cli -g

開始項目創建 （必須項為斜體加下劃線）

• 根據模板創建項目

vue init webpack 項目名字<項目名字不能用中文>

• 會有一些初始化的設置，如下輸入:

Target directory exists. Continue? (Y/n) 直接回車默認

Project name (vue-test) 直接回車默認

Project description (A Vue.js project) 直接回車默認

Author 直接回車默認

Use ESLint to lint your code? n （語法檢查，可不需要）

pick an eslint preset. 默認Standard

setup unit tests with karma + mocha?No(單元測試需要)

setup e2e tests with Nightwatch?No(單元測試需要)

• 進入項目 打開終端

cd 項目名字

• 安裝項目依賴 （網速較慢可用cnpm i）

npm install

（npm install 是根據package.json配置文件進行項目所需要的依賴安裝，當項目需要使用新插件時要添加配置並重新install）

• 項目要用路由時需安裝

（安裝 vue 路由模塊vue-router和網路請求模塊vue-resource –save-dev 是你開發時候依賴的東西，–save 是你發布之後還依賴的東西

npm install vue-router vue-resource –-save-dev）

• 啟動項目

npm run dev

• 發布項目

npm run build