企业官网建设流程全解析

网站建设二次开发,企业网站免费推广软件,wordpress 一级目录下,长治网站制作平台Spring BootVue项目从零入手 一、前期准备 在搭建spring bootvue项目前#xff0c;我们首先要准备好开发环境#xff0c;所需相关环境和软件如下#xff1a; 1、node.js 检测安装成功的方法#xff1a;node -v 2、vue 检测安装成功的方法#xff1a;vue -V 3、Visual Stud…Spring BootVue项目从零入手一、前期准备在搭建spring bootvue项目前我们首先要准备好开发环境所需相关环境和软件如下1、node.js检测安装成功的方法node -v2、vue检测安装成功的方法vue -V3、Visual Studio Code这个软件是编写vue代码的工具也可以使用idea这个视情况而定。4、jdk检测安装成功的方法java -version和javac -version5、mysql6、idea7、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.org2.2、运行cd XXXnpm run serve测试项目是否能正常运行可适当建立参数测试回显功能vue项目可选择使用idea或者VSC打开其中vsc调出终端快捷键ctrlshiftY测试代码在app.vue中h1{{name}}/h1 data(){ return{ name:凡大帅哥 } }2.3、引入Element UI组件npm i element-ui -Selement UI有文档地址element.eleme.io/#/zh-CN/component/container首先使用命令安装组件然后打开main.jsimport 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.vuetemplate div 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 index1 template slottitlei classel-icon-message/i导航一/template el-menu-item-group template slottitle分组一/template el-menu-item index1-1选项1/el-menu-item el-menu-item index1-2选项2/el-menu-item /el-menu-item-group el-menu-item-group title分组2 el-menu-item index1-3选项3/el-menu-item /el-menu-item-group el-submenu index1-4 template slottitle选项4/template el-menu-item index1-4-1选项4-1/el-menu-item /el-submenu /el-submenu el-submenu index2 template slottitlei classel-icon-menu/i导航二/template el-menu-item-group template slottitle分组一/template el-menu-item index2-1选项1/el-menu-item el-menu-item index2-2选项2/el-menu-item /el-menu-item-group el-menu-item-group title分组2 el-menu-item index2-3选项3/el-menu-item /el-menu-item-group el-submenu index2-4 template slottitle选项4/template el-menu-item index2-4-1选项4-1/el-menu-item /el-submenu /el-submenu el-submenu index3 template slottitlei classel-icon-setting/i导航三/template el-menu-item-group template slottitle分组一/template el-menu-item index3-1选项1/el-menu-item el-menu-item index3-2选项2/el-menu-item /el-menu-item-group el-menu-item-group title分组2 el-menu-item index3-3选项3/el-menu-item /el-menu-item-group el-submenu index3-4 template slottitle选项4/template el-menu-item index3-4-1选项4-1/el-menu-item /el-submenu /el-submenu /el-menu /el-aside el-container el-header styletext-align: right; font-size: 12px;border-bottom: 1px solid #ccc;line-height: 60px; el-dropdown i classel-icon-setting stylemargin-right: 15px/i el-dropdown-menu slotdropdown el-dropdown-item查看/el-dropdown-item el-dropdown-item新增/el-dropdown-item el-dropdown-item删除/el-dropdown-item /el-dropdown-menu /el-dropdown span王小虎/span /el-header el-main el-table :datatableData el-table-column propdate label日期 width140 /el-table-column el-table-column propname label姓名 width120 /el-table-column el-table-column propaddress label地址 /el-table-column /el-table /el-main /el-container /el-container /div /template script // is an alias to /src import HelloWorld from /components/HelloWorld.vue export 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.vuetemplate div idapp router-view/ /div /template style #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四、接口整合