快速構建VUE以及存在的坑

本文參考自VUE 的webpack安裝： 基於vue-cli快速構建Jinkey原創Vue2.0 新手徹底填坑攻略，gh254172840的博客

可是有些操做是不推薦的。因此就有了此文

首先是下載一個node.js安裝包。下載地址。點擊安裝，（我的用的是window8.1 64位系統，固然下載一個.msi格式的安裝包），雙擊安裝

點擊next進入下一步	勾選I accept the terms in the lincese agreement，點擊 next.
Node.js默認安裝目錄爲 "C:\Program Files\nodejs\" , 你能夠修改目錄，而後一路next	最後點install等他安裝完畢

而後安裝cnpm的淘寶鏡像。安裝以前建議參閱npm的安裝機制。由於某些緣由，咱們不能直接使用npm，而是用淘寶鏡像cnpm。

在鍵盤使用快捷鍵win+r，在彈出的窗口輸入cmd，進入命令提示符操做

 

在命令行輸入如下代碼：

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

若是你是最新版本會報錯：

npm WARN deprecated socks@1.1.10: If using 2.x branch, please upgrade to at least 2.1.6 to avoid a serious bug with socket data flow and an import issue introduced in 2.1.0

解決辦法：下降版本：

npm install npm@4.6.1 -g

而後安裝webpack和腳手架（一步步來）：

cnpm install webpack -g
cnpm install vue-cli -g

如今是重頭戲：全局環境已經配置好，如今開始搭建工程環境。

在硬盤上找一個文件夾放工程用的，在終端中進入該目錄（這就是cd命令）

cd 目錄路徑
或者
cd /d 目錄路徑

使用命令建立項目

vue init webpack 工程名字<工程名字不能用中文>

會有一些初始化的設置：

1.  Project name (liujy)                                這裏能夠直接回車
2.  Project description (A Vue.js project)     這裏也能夠直接回車，或者隨便填點
3.  Author                                                    本身名字，填英文，能夠直接回車
4.  Vue build                                                按鍵盤方向鍵選擇選項。推薦選擇 Runtime + Compiler: recommended for most users。
5.  Install vue-router? (Y/n)                         填y回車就好，用官方的路由
6.  Use ESLint to lint your code? (Y/n)        這個用來統一代碼風格的，這玩意有個坑，下面會提到。若是團隊項目沒有需求就填n不選，這玩意對新人很不友好，初學請不要選。
   坑請參見備註：ESLint的坑
7.  Set up unit tests (Y/n)                            是否添加單元測試， 沒有需求就填n
8.  Setup e2e tests with Nightwatch? (Y/n)  是否添j加e2e，沒有需求就填n
9.  Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)      按鍵盤方向鍵選擇選項。通常選擇 NPM

 而後等待安裝完畢。這個時候你已經有個初步的工程文件了。這個工程文件能夠上傳到git，svn上。接下來就要安裝項目依賴。項目依賴這東西層級太深，因此建議不要上傳到雲端。

cd 命令進入建立的工程目錄再安裝項目依賴（cd命令的介紹見上文）

此次是在項目裏面安裝而不是全局安裝npm、cnpm路由模塊以及網絡模塊，一步步來：

npm install
cnpm install
cnpm install vue-router vue-resource --save

若是遇到報錯請看備註： 路由的坑

到了這一步，你的工程環境已經配置到一半了。剩下的就是你須要安裝的其餘框架和插件，好比mint-ui框架，用於ajax操做的axios。這些須要你訪問官方文檔瞭解如何安裝。若是你這些都安裝好了，那麼就大功告成了。

最後一步，啓動項目：

npm run dev

如今一覽美景吧。

 

備註：

路由的坑：

裝npm的時候可能會報錯 npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):

npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.0.15: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

 這只是一個警告，由於該模塊與Windows不兼容。你能夠放心地忽略它。這是可選的。

 若是是這樣不斷的ERR：

 

 若是debug.log報錯This is probably not a problem with npm. There is likely additional logging那就是版本更新問題，運行 npm i -D webpack-dev-server@2.9.7就解決了

 若是是其它狀況，多是node_modules安裝問題，執行如下（參考文檔）：

rd /s /q node_modules
rd /s /q package-lock.json
npm cache clear --force
npm install

 沒有報錯，那麼可喜可賀進行下一步。若是你用的是老版本的 vue-cli 還可能報其餘錯誤，須要更新一下 vue-cli：

npm update vue-cli

 ESLint的坑：關於ESLint，由於ESLint用來管理代碼風格，因此當代碼的格式不規範的時候就會出現以下報錯：（包括traling space noy allowed等等問題。）

ESLint只會報錯不影響運行，因此你能夠無視掉，也能夠選擇不裝或者禁用。禁用的方法爲：找到build文件夾--->webpack.base.conf.js---->module，註釋掉包含 loader: 'eslint-loader' 的代碼塊或者引用它的方法。

詳見：在Vue中關閉Eslint 的方法

 關於vue的ajax操做，建議安裝axios：

npm install axios --save-dev

 開發APP建議安裝

npm install fastclick -D
npm install mint-ui -S

 

VUE init失敗最終解決方案