1.了解vue基础知识。
Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)
2.将ruoyi-vue项目拉下来,并成功运行。
开源项目网址:RuoYi 若依官方网站 |后台管理系统|权限管理系统|快速开发框架|企业管理系统|开源框架|微服务框架|前后端分离框架|开源后台系统|RuoYi|RuoYi-Vue|RuoYi-Cloud|RuoYi框架|RuoYi开源|RuoYi视频|若依视频|RuoYi开发文档|若依开发文档|Java开源框架|Java|SpringBoot|SrpingBoot2.0|SrpingCloud|Alibaba|MyBatis|Shiro|OAuth2.0|Thymeleaf|BootStrap|Vue|Element-UI||www.ruoyi.viphttp://www.ruoyi.vip/ 在适当的文件夹内右击点击“Git Bash Here”(需要下载git)
# 克隆项目 git clone https://gitee.com/y_project/RuoYi-Vue # 进入项目目录 cd ruoyi-ui # 安装依赖 npm install # 建议不要直接使用 cnpm 安装依赖,会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题 npm install --registry=https://registry.npmmirror.com # 启动服务 npm run dev
当前运行是有错误的,因为重点在前端开发,为了防止本地部署的困难可选择若依线上的网址,修改如下:(14条消息) 若依接口500异常,前端分离_若依系统接口500异常_herry xiao的博客-CSDN博客
此时启动服务即可正常运行。
3.学习查看项目接口文档,并能够使用浏览器F12开发者工具,查看网页请求情况。(19条消息) 浏览器F12(开发者调试工具) 功能介绍_f12键打开网页代码_扶墙而出的博客-CSDN博客
4.修改ruoyi-vue,将通知公告页面中的表格增加一列,列明为“公告内容长度”,用于统计公告内容的字数。
<el-table-column label="公告内容长度" align="center" width="100">
<template slot-scope="scope">
{{ scope.row.noticeContent.length }}
</template>
</el-table-column>
<el-table-column
label="公告内容长度"
align="center"
prop="noticeContent.length"
width="100"
/>
5.修改ruoyi-vue,修改通知公告页面,使其将鼠标悬浮放置到公告标题上时能够显示对应的公告内容,而无需再点修改就可查看。
<el-table-column label="公告标题" align="center" prop="noticeTitle">
<template slot-scope="scope">
<el-tooltip :content="scope.row.noticeContent">
<span>{{ scope.row.noticeTitle }}</span>
</el-tooltip>
</template>
</el-table-column>
6.学习git,在gitee上建立项目仓库,对仓库的所有操作使用git指令完成,创建并切换到本地分支dev_qgl,将修改后的项目通过指令更新到远程gitee仓库的分支dev_qgl中。
(18条消息) gitee将本地项目更新到远程仓库指定的分支上_七小山的博客-CSDN博客
(18条消息) git报错:fatal: Couldn't find remote ref master_couldn't find remote ref master2_极品小男的博客-CSDN博客
(18条消息) 【git】本地仓库与远程仓库如何建立连接_git与远程仓库建立连接_与太阳有关_的博客-CSDN博客