ntellij IDEA搭建vue-cli專案
https://blog.csdn.net/sinat_21184471/article/details/80114781
1、安裝/升級node環境
vue-cli對於node和npm的版本是有要求的。
可以通過 node -v （npm -v）檢視當前版本，通過 where node （where npm）檢視安裝路徑。
如果node版本不符合vue-cli的要求，那麼可以在node官網下載穩定版本並安裝。
安裝過程比較簡單，我更新時，除了修改安裝路徑，其他都是一直Next即可。
這裡要提到一點，更新node版本後，檢視版本，會發現npm的版本也已經更新了。
2、安裝vue-cli
全域性安裝vue-cli，在命令列中執行npm install -g vue-cli
你可以在cmd開啟命令列工具，也可以在Intellij IDEA的Terminal處執行。
3、Intellij IDEA準備
如果你想在Intellij IDEA的Terminal中構建vue-cli專案，還需要做一點準備。如果使用cmd構建，則跳過此步驟。
1）安裝vue.js
File -> Settings ->Plugins ->Browse respositoties...
搜尋vue.js，右側提示Install（截圖時已安裝，未安裝會提示Install）。安裝成功後需要重啟IDEA。
2）File Types: HTML 新增 *.vue型別
File -> Settings->Editor ->File Types -> HTML
點Registered Patterns下的+，新增 *.vue
3）設定JS
File -> Settings-> Language & Frameworks ->JavaScript
選擇 ECMAScript 6 和 Prefer Strict mode
4、構建及執行vue-cli專案
在命令列工具cmd，或者Intellij IDEA的Terminal中進入想要構建專案的目錄，輸入vue init webpack project-name，回車
webpack預設版本為2.0，若要指定1.0，需在webpack後加上#1.0，即vue init webpack#1.0 project-name
接下來會出現幾個提示，分別是輸入專案名稱、描述、作者等，按實際情況選擇即可。
？Project name ---- 專案名稱，init命令時也填了個project-name，如果無需更改，直接回車即可；
？Project description ---- 專案描述，按需填寫。無需填寫可以直接回車；
？Author ---- 作者
？Vue build ---- 構建模式，一般預設第一個；
？Install vue-router? ---- 是否安裝vue-router。選Y。後邊構建專案會用到。
？Use ESLint to lint yout code? ---- 格式校驗，按需；
？Set up unit tests---- 測試相關，按需；
？Setup e2e tests with Nightwatch?---- 測試相關，按需；
？Should we run ‘npm install’ for you after the project has been created?---- 按需，這裡我選Yes, use NPM。如果選No，後續自己在目標
目錄下執行npm install即可。
這樣構建出來的專案，可以直接執行。進入專案所在目錄，執行npm run dev，執行完看到以下提示：
Your application is running here: http://localhost:8080
在瀏覽器開啟http://localhost:8080，看到這個頁面，接下來就可以開始開發了。
5、Intellij IDEA新建.vue格式檔案
在開發的時候，會發現新建檔案時並沒有.vue格式檔案的選擇，這時我們需要做一些設定。
File -> Settings-> Editor ->File and Code Templates -> +
模板內容可以按需。可以填也可以不填
<template>
<div> {{msg}}</div>
</template>
<style></style>
<script>
export default{ data () { return {msg: 'vue模板頁'} } }
</script>
設定完成後，就能新建.vue格式的檔案了。：）
遇到的錯誤
使用cross-env解決跨平臺設定NODE_ENV的問題
在搭建公司新的前端工程的架構中，需要在在package.json的scripts標籤下配置一系列命令，如下所示：
- "scripts": {
- "clear": "rm -rf build&& mkdir build",
- "start": "npm run clear&& NODE_ENV=development webpack-dev-server --host 0.0.0.0 --devtool eval --progress --color --profile",
- "deploy": "npm run pre&& npm run clear&& NODE_ENV=production webpack -p --progress"
- },
-
上面配置中的的
&&最開始使用的是;，後來發現;在windows環境中無法正常執行，於是改成了*unix和windows都相容的&&。但是公司的部分使用windows的同事在執行npm start的時候，依然會報錯：
解決方式
功夫不負有心人，在萬能的google上，我找到了解決方法：cross-env。
這個迷你的包能夠提供一個設定環境變數的scripts，讓你能夠以unix方式設定環境變數，然後在windows上也能相容執行。
使用方法：
- 安裝cross-env:
npm install cross-env --save-dev - 在
NODE_ENV=xxxxxxx前面新增cross-env就可以了
2、npm run dev 報錯：missing script:dev
報錯原因
package.json 裡面沒有 “scripts”: {“dev”: “xxx”} 這段了。
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"3、error [email protected] dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
解決：原因是因為你的node_modules有意外改動，導致依賴庫不完整。
刪除專案下的node_modules，在你的專案目錄下，重新執行npm install，這會重新生成node_modules，
執行npm run build ,
npm run dev.