前后端分离项目

springBoot——Vue

需要的环境：

  • IDEA代码开发环境，自行根据喜好即可
  • 安装node（会集成npm，所以只安装node即可，npm切换为淘宝镜像源）
  • jdk1.8+
  • vue-cli 4.0+
    以上皆可百度安装，属于基础的，本文不予教学。

首先创建Vue前端模板框架在项目中

1

新建文件夹spring-vue-first存放前后端项目代码

目录：D:\JAVA\IDEA\IDEAProjects\spring-vue-first

查看vue-cli版本vue -V，没有安装的用下面命令安装：
npm i -g @vue/cli

用cli命令创建vue文件夹存放前端模板，注意下面安装的位置是在你的项目下

2

选择最后一行Manually select features

3

选择两个一个是babel，一个是router，上下键是移动光标，空格键选择

4

然后回车键后选择vue2.0就行

然后提示确定否，直接键入y，然后回车，在选择最后一项In package.json

5

回车后提示输入确定否，此处可以选择不保存此种创建vue方案，所以直接键入n回车

6

之后出现上图就代表vue项目正在创建，有点慢，可以自行设置淘宝镜像源加速创建。

如下图，wait a minute即可完成创建：

7

查看文件夹项目结构：

8

之后就可以用IDEA直接打开spring-vue-first里的vue这个项目了，注意，是打开vue这个前端项目

9

由于使用到elementUI所以前往命令行安装element

npm i element-ui -S

10

然后就可以运行了：

npm run serve

11

element整合vue具体上手请前往官网–>https://element.eleme.cn/#/zh-CN/component/quickstart
又水了一篇文章/。/。/。\

# vue.js # spring # 前端
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue