Windows使用IDEA建立VUE專案
-
環境搭建
1、安裝node.js和npm
nodejs的下載地址：https://nodejs.org/en/download/ ；
在Windows上安裝時選擇全部元件，勾選Add to Path；
安裝完後，請開啟命令提示符；
輸入node -v，如果安裝正常，可以看到版本號輸出：
npm是Node.js的包管理工具（package manager），Nodejs的安裝程式預設安裝npm，在命令提示符或者終端輸入npm -v，可以看到類似以下的輸出：
在cmd中直接使用npm來安裝的一些工具會比較慢，所以我們使用淘寶的npm映象：
輸入命令：npm i -g cnpm --registry=https://registry.npm.taobao.org，如果許可權不夠，請使用管理員執行命令提示符；
2、安裝vue-cli,vue腳手架
輸入命令：cnpm i -g vue-cli
測試安裝命令: vue –V
輸出：
表示安全成功；
-
安裝\建立專案
1、安裝專案：
先進入工作目錄；
使用腳手架安裝專案：
輸入命令：vue init webpack first_vue ;
提示：
-
Project name（工程名）:輸入工程名稱，回車
-
Project description（工程介紹）：輸入結束，回車
-
Author：輸入作者名稱，回車
-
Vue build:回車
-
Install vue-router：回車
-
Use ESLint to lint your code：n，回車
-
Set up unit tests（安裝測試工具）：n，回車
-
Setup e2e tests with Nightwatch（測試相關）：n，回車
-
Should we run `npm install` for you after the project has been created? (recommended)：N，回車
2、初始化專案
進入專案目錄；
輸入命令：cd firstVue；
輸入命令：cnpm i；
執行專案，輸入命令：cnpm run dev；
瀏覽器開啟：localhost:8080，即可開啟vue專案；
注意：Ctrl+C命令退出執行；
3、配置Idea
File - Settings - Languages&Frameworks – JavaScript:
修改JavaScript language version為ECMAScript 6；
File - Settings - Plugins：搜尋vue，安裝Vue.js
Run - Edit Configurations...：
點選加號，選擇npm，Name修改為Run，package.json選擇你工程中的package.json，Command修改為run，Scripts為dev
點選加號，選擇npm，Name為Build，package.json選擇你工程中的package.json，Command為run，Scripts為build；
以上就都安裝配置完成了，可以直接點【run】執行專案；
訪問測試頁：http://localhost:8080/#/
啟動報錯：npm 報錯 npm WARN lifecycle npm is using C:\Program Files\nodejs\node.exe but there is no node binary
解決辦法：執行如下命令npm config set scripts-prepend-node-path true