Intellij集成Vue開發環境

安裝node環境

下載：https://nodejs.org/zh-cn/
可以通過 node -v （npm -v）查看當前版本，通過 where node （where npm）查看安裝路徑。

安裝vue-cli

全局安裝vue-cli：

命令npm install -g vue-cli

接下來就可以在cmd中打開命令行工具，也可以在Intellij IDEA的Terminal處執行。

Intellij IDEA集成Vue環境

配置啓用 npm 等命令

要想能夠在Terminal中啓動命令
IDEA中File ----->Setting-------->Tools 展開 Terminal 配置cmd命令
路徑 ：C:\Windows\System32\cmd.exe

如果想在Intellij IDEA的Terminal中構建vue-cli項目，還需要做一點準備。如果使用cmd構建，則跳過此步驟。

安裝vue.js

File -> Settings -> Plugins -> Browse respositoties…
搜索vue.js，右側提示Install（截圖時已安裝，未安裝會提示Install）。安裝成功後需要重啓IDEA。

File Types: HTML 添加 *.vue類型

File -> Settings -> Editor -> File Types -> HTML
點Registered Patterns下的+，添加 *.vue

設置ECMAScript6

File -> Settings -> Language & Frameworks -> JavaScript
選擇 ECMAScript 6

設置vue語法提示

File->setting->Editor->Inspections，右側找到HTML->Unknown HTML tag attribute，在右邊Options->Custom HTML tag attributes裏面添加如下代碼:

@tap
@tap.stop
@tap.prevent
@tap.once
@click
@click.stop
@click.prevent
@click.once
@change
@change.lazy
@change.number
@change.trim
@on
@blur
@fous
@submit
scoped
v-model
v-model.number
v-model.trim
v-for
v-text
v-html
v-show
v-if
v-else-if
v-else
v-pre
v-bind
v-bind:class
v-bind:style
v-bind:id
v-bind:href

使用：

構建及運行vue-cli項目

創建新的Vue.js應用程序的推薦方法是使用vue-cli，這是一個用於搭建Vue.js應用程序的官方工具。如果使用Vue CLI版本2創建應用程序，則可以選擇6個默認項目模板中的一個 ，然後回答有關在開發中使用的其他工具（如linters和test runner）的一些問題。
當然，也可以創建一個空的IntelliJ IDEA項目並在其中安裝Vue.js。

使用命令行工具

在命令行工具cmd，輸入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? ----如果選No，後續自己在目標目錄下執行npm install即可。
  如果選Yes, use NPM，構建出來的項目，可以直接運行。進入項目所在目錄，執行npm run dev，執行完看到以下提示：
  Your application is running here: http://localhost:8080
  在瀏覽器打開http://localhost:8080，看到這個頁面，接下來就可以開始開發了。

使用Intellij

運行

打包

build成功後會生成dist這個文件夾，就是打包後的。直接將這個文件夾放到服務器下就可以進行訪問了。

運行

進入dist目錄，點擊index.html，通過瀏覽器運行，出現以下報錯，如圖：
解決辦法：
打開index.js文件，其中dev是開發環境，build是構建版本，找到build下面的assetsPublicPath: ‘/’，然後修改爲assetsPublicPath: ‘./’，即在“/”前加一個英文的點。

重新運行，再次打開index.html就可看到結果。