VUE+Springboot前后端分离项目开发01

首先下载node.js，其自带npm包进行工程创建和依赖管理

下载安装完成后在cmd中可以查看版本，安装命令行工具vue-cli插件来进行vue工程的创建

npm install -g @vue-cli

之后开始创建项目

vue create 项目名

回车进入

选择Manually select features

 勾选后进入Choose Vue version

 安装完成

 按照提示命令启动项目

CtrlC停止命令行操作，拖入IDEA打开

在IDEA中添加配置，选择npm

Scrpits为serve，注意选择创建的vue项目中的package.json

完成后在IDEA中启动项目

在Home.vue中写好Home

 当前主页为Home

在App.vue里定义项目的头部，侧边栏，主体。将头部和侧边栏放在组件里

简单写一个Header

将Header组件引入App,初始App为

引入Header组件

新建全局的CSS配置，*表示全局生效

 在main.js中引入

 之后使用ElementPlus框架代替手写CSS样式,首先安装

在IDEA终端安装

安装完成之后安装官网步骤进行引入

 完善Header

完善Aside

在App.vue中引入Aside

重新布局，最上为头部，主体包括侧边栏和内容区域

在Home中写入内容

定义需要的tabledata