当前位置:   article > 正文

强撸vue-element-admin

强撸vue-element-admin

项目地址:vue-element-admin

目录结构内部分文件解析

  1. ├── build // 构建相关
  2. ├── config // 配置相关
  3. ├── src // 源代码
  4. │ ├── api // 所有请求
  5. │ ├── assets // 主题 字体等静态资源
  6. │ ├── components // 全局公用组件
  7. │ ├── directive // 全局指令
  8. │ ├── filters // 全局 filter
  9. │ ├── icons // 项目所有 svg icons
  10. │ ├── lang // 国际化 language
  11. │ ├── mock // 项目mock 模拟数据
  12. │ ├── router // 路由
  13. │ ├── store // 全局 store管理
  14. │ ├── styles // 全局样式
  15. │ ├── utils // 全局公用方法
  16. │ ├── vendor // 公用vendor
  17. │ ├── views // views 所有页面
  18. │ ├── App.vue // 入口页面
  19. │ ├── main.js // 入口文件 加载组件 初始化等
  20. │ └── permission.js // 权限管理
  21. ├── static // 第三方不打包资源
  22. │ └── Tinymce // 富文本
  23. ├── .babelrc // babel-loader 配置
  24. ├── .eslintrc.js // eslint 配置项
  25. ├── .gitignore // git 忽略项
  26. ├── .travis.yml // 自动化CI配置
  27. ├── favicon.ico // favicon图标
  28. ├── index.html // html模板
  29. └── package.json // package.json

由上面衍生的前后端分离目录

  1. /** 项目根目录/browser/ **/
  2. |
  3. ├── build // 构建相关
  4. ├── config // 配置相关
  5. ├── src // 源代码
  6. │ ├── api // 所有请求
  7. │ ├── assets // 主题 字体等静态资源
  8. │ ├── components // 全局公用组件
  9. │ ├── directive // 全局指令
  10. │ ├── filters // 全局 filter
  11. │ ├── icons // 项目所有 svg icons
  12. │ ├── lang // 国际化 language
  13. │ ├── mock // 项目mock 模拟数据
  14. │ ├── router // 路由
  15. │ ├── store // 全局 store管理
  16. │ ├── styles // 全局样式
  17. │ ├── utils // 全局公用方法
  18. │ ├── vendor // 公用vendor
  19. │ ├── views // views 所有页面
  20. │ ├── App.vue // 入口页面
  21. │ ├── main.js // 入口文件 加载组件 初始化等
  22. │ └── permission.js // 权限管理
  23. ├── static // 第三方不打包资源
  24. │ └── Tinymce // 富文本
  25. ├── .babelrc // babel-loader 配置
  26. ├── .eslintrc.js // eslint 配置项
  27. ├── .gitignore // git 忽略项
  28. ├── .travis.yml // 自动化CI配置
  29. ├── favicon.ico // favicon图标
  30. ├── index.html // html模板
  31. └── package.json // package.json
  32. /** 项目根目录/server/ **/
  33. |
  34. ├── build // 构建相关
  35. ├── logs // 日志相关
  36. ├── src // 源代码
  37. │ ├── main
  38. |——java
  39. |——resources

也就是说把前一整个目录封装进browser里面作为前端,再建一个server目录写后端代码,运行IDEA打开命令行操作即可实现前后台对接

  • .babelrc                   // babel-loader 配置

首先需要明白,loader官方解释是文件预处理器,通俗点说就是webpack在处理静态文件的时候,需要使用 loader 来加载各种文件,

比如: html文件需要使用html-loader ,css 需要使用css-loader 、 style-loader 等等。

同样的,用来处理ES6语法,将其编译为浏览器可以执行的js语法就叫做babel-loader啦,在此我们使用.babelrc 文件来进行配置

参考链接:Webpack 之 babel-loader 详解    webpack之重新认知babel-loader   babel-loader的原理

  • .eslintrc.js               // eslint 配置项

参考链接:Vue中ESlint配置文件eslintrc.js文件详解

  • .gitignore                 // git 忽略项

参考链接:Git忽略提交规则 - .gitignore配置运维总结

  • .travis.yml                // 自动化CI配置

Travis CI 提供的是持续集成服务(Continuous Integration,简称 CI)。它绑定 Github 上面的项目,只要有新的代码,就会自动抓取。然后,提供一个运行环境,执行测试,完成构建,还能部署到服务器。

持续集成指的是只要代码有变更,就自动运行构建和测试,反馈运行结果。确保符合预期以后,再将新代码”集成”到主干。

持续集成的好处在于,每次代码的小幅变更,就能看到运行结果,从而不断累积小的变更,而不是在开发周期结束时,一下子合并一大块代码。

参考链接:详解TRAVIS CI的.TRAVIS.YML配置文件   持续集成(TRAVIS CI)简介

  • package.json 

每个项目的根目录下面,一般都有一个package.json文件,定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称、版本、许可证等元数据)

参考链接:对package.json的理解和学习

关于如何优雅的使用icon

首先我们创建一个专门放置图标 icon 的文件夹如:@/src/icons,将所有 icon 放在这个文件夹下。 之后我们就要使用到 webpack 的 require.context。很多人对于 require.context可能比较陌生,直白的解释就是

require.context("./test", false, /.test.js$/); 这行代码就会去 test 文件夹(不包含子目录)下面的找所有文件名以 .test.js 结尾的文件能被 require 的文件。 更直白的说就是 我们可以通过正则匹配引入相应的文件模块。

require.context有三个参数:

  • directory:说明需要检索的目录
  • useSubdirectories:是否检索子目录
  • regExp: 匹配文件的正则表达式

了解这些之后,我们就可以这样写来自动引入 @/src/icons 下面所有的图标了

  1. const requireAll = requireContext => requireContext.keys().map(requireContext)
  2. const req = require.context('./svg', false, /\.svg$/)
  3. requireAll(req)
  4. //keys()的意思就是 整理requireContext 不管这个是Object还是Array 都把key值整理出来变成一个数组,在通过map去循环。

之后我们增删改图标直接直接文件夹下对应的图标就好了,什么都不用管,就会自动生成 svg symbol了。

 

详情参看:手摸手,带你优雅的使用 icon

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/黑客灵魂/article/detail/944818
推荐阅读
相关标签
  

闽ICP备14008679号