skylor.min-admin
v0.0.2
Published
skylor.min blog admin website. http://www.fangyongle.com
Downloads
4
Maintainers
skylorReadme
create-react-web
搭建网站前端的一个很好用的脚手架，集合了很多强大的功能，方便使用。
视图层使用React @16.x，数据使用Redux管理（拥抱chunk），路由使用React Router @4.x控制，页面脚本使用webpack按需打包加载，自动化任务（静态资源自动化管理，svg图标自动化组件，postcss，代码压缩等等）采用Gulp，使用standard-version等自管理项目日志，HOC + decorator助攻服务器渲染（SSR），Helmet独立管理分页TDK(title, description, keywords)，meta，link等。
使用最新语法开发，async/await随便用，两端（服务端、前端）同构，babel解析，飞一般的开发速度。
For web site developer who wants to use React.
Run Env.
node version >= 8.x
Todolist
- [x] React 16.x & React-Router 4.x
- [x] Server Side Render (SSR)
- [x] Code Splitting (use React-Router 4.X)
- [x] smart title,keywords,description (TDK) for SEO
- [x] auto asset manager
- [x] auto svg icon
- [x] auto changelog
- [x] fetch data (ajax)
- [x] ajax, connect, etc. HOC
- [x] gulp tasks & webpack code
- [x] webpack bundles analyzer
- [ ] mock server
- [x] use less for css
- [x] postcss & autoprefixer
- [ ] cache init state (redis)
- [x] eslint (server & frontend)
- [x] async await
Install
- (writing)
Usage
- (writing)
Server:
- express
- ejs
Frontend
- React 16.x
- React-Router 4.x
- Redux
- Less
CLI
- (developing)
路由规则
一般命名参数(:foo)
path = '/:foo/:bar'
url = '/test/route'
// => params = { foo: 'test', bar: 'route' }- 需要注意的是，一般命名参数必须是字母或者数字和下划线 (
[A-Za-z0-9_])
path = '/(apple-)?icon-:res(\\d+).png'
url = '/icon-76.png'
// => params = { res: 76 }参数修饰符(?)
path = '/:foo/:bar?'
url = '/test'
// => params = { foo: 'test' }
url = '/test/route'
// => params = { foo: 'test', bar: 'route' }- 如果只有一个参数，那么写在前面的
?也有同样的作用
通配符(*)
path = '/:foo*'
url = '/'
// => params = { foo: undefined }
url = '/bar/baz'
// => params = { foo: 'bar/baz' }匹配符(+)
path = '/:foo+'
url = '/'
// => null 不匹配
url = '/bar/baz'
// => params = { foo: 'bar/baz' }自定义匹配规则(正则规则，但是([^\/]+)需要转义)
path = '/:foo(\\d+)'
url = '/123'
// => params = { foo: 123 }
url = '/abc'
// => null 不匹配匿名参数((.*))
path = '/:foo/(.*)'
url = '/test/route'
// => params = { foo: 'test' }内部使用了path-to-regexp，如果想查看更加详细的文档可以点击查看。
Eslint Version
├─┬ [email protected]
├─┬ [email protected]
├─┬ [email protected]
│ └── [email protected]
├── [email protected]
├─┬ [email protected]
│ ├─┬ [email protected]
│ ├─┬ [email protected]
├─┬ [email protected]
├─┬ [email protected]Changelog & Commit Message
Install
npm run commit-release:installUsage
// 脚本辅助提交代码，书写提交信息，也可以使用自己喜欢的提交方式，但是需要注意提交文档的格式
npm run git:commit
// 推送服务器
npm run git:push
// `release`需要在`master`分支上操作
// 预查看发布信息
npm run release -- --dry-run
// 确认无误后发布
npm run release为了方便使用，有以下脚本糖可以使用：
使用脚本糖
// 一键提交代码，并推送到服务端
npm run fly
// 切换`master`分支并更新，发布新版本，推送服务端，一键搞定
npm run fly:release提交信息的编写
git提交信息需遵循Angular.js提出的规范（AngularJS Git Commit Message Conventions）
下面简单说明一下：
提交信息应由如下部分组成：
<type>(<scope>): <subject>
<body>
<footer>type- 必填，描述本次提交做了什么类型的变更，有如下几种类型：feat(feature): 提交新的功能fix(bug fix): 提交错误修复docs(documentation): 仅修改文档style(code style): 纠正代码风格refactor: 重构，既不是新功能或错误修复，也不是纠正代码风格test: 添加测试代码chore(maintain): 修改项目运作方式（构建流程、辅助开发工具等）
scope- 选填，描述本次提交修改的地方（比如：service, funcs, models等）subject- 必填，简短描述本次的变更- 应当使用现在时的祈使句，例如：“增加分组课程列表”，而不是“增加了分组课程列表接口”或“分组课程列表接口”
- 不需要首字母大写
- 不需要在最后加句号
body- 选填，描述变更的动机、变更前后对比等。- 前面必须有一个空行隔开
- 和
subject一样，使用祈使句
footer- 选填，一些额外信息，如“BREAKING CHANGE”、“Close #XXX”等信息，这块请详细阅读文档。- 前面必须有一个空行隔开
一些OK的例子：
chore: add git commit hook - commitlintfeat(service): add api - grouped course list
Close #88refactor: change generator functions to async functions
Because Node.js v8.9 is released as LTS version, async function is already steady to use.