衡水做wap网站建设,wordpress适合中文主题,客户资源管理系统,网站开发有哪些语言Spring BootVue项目从零入手
一、前期准备
在搭建spring bootvue项目前#xff0c;我们首先要准备好开发环境#xff0c;所需相关环境和软件如下#xff1a;
1、node.js
检测安装成功的方法#xff1a;node -v
2、vue
检测安装成功的方法#xff1a;vue -V
3、Visu…Spring BootVue项目从零入手
一、前期准备
在搭建spring bootvue项目前我们首先要准备好开发环境所需相关环境和软件如下
1、node.js
检测安装成功的方法node -v
2、vue
检测安装成功的方法vue -V
3、Visual Studio Code
这个软件是编写vue代码的工具也可以使用idea这个视情况而定。
4、jdk
检测安装成功的方法java -version和javac -version
5、mysql
6、idea
7、navicat
二、搭建vue页面
2.1、创建vue项目
1.打开cmd窗口进入准备建立vue项目的文件夹通过vue create XXX建立一个vue项目第一步
Vue CLI v5.0.8
P1ease pick a preset:
Default ([Vue 3] babe1,eslint)
Default ( [Vue2]babeleslint)
Manually select features
选择Manually select features回车
然后选择Babel和Router
选择2.X
输入y
选择In package.json
输入n
等待项目创建。
扩展
npm加速
npm config set registry https://registry.npm.taobao.org
2.2、运行
cd XXX
npm run serve
测试项目是否能正常运行可适当建立参数测试回显功能
vue项目可选择使用idea或者VSC打开其中vsc调出终端快捷键ctrlshiftY
测试代码在app.vue中
h1{{name}}/h1
data(){return{name:凡大帅哥}}2.3、引入Element UI组件
npm i element-ui -S
element UI有文档地址element.eleme.io/#/zh-CN/component/container
首先使用命令安装组件然后打开main.js
import ElementUI from element-ui;
import element-ui/lib/theme-chalk/index.css;Vue.use(ElementUI,{size:small});加入上面这几句话引入
测试
el-button typedanger这是el/el-button2.4、官网扒取示例代码
去官网扒取示例代码调整为自己需要的网页效果
Container 布局容器
home.vue
templatediv styleheight:100%el-container styleheight: 100%el-aside width200px stylebackground-color: rgb(238, 241, 246);height: 100%;overflow: hidden;el-menu :default-openeds[1, 3]el-submenu index1template slottitlei classel-icon-message/i导航一/templateel-menu-item-grouptemplate slottitle分组一/templateel-menu-item index1-1选项1/el-menu-itemel-menu-item index1-2选项2/el-menu-item/el-menu-item-groupel-menu-item-group title分组2el-menu-item index1-3选项3/el-menu-item/el-menu-item-groupel-submenu index1-4template slottitle选项4/templateel-menu-item index1-4-1选项4-1/el-menu-item/el-submenu/el-submenuel-submenu index2template slottitlei classel-icon-menu/i导航二/templateel-menu-item-grouptemplate slottitle分组一/templateel-menu-item index2-1选项1/el-menu-itemel-menu-item index2-2选项2/el-menu-item/el-menu-item-groupel-menu-item-group title分组2el-menu-item index2-3选项3/el-menu-item/el-menu-item-groupel-submenu index2-4template slottitle选项4/templateel-menu-item index2-4-1选项4-1/el-menu-item/el-submenu/el-submenuel-submenu index3template slottitlei classel-icon-setting/i导航三/templateel-menu-item-grouptemplate slottitle分组一/templateel-menu-item index3-1选项1/el-menu-itemel-menu-item index3-2选项2/el-menu-item/el-menu-item-groupel-menu-item-group title分组2el-menu-item index3-3选项3/el-menu-item/el-menu-item-groupel-submenu index3-4template slottitle选项4/templateel-menu-item index3-4-1选项4-1/el-menu-item/el-submenu/el-submenu/el-menu/el-asideel-containerel-header styletext-align: right; font-size: 12px;border-bottom: 1px solid #ccc;line-height: 60px;el-dropdowni classel-icon-setting stylemargin-right: 15px/iel-dropdown-menu slotdropdownel-dropdown-item查看/el-dropdown-itemel-dropdown-item新增/el-dropdown-itemel-dropdown-item删除/el-dropdown-item/el-dropdown-menu/el-dropdownspan王小虎/span/el-headerel-mainel-table :datatableDatael-table-column propdate label日期 width140/el-table-columnel-table-column propname label姓名 width120/el-table-columnel-table-column propaddress label地址/el-table-column/el-table/el-main/el-container
/el-container/div/templatescript
// is an alias to /src
import HelloWorld from /components/HelloWorld.vueexport default {name: HomeView,components: {HelloWorld},data() {const item {date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄};return {tableData: Array(10).fill(item)}}
}
/script
写一个全局css——gloable.css放在assets目录下
html,body,div{margin: 0;padding: 0;
}
html,body{height: 100%;
}在main.js中引入
import ./assets/gloable.cssapp.vue
templatediv idapprouter-view//div
/templatestyle
#app {height: 100%;
}/style
三、搭建SpringBoot框架
1、创建Springboot项目勾选Lombok简化java代码的插件、web——Spring Web相当于SpringMVC、sql——MyBatis FrameworkMySql Driver
版本不要选太高了
pom配置阿里云仓库
repositories
repository
idnexus-aliyun/id
namenexus-a1 i yun/name
ur1http ://maven . aliyun. com/nexus/content/ groups /pub1ic//ur1
re1eases
enab1edtrue/enal1ed
/releases
snapshots
enab1edfalse/enab1ed
/snapshots
/repository
/repositories
p1uginRepositories
p1uginRepository
idpub1ic/id
namealiyun nexus/name
ur1http: //maven . aliyun. com/nexus/content/ groups/pub1ic//ur1
re1eases
enab1edtrue/enab1ed
/releases
snapshots
enabledfalse/enab1ed
/snapshots
/p1uginRepository
/p1uginRepositories
创建好项目后先启动确认项目可以正常运行再将vue整个拖入Springboot项目中
也可不拖入访问时将地址写全
配置vue启动
再配置tomcat的地方点选择npm下方选择vue的package.json下方run的下一格写serve
四、接口整合
