文章目录
前言(很重要哦)
管理系统后端(java)请参考:https://blog.csdn.net/grd_java/article/details/121925792
本项目源码,码云:https://gitee.com/yin_zhipeng/vue-backstage-scaffolding.git
后台管理系统
,一般都是内部人员使用,所以对界面要求不高,一般都使用模板开发
。而前台系统
,是给游客使用,要凸显个性,所以一般自己开发,不使用模板
如果你想从头到尾写,可以参考我的前台系统,每个细节都会讲到(看完完全可以自己写个模板)
:@TODO 日后再写这里是后台管理系统,我们使用模板"PanJiaChen的模板简洁版"
- 如果你
GitHub进不去
,可以到这里下载(码云)
:https://gitee.com/panjiachen/vue-admin-template.git
下载完成后,我们用它来当做项目,执行npm install --save 来下载相关依赖,然后通过npm run dev启动项目,最后浏览器查看项目
项目最终成果展示@TODO
一、概念和技术总结(重点,一定要搞懂)
这里总结项目中用到的前端知识,后面将不再赘述
- 大家最起码需要混个眼熟,后面代码中用到,不至于不知道这是干什么的(
现在好多人,会用,但不知道为什么这么用,那你怎么优化和调优,调错呢?
)- 如果这里有你不会或没见过的东西(看了我的介绍不懂的),可以参考官方文档(说明你压根没学过Vue的相关知识,直接百度Vue官网就行)
1. vue
组件通信的方式(最基础的6种)
- props:适用于父子组件通信的场景,有一个容易混淆的点,如下:
- 如果父组件利用props给子组件传递数据时,传递的是一个函数,其实就是子组件给父组件传递数据(因为调用的是父组件的函数)。
- 如果传递的不是函数,那么才是真正的父组件给子组件传递了数据(子组件使用传来的数据).
- 可以指定父组件传输的类型,{type:Array},也可以指定默认值{type:Array,default:[]},也可以什么都不指定,[‘todos’]
- 自定义事件:适用于子组件给父组件传递数据, $ on、和$ emit
- 全局事件总线$bus:适用于任何场景,Vue.prototype. $bus = this;
- pubsub-js发布和订阅:适用于任何场景,但是Vue用的不多,一般React框架经常使用
- Vuex:适用于任何场景,用的非常多
- solt插槽:使用于针对结构(标签)的父子组件通信,常用的有默认插槽,具名插槽和作用域插槽
2. vue-admin-template模板文件解析
文件目录解析(注意:以下所有文件夹和文件,你自己写效果也一样,并不是必须在这个模板文件中才能用)
build
--index.js webpack配置文件[我们基本不用修改]
mock
--mock数据文件夹[模拟一些假数