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就可看到结果。