vue项目搭建+springboot项目搭建 同目录

vue搭建

下载nodejs

安装的选择add to path

 

创建一个文件夹

cmd命令

查看nodejs版本

node -v

查看npm版本

npm -v

安装cli

npm install -g @vue/cli

创建项目

vue create vue-demo

选择版本

选择路由，分为哈希和history 选择history

输入提示的两行命令

可以按tab补全 

创建完成可以根据地址访问

 ctrl+c 可关闭

idea打开项目

如果在左侧

设置到右侧

运行

运行后想自动打开浏览器

在 package.json里的 vue-cli-service serve 后加上--open

目录结构

public 提供的界面 把vue编译后通过界面显示

assets 存放静态资源 图片 css js

components 存放组件 vue文件

router 路由   路径跟页面进行映射

store 定义页面的变量  登录信息 或者页面跳转携带参数 存放变量

views 存放页面 vue文件 

package.json定义项目依赖  

安装elementui

main.js导入elementui 

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import '@/assets/css/style.css'
import ElementPlus from 'element-plus';//elementui
import 'element-plus/lib/theme-chalk/index.css';//elementui
import 'dayjs/locale/zh-cn'//国际化中文
import locale from 'element-plus/lib/locale/lang/zh-cn'//国际化中文

createApp(App).use(store).use(router).use(ElementPlus,{ locale }).mount('#app')

安装axios：

先cd到你的vue目录下，然后install安装

cd vuefont

npm i axios -s

 

springboot搭建

链接：

https://start.spring.io/

下载后zip保留

再vue里创建子项目

把src和pom文件替换成刚生成的zip里的文件

新建vuefont整理下目录 移动至vuefont里

配置后台 application.properties