快速看懂vue-element-admin框架学习|青训营笔记

136 阅读1分钟

这是我参与「第四届青训营 」笔记创作活动的第5天

build ----index.js webpack配置文件【很少修改这个文件】mock

mock

mock数据的文件夹【模拟一些假的数据mockjs实现的】,因为咱们实际开发的时候,利用的是真是接口

image.png

node_modules

image.png 项目依赖的模块

public

public.…-ico图标,静态页面,publick文件夹里面经常放置一些静态资源,而且在项目打包的时候webpack不会编译这个文件夹,原封不动的打包到dist文件夹里面

image.png

src

src是程序员源代码的地方

api文件夹:涉及请求相关的 assets文件夹:里面放置一些静态资源(一般共享的》,放在aseets文件夹里面静态资源,在webpack打包的时候,会进行编译

components文件夹:一般放置非路由组件获取全局组件

layout

image.png

路由及constantRoutes和asyncRoutes的区别

Vue-Element-Admin的router总使用constantRoutes和asyncRoutes两种定义路由,在store.modules.permission.js中对于两者的权限有默认的判断方式,然后再根目录下的permission.js中进行导航守卫逻辑;

constantRoutes: 不需要动态判断权限的路由,如登录页、404、等通用页面;

asyncRoutes: 需动态判断权限并通过 addRoutes 动态添加的页面;

环境

.env.development 开发环境 .env.production 生产环境 .env.staging 测试环境

image.png 这些可以通过wepack的process console.log(process.env); 拿到

image.png