搭建Vue前端工程
上一讲, 我们学习的是SSM整合-前后端分离(项目环境搭建)
现在打开furn-ssm项目
实现功能01-搭建Vue前端工程
需求分析/图解
1.使用Vue3的脚手架 Vue-cli 工具, 创建ssm的前端项目基础开发环境.
2.Vue-cli 主要的功能是 自动生成Vue的项目模板, 提高开发效率.
3.Vue-cli 工具, 我们在前面使用过.
代码实现
搭建Vue前端工程
1.先下载node.js LTS 并安装: node.js的npm, 用于管理前端项目包依赖.
说明: 前面我们讲解前端技术栈Vue2的时候用过node.js(10.16.3), 这里我们先卸载一把, 安装14.17.3这个版本, 方便我们使用vue3.
1)node.js安装非常简单, 直接下一步即可. 安装参考
下载地址: https://nodejs.org/en/blog/release/v14.17.3
2)全局安装Vue插件cli: npm install -g @vue/cli, 这样我们就可以创建Vue工程
2.创建Vue项目. 因为我们是前后端分离的, 所以新建一个前端项目
1)创建文件夹 D:\idea_project\SSM-Vue整合项目
2)创建Vue项目 ssm-vue, 指令 vue create ssm_vue
3)选择版本
4)选择路由方式
5)选择项目依赖包管理方式
6)选择是否保存本次设置
7)启动项目
8)浏览器测试
3.使用idea打开ssm_vue项目, 并配置项目启动
1)直接将ssm_vue项目拖到idea
2)配置ssm_vue, 使用npm方式启动
vue3项目目录结构梳理
●Vue3项目结构介绍
1)梳理Vue3最重要的路由机制
2)index.html页面说明
3)assets目录和components目录说明
4)router / index.js 用于配置路由
5)store / index.js 用于存放数据
6)视图使用的基本介绍 
7)packson.json 说明前端项目包依赖关系, 类似maven的pom.xml
8)main.js用于引入资源(css/组件等), 同时也是创建App挂载#app, 引入./router ./store等资源的地方
配置vue服务端口
1.修改ssm_vue\vue.config.js
module.exports = {
devServer: {
port: 10000 //前端vue启动端口
}
}
Element Plus和Element UI
Element Plus官网文档, Element Plus官网文档-gitee
一句话: Element Plus: Element UI for Vue 3.0
其他说明
1.Element Plus是Element对Vue 3.0的升级适配.
2.Element诞生于2016年, 起初是饿了么内部的业务组件库, 开源后深受广大前端开发者的喜爱, 成为Vue生态中最流行的UI组件库之一.
3.Element Plus是重构的全新项目. Element团队重写了Element的代码, 用于支持Vue 3
4.Element UI还在维护和升级, 因为Vue 2仍然有项目在使用, Vue3支持的浏览器范围有所减少, 这是一个大的改变, 所以在一段时间内, Vue2仍然会在项目中使用.
安装element-plus插件
停止项目, 安装element-plus插件.
实现功能02-创建项目基础界面
需求分析/图解
思路分析
1.使用Vue3 + ElementPlus完成
代码实现
1.修改D:\idea_project\SSM-Vue整合项目\ssm_vue\src\App.vue, 成如下形式, 删除部分用不上的代码, 增加<div></div>
<template>
<div>
</div>
</template>
<style>
</style>
2.修改D:\idea_project\SSM-Vue整合项目\ssm_vue\src\views\HomeView.vue
<template>
<!--去掉class="home"-->
<div>
<!--<img alt="Vue logo" src="../assets/logo.png">-->
<!--<HelloWorld msg="Welcome to Your Vue.js App"/>-->
</div>
</template>
<script>
// @ is an alias to /src
// 导出组件
export default {
name: 'HomeView',
components: {
}
}
</script>
3.删除D:\idea_project\SSM-Vue整合项目\ssm_vue\src\components\HelloWorld.vue
4.创建D:\idea_project\SSM-Vue整合项目\ssm_vue\src\components\Header.vue
<template>
<!--解读
1.这是页面的头部
2.分成三个部分 div
3.flex: 1 弹性布局
-->
<div style="height: 50px; line-height: 50px; border-bottom: 1px solid #ccc; display: flex">
<div style="width: 200px; padding-left: 30px; font-weight: bold; color: dodgerblue">后台管理</div>
<div style="flex: 1"></div>
<div style="width: 100px">下拉框</div>
</div>
</template>
5.修改D:\idea_project\SSM-Vue整合项目\ssm_vue\src\App.vue
<template>
<div>
<!--引入Header组件/界面-->
<Header/>
Home页面
</div>
</template>
<script>
import Header from "@/components/Header.vue";
export default {
name: "Layout",
components: {
Header
}
}
</script>
6.创建全局的global.css, 先准备着, 后面有用, 以后有全局样式就可以写在这里.
D:\idea_project\SSM-Vue整合项目\ssm_vue\src\assets\css\global.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
7.修改D:\idea_project\SSM-Vue整合项目\ssm_vue\src\main.js, main.js用于引入资源(css/组件等)
//引入css
import '@/assets/css/global.css'
8.修改D:\idea_project\SSM-Vue整合项目\ssm_vue\src\main.js.
引入Element Plus看文档
9.修改D:\idea_project\SSM-Vue整合项目\ssm_vue\src\App.vue, 引入一个el-button, 看看是否生效
<template>
<div>
<!--引入Header组件/界面-->
<Header/>
Home页面 <el-button>我的按钮</el-button>
</div>
</template>
<script>
import Header from "@/components/Header.vue";
export default {
name: "Layout",
components: {
Header
}
}
</script>
10.修改D:\idea_project\SSM-Vue整合项目\ssm_vue\src\components\Header.vue, 引入下拉框
<template>
<!--解读
1.这是页面的头部
2.分成三个部分 div
3.flex: 1 弹性布局
-->
<div style="height: 50px; line-height: 50px; border-bottom: 1px solid #ccc; display: flex">
<div style="width: 200px; padding-left: 30px; font-weight: bold; color: dodgerblue">后台管理</div>
<div style="flex: 1"></div>
<div style="width: 100px">
<el-dropdown>
<span class="el-dropdown-link">
tom
<el-icon class="el-icon--right">
<arrow-down/>
</el-icon>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>个人信息</el-dropdown-item>
<el-dropdown-item>退出登录</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</div>
</template>
运行效果
11.创建侧边栏组件, 新建D:\idea_project\SSM-Vue整合项目\ssm_vue\src\components\Aside.vue
并引入导航菜单组件
<template>
<div>
<!--引入导航菜单-->
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
>
<el-sub-menu index="1">
<template #title>
<el-icon><location /></el-icon>
<span>Navigator One</span>
</template>
<el-menu-item-group title="Group One">
<el-menu-item index="1-1">item one</el-menu-item>
<el-menu-item index="1-2">item two</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="Group Two">
<el-menu-item index="1-3">item three</el-menu-item>
</el-menu-item-group>
<el-sub-menu index="1-4">
<template #title>item four</template>
<el-menu-item index="1-4-1">item one</el-menu-item>
</el-sub-menu>
</el-sub-menu>
<el-menu-item index="2">
<el-icon><icon-menu /></el-icon>
<span>Navigator Two</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<el-icon><document /></el-icon>
<span>Navigator Three</span>
</el-menu-item>
<el-menu-item index="4">
<el-icon><setting /></el-icon>
<span>Navigator Four</span>
</el-menu-item>
</el-menu>
</div>
</template>
<script>
export default {
name: "Aside"
}
</script>
<style scoped>
</style>
12.修改D:\idea_project\SSM-Vue整合项目\ssm_vue\src\App.vue, 将页面分成三个部分
<template>
<div>
<!--引入Header组件/界面 头部-->
<Header/>
<!--主体-->
<div style="display: flex">
<!--侧边栏-->
<Aside/>
<!--内容区域 这个部分通过路由展示, 我们就路由到HomeView.vue
http://localhost:10000/ => HomeView.vue
http://localhost:10000/about => AboutView.vue
-->
</div>
</div>
</template>
<script>
import Header from "@/components/Header.vue";
import Aside from "@/components/Aside.vue";
export default {
name: "Layout",
components: {
Aside,
Header
}
}
</script>
13.修改D:\idea_project\SSM-Vue整合项目\ssm_vue\src\views\HomeView.vue, 加入一个el-button, 进行测试
<template>
<div>
<el-button>我的按钮</el-button>
</div>
</template>
14.主页面的效果, 基本结构已经出来了
15.对主页面进行一个完善, 比如导航栏的宽度, 去掉不必要的子菜单等.
修改D:\idea_project\SSM-Vue整合项目\ssm_vue\src\components\Aside.vue
<template>
<div>
<!--引入导航菜单-->
<el-menu
style="width: 200px;"
default-active="2"
class="el-menu-vertical-demo"
>
<el-sub-menu index="1">
<template #title>
<el-icon><location /></el-icon>
<span>导航一</span>
</template>
<el-menu-item-group title="组1">
<el-menu-item index="1-1">选项一</el-menu-item>
<el-menu-item index="1-2">选项二</el-menu-item>
</el-menu-item-group>
<el-sub-menu index="1-3">
<template #title>选项三</template>
<el-menu-item index="1-3-1">选项一</el-menu-item>
</el-sub-menu>
</el-sub-menu>
<el-menu-item index="2">
<el-icon><icon-menu /></el-icon>
<span>导航二</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<el-icon><document /></el-icon>
<span>导航三</span>
</el-menu-item>
<el-menu-item index="4">
<el-icon><setting /></el-icon>
<span>导航四</span>
</el-menu-item>
</el-menu>
</div>
</template>
16.修改D:\idea_project\SSM-Vue整合项目\ssm_vue\src\views\HomeView.vue, 引入表格, 后面来显示数据.
<template>
<div>
<el-table :data="tableData" stripe style="width: 100%">
<el-table-column prop="date" label="日期"/>
<el-table-column prop="name" label="名字"/>
<el-table-column prop="address" label="地址"/>
</el-table>
</div>
</template>
<script>
// @ is an alias to /src
// 导出组件
export default {
name: 'HomeView',
components: {},
data() {
return {
tableData: [{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},]
}
},
}
</script>
17.可以看到, element-plus默认是英文的, 我们将其国际化一下.
https://element-plus.gitee.io/zh-CN/guide/i18n.html
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import 'element-plus/dist/index.css'
//引入css
import '@/assets/css/global.css'
createApp(App).use(store).use(router).use(ElementPlus, {locale: zhCn}).mount('#app')
18.修改D:\idea_project\SSM-Vue整合项目\ssm_vue\src\views\HomeView.vue, 从官网设置一些测试数据, 并支持日期排序
19.修改D:\idea_project\SSM-Vue整合项目\ssm_vue\src\views\HomeView.vue, 增加相关的操作按钮和搜索框
el-input输入框参考 操作按钮参考
<template>
<div>
<!--增加按钮和搜索框-->
<div style="margin: 10px 5px">
<el-button type="primary">新增</el-button>
<el-button>其它</el-button>
</div>
<!--margin: 顶部距离 左侧距离-->
<div style="margin: 10px 5px">
<el-input v-model="search" style="width: 20%" placeholder="请输入关键字"/>
<el-button style="margin: 10px" type="primary">查询</el-button>
</div>
<el-table :data="tableData" stripe style="width: 90%">
<el-table-column sortable prop="date" label="日期"/>
<el-table-column prop="name" label="名字"/>
<el-table-column prop="address" label="地址"/>
<el-table-column fixed="right" label="操作" width="120">
<template #default>
<el-button link type="primary">
编辑
</el-button>
<el-button link type="primary">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
search: '',
tableData: [...]
}
}
}
</script>
项目前后端分离情况
●项目前后端分离情况如图
注意事项和细节
1.flex: 1 布局说明
https://www.cnblogs.com/LangZ-/p/12703858.html
2.box-sizing: border-box就是将border和padding数值包含在width和height之内, 这样的好处就是修改border和padding, 数值盒子的大小不变.
https://blog.csdn.net/qq_26780317/article/details/80736514
3.引入Element-Plus, 启动可能出现的问题和解决方案
下一讲, 我们学习 SSM整合-前后端分离(实现增删改查)
424
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
