强撸vue-element-admin

项目地址:vue-element-admin

目录结构内部分文件解析

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

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

/**  项目根目录/browser/  **/
|
├── build                      // 构建相关
├── config                     // 配置相关
├── src                        // 源代码
│   ├── api                    // 所有请求
│   ├── assets                 // 主题 字体等静态资源
│   ├── components             // 全局公用组件
│   ├── directive              // 全局指令
│   ├── filters                // 全局 filter
│   ├── icons                  // 项目所有 svg icons
│   ├── lang                   // 国际化 language
│   ├── mock                   // 项目mock 模拟数据
│   ├── router                 // 路由
│   ├── store                  // 全局 store管理
│   ├── styles                 // 全局样式
│   ├── utils                  // 全局公用方法
│   ├── vendor                 // 公用vendor
│   ├── views                  // views 所有页面
│   ├── App.vue                // 入口页面
│   ├── main.js                // 入口文件 加载组件 初始化等
│   └── permission.js          // 权限管理
├── static                     // 第三方不打包资源
│   └── Tinymce                // 富文本
├── .babelrc                   // babel-loader 配置
├── .eslintrc.js               // eslint 配置项
├── .gitignore                 // git 忽略项
├── .travis.yml                // 自动化CI配置
├── favicon.ico                // favicon图标
├── index.html                 // html模板
└── package.json               // package.json

/**  项目根目录/server/  **/
|
├── build                      // 构建相关
├── logs                       // 日志相关
├── src                        // 源代码
│   ├── main                    
          |——java
          |——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 下面所有的图标了

const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
requireAll(req)

//keys()的意思就是 整理requireContext 不管这个是Object还是Array 都把key值整理出来变成一个数组,在通过map去循环。

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

 

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

 

你可能感兴趣的:(开源项目)