赞
踩
管理系统后端(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官网就行)
组件通信的方式(最基础的6种)
- props:适用于父子组件通信的场景,有一个容易混淆的点,如下:
- 如果父组件利用props给子组件传递数据时,传递的是一个函数,其实就是子组件给父组件传递数据(因为调用的是父组件的函数)。
- 如果传递的不是函数,那么才是真正的父组件给子组件传递了数据(子组件使用传来的数据).
- 可以指定父组件传输的类型,{type:Array},也可以指定默认值{type:Array,default:[]},也可以什么都不指定,[‘todos’]
- 自定义事件:适用于子组件给父组件传递数据, $ on、和$ emit
- 全局事件总线$bus:适用于任何场景,Vue.prototype. $bus = this;
- pubsub-js发布和订阅:适用于任何场景,但是Vue用的不多,一般React框架经常使用
- Vuex:适用于任何场景,用的非常多
- solt插槽:使用于针对结构(标签)的父子组件通信,常用的有默认插槽,具名插槽和作用域插槽
文件目录解析(注意:以下所有文件夹和文件,你自己写效果也一样,并不是必须在这个模板文件中才能用)
build --index.js webpack配置文件[我们基本不用修改] mock --mock数据文件夹[模拟一些假数据,mock.js实现],我们已经有后端和接口,基本不需要它 node_modules --项目依赖的模块 p ublic --存放ico图标,静态页面等静态资源,webpack打包时,不会编译此文件夹,原封不动打包到dist文件夹 src --我们写代码的地方 --api文件夹:异步请求相关代码 --assets文件夹:静态资源,一般是共享的,但是这里的静态资源,webpack打包是会编译 --components文件夹:全局组件(非路由组件) --icons文件夹:svg矢量图 --layout文件夹:放置一些组件和混入mixin --router文件夹:与路由相关的 --store文件夹:vuex相关的 --style文件夹:样式相关的 --utils文件夹:工具类,其中request.js是axios的二次封装,比较常用 --views文件夹:路由组件(不是全局组件) App.vue --根组件 main.js --入口文件 permission.js --导航守卫,主要控制登录等相关事务 settings --对于项目的配置项(面向展示层),比如我们浏览器标签title显示什么,表头是否固定,导航栏logo是否显示 --剩下都是配置文件 .editorconfig --编程风格配置,比如缩进统一2个空格 -- 很重要的3个配置文件,可以通过webpack对外暴露的函数process获取 .env.development -- 开发环境的配置文件 .env.production -- 上线环境的配置文件 .env.staging -- 测试环境的配置文件 -- 重要但又不重要的3个配置文件 .eslintignore -- eslint检测的忽略文件,对于这些文件它会忽略
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。