赞
踩
项目地址: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打开命令行操作即可实现前后台对接
首先需要明白,loader
官方解释是文件预处理器,通俗点说就是webpack在处理静态文件的时候,需要使用 loader
来加载各种文件,
比如: html
文件需要使用html-loader
,css
需要使用css-loader
、 style-loader
等等。
同样的,用来处理ES6语法,将其编译为浏览器可以执行的js语法就叫做babel-loader啦,在此我们使用.babelrc 文件来进行配置
参考链接:Webpack 之 babel-loader 详解 webpack之重新认知babel-loader babel-loader的原理
参考链接:Vue中ESlint配置文件eslintrc.js文件详解
参考链接:Git忽略提交规则 - .gitignore配置运维总结
Travis CI 提供的是持续集成服务(Continuous Integration,简称 CI)。它绑定 Github 上面的项目,只要有新的代码,就会自动抓取。然后,提供一个运行环境,执行测试,完成构建,还能部署到服务器。
持续集成指的是只要代码有变更,就自动运行构建和测试,反馈运行结果。确保符合预期以后,再将新代码”集成”到主干。
持续集成的好处在于,每次代码的小幅变更,就能看到运行结果,从而不断累积小的变更,而不是在开发周期结束时,一下子合并一大块代码。
参考链接:详解TRAVIS CI的.TRAVIS.YML配置文件 持续集成(TRAVIS CI)简介
每个项目的根目录下面,一般都有一个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有三个参数:
了解这些之后,我们就可以这样写来自动引入 @/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
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。