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

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

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

在这里插入图片描述

②在控制台中输入 vue ui

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

⑦选择手动,点击下一步

在这里插入图片描述

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

这是原本界面:
在这里插入图片描述
入下图这样两勾选一取消:
在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

2,使用idea操作vue项目

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述
当然也可以选择另一种运行方式:
将导航栏显示出来
在这里插入图片描述
点击添加配置
在这里插入图片描述
点击➕,选择npm
在这里插入图片描述
输入serve,点击apply应用,点击ok确定
在这里插入图片描述

然后就可以在导航栏运行
在这里插入图片描述

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"
  },

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

Logo

前往低代码交流专区

更多推荐