IDEA+VUE+WEBPACK+VUE-CLI專案搭建 目錄 圖1-1 1）安裝node.js
備註：檢驗是否安裝成功，在cmd輸入命令 node -v,回車 及 npm -v,回車，如出現下圖所示版本資訊，表示安裝成功
圖1-1 1.1 npm全域性環境變數配置 配置npm的全域性模組的存放路徑以及cache的路徑，例如我希望將以上兩個資料夾放在NodeJS的主目錄下，便在NodeJs下建立”node_global”及”node_cache”兩個資料夾。在CMD中輸入如下命令，分別按回車執行： npm config set prefix "D:\Program Files\nodejs\node_global" 以及 npm config set cache "D:\Program Files\nodejs\node_cache" 執行後會建立兩個資料夾，如下圖所示
1.2 增加NOEDE_PATH(全域性變數模組存放位置)（步驟圖1-1正常，這步跳過） 開啟系統對話方塊，“我的電腦”右鍵“屬性”-“高階系統設定”-“高階”-“環境變數”。如下圖
進入環境變數對話方塊，在系統變數下新建”NODE_PATH”，輸入”D:\Program Files\nodejs\node_global\node_modules”。（ps：這一步相當關鍵。） 由於改變了module的預設地址，所以上面的使用者變數都要跟著改變一下（使用者變數”PATH”修改為“D:\Program Files\nodejs\node_global\”），要不使用module的時候會導致輸入命令出現“xxx不是內部或外部命令，也不是可執行的程式或批處理檔案”這個錯誤。 2) IDEA安裝Vue.js 步驟：file--->settings---->plugins--->Browse repositories...--->manage repositories --->單擊右上角的 + 號，把 下列地址複製進去 單擊Ok,然後重新搜尋就會發現這個外掛，就可以線上安裝，重啟IDEA即可。 備註：vue-for-idea外掛已下架 3）IDEA必要設定 3.1） File Types: HTML 新增 *.vue型別
3.2） JavScript：版本設定為 ECMAScript6, [x] Prefer Strict mode
3.3）對原始配色不滿的話，可以考慮安裝 Plugin - Material Theme UI
4）安裝VUE-CLI 開啟cmd命令列工具，輸入npm install -g vue-cli,回車 全域性安裝vue-cli 注：npm會有點慢，建議更改為國內淘寶的映象，只換源即可。在cmd輸入命令： 備註：我採用第一種方式全域性安裝，大概1分鐘不到就安裝好了
同時在C:\Users\Administrator\AppData\Roaming\npm目錄下生成以下檔案
5）構建vue-cli專案 5.1 建立專案 開啟cmd，進入想要建立專案的目錄下，輸入：vue init webpack projectname webpack預設是安裝2.0版本，若要安裝1.0版本，需在webpack後面加上版本號資訊， vue init webpack#1.0 project-name(安裝1.0版本) projextname是自定義的專案名稱，例：我這裡命名為vuedemo Project name:——專案名稱 Project description:——專案描述 Author:——作者 Vue build:——構建模式，一般預設選擇第一種 Install vue-router?:——是否安裝引入vue-router，這裡選是，vue-router是路由元件,後面構建專案會用到 Use ESLint to lint your code?:——這裡強烈建議選no 否則你會非常痛苦，eslint的格式驗證非常嚴格，多一個空格少一個空格都會報錯，所以對於新手來說，一般不建議開啟，會加大開發難度 Setup unit tests with Karma + Mocha 以及Setup e2e tests with Nightwatch這兩個是測試，可以不用安裝 5.2 專案安裝npm依賴 開啟cmd，進入專案所在根目錄，輸入npm install回車進行安裝，如下所示： cd 專案名稱npm install
5.3 啟動服務測試（採用該方式，跳過步驟7） 開啟cmd，進入專案所在根目錄，輸入npm run dev

6）專案目錄結構介紹
.babelrc babel配置檔案，把我們ES2105的程式碼通過它編譯成ES5的。  .editorconfig 編輯器配置  .eslintignore 忽略語法檢查的目錄檔案配置  .eslintrc.js eslint的配置檔案  .gitignore 配置Git倉庫的忽略  index.html 專案入口模板檔案  package.json node配置檔案 7）IDEA配置NPM服務