欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Intellij集成Vue开发环境

程序员文章站 2024-02-02 23:44:34
...

安装node环境

下载:https://nodejs.org/zh-cn/
可以通过 node -v (npm -v)查看当前版本,通过 where node (where npm)查看安装路径。
Intellij集成Vue开发环境

安装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集成Vue开发环境

如果想在Intellij IDEA的Terminal中构建vue-cli项目,还需要做一点准备。如果使用cmd构建,则跳过此步骤。

安装vue.js

File -> Settings -> Plugins -> Browse respositoties…
搜索vue.js,右侧提示Install(截图时已安装,未安装会提示Install)。安装成功后需要重启IDEA。
Intellij集成Vue开发环境

File Types: HTML 添加 *.vue类型

File -> Settings -> Editor -> File Types -> HTML
点Registered Patterns下的+,添加 *.vue
Intellij集成Vue开发环境

设置ECMAScript6

File -> Settings -> Language & Frameworks -> JavaScript
选择 ECMAScript 6
Intellij集成Vue开发环境

设置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

Intellij集成Vue开发环境

使用:
Intellij集成Vue开发环境

构建及运行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即可。
    Intellij集成Vue开发环境 如果选Yes, use NPM,构建出来的项目,可以直接运行。进入项目所在目录,执行npm run dev,执行完看到以下提示:
    Your application is running here: http://localhost:8080
    在浏览器打开http://localhost:8080,看到这个页面,接下来就可以开始开发了。

使用Intellij

运行

Intellij集成Vue开发环境

打包

Intellij集成Vue开发环境
build成功后会生成dist这个文件夹,就是打包后的。直接将这个文件夹放到服务器下就可以进行访问了。

运行
Intellij集成Vue开发环境
进入dist目录,点击index.html,通过浏览器运行,出现以下报错,如图:
Intellij集成Vue开发环境 解决办法:
打开index.js文件,其中dev是开发环境,build是构建版本,找到build下面的assetsPublicPath: ‘/’,然后修改为assetsPublicPath: ‘./’,即在“/”前加一个英文的点。
Intellij集成Vue开发环境
重新运行,再次打开index.html就可看到结果。