一,使用vue的控制台创建vue3项目

1,首先使用vue的控制台创建基础的vue框架

①win+r 唤出控制台,输入cmd

idea community 怎么支持vue idea开发vue设置_导航栏

②在控制台中输入 vue ui

idea community 怎么支持vue idea开发vue设置_java_02

③弹出一个网页窗口,在弹出的窗口中点击下面这个地方

idea community 怎么支持vue idea开发vue设置_java_03

④选择你要存放的地址,点击再次创建项目

idea community 怎么支持vue idea开发vue设置_java_04

⑥输入项目文件夹名称,取消勾选初始化git仓库,点击下一步

idea community 怎么支持vue idea开发vue设置_vue_05

⑦选择手动,点击下一步

idea community 怎么支持vue idea开发vue设置_vue_06

⑧两勾选一取消,点击下一步

这是原本界面:

idea community 怎么支持vue idea开发vue设置_导航栏_07


入下图这样两勾选一取消:

idea community 怎么支持vue idea开发vue设置_1024程序员节_08

⑨选择vue版本,我这里选择vue3,勾选上下面这条选择开启历史记录

idea community 怎么支持vue idea开发vue设置_java_09

⑩可以选择保存预设,下次直接选择预设方案创建,就不用每次手动创建了,也可不保存预设

idea community 怎么支持vue idea开发vue设置_1024程序员节_10

2,使用idea操作vue项目

①打开idea,选择file导航栏,选择open子导航栏

idea community 怎么支持vue idea开发vue设置_导航栏_11

②选择刚才创建的vue项目的文件夹点击ok打开

idea community 怎么支持vue idea开发vue设置_导航栏_12

③可以点击new window 打开一个新的窗口

idea community 怎么支持vue idea开发vue设置_intellij-idea_13

④点击terminal控制台,根据界面上的提示,在控制台中输入npm run serve运行此项目

idea community 怎么支持vue idea开发vue设置_导航栏_14


当然也可以选择另一种运行方式:

将导航栏显示出来

idea community 怎么支持vue idea开发vue设置_导航栏_15


点击添加配置

idea community 怎么支持vue idea开发vue设置_1024程序员节_16


点击➕,选择npm

idea community 怎么支持vue idea开发vue设置_1024程序员节_17


输入serve,点击apply应用,点击ok确定

idea community 怎么支持vue idea开发vue设置_java_18

然后就可以在导航栏运行

idea community 怎么支持vue idea开发vue设置_java_19

3,其他的一些细节

①,如果你使用前后端分离的方式开发,你的后端启动类一般需要解决跨域问题

跨域问题:在控制层Controller类上加注解@CrossOrigin解决

②,还有就是你的前端和后端同时启动有可能会出现端口后被占用的情况

spring boot项目需要去yml配置文件中添加如下代码修改端口号

server:
  port: 8082

前端vue代码的话需要再package.json这个配置文件中修改,将如下代码修改:

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },

在serve后台添加 (–port 端口号) , 修改为:

"scripts": {
    "serve": "vue-cli-service serve --port 端口号 ",
    "build": "vue-cli-service build"
  },

然后就可以修改前端的端口号了