1.在gitee里下载D2admin开源框架
2.在电脑中下载node.js
3.在项目中运行 npm install (下载该项目的依赖包)
环境配置
在.env中,VUE_APP_API=api地址(配置自己项目的API)
目录讲解
1、src:这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:
1)assets:资源目录,放置一些图片或者公共js、公共css。这里的资源会被webpack构建;
2)components:组件目录,我们写的组件就放在这个目录里面;
3)router:前端路由,我们需要配置的路由路径写在index.js里面;
4)App.vue:根组件;
5)main.js:入口js文件;
2、index.html:首页入口文件,可以添加一些 meta 信息等
3、package.json:npm包配置文件,定义了项目的npm脚本,依赖包等信息
封装接口
在src\store\modules\d2admin\modules\account.js中缓存uuid和token
登录的时候再取uid和token
之后再把路由拦截中的token改了
路由
D2Admin 路由设置文件在 d2-admin/src/router/routes.js。
d2-admin-master\src\menu\modules文件夹下放你新建的文件,
之后在d2-admin-master\src\menu\index.js中引用你新建的文件,index文件下面有文字注释,并把新建文件写在文字注释的下面
再在菜单路由(src\menu\index.js)中写新建的文件路由先引用在写
这样就可以新建自己想要的动态路由页面
菜单路由
权限
书写规范
1.一个组件下只能有一个并列的 div,以下写法是错误:
1.1 数据要写在 return 里面,而不是像文档那样子写,以下写法错误:
2. 在大结构块时,加入合适的注释标签,并保持良好的层级缩进:
<div>
<!-- “导入”组件 -->
<div>
xxx
</div>
<!-- “导入”组件/ -->
<!-- 搜索框 -->
<div>
xxx
</div>
<!-- 搜索框/ -->
</div>
3.import 放在最顶部,并省略掉 .js,.json 和 .vue 后缀(已在webpack的resolve.extensions中做了配置)
import mockData from '@/mockdata/userMock.js'
- export 对象中属性定义顺序
name 当前模块名字
components 便于查找引用了哪些组件(单个换行,以,结尾)
components: {
norecord,
TimePicker,
},
- data 记得是一个 function,保证每个实例可以维护一份被返回对象的独立的拷贝
computed 计算属性
watch 监听器
filters 过滤器
directives 指令
mixins 混入
methods 方法
登录页面
src\views\system\login\index.vue这个页面是登录页面
在登录页面中引用放接口的页面
输入框和表单之类的可以在element-ui中找,里面的代码可以直接用
切换页面可以用v-if
@click 点击事件
项目页面
样式参考https://element.eleme.cn/#/zh-CN(桌面端组件库)
里面的样式很全,可以自由组合。
中亿丰——邸坤