Skip to content

Commit

Permalink
修改架构
Browse files Browse the repository at this point in the history
  • Loading branch information
zkeyword committed May 14, 2017
1 parent eee1378 commit c7401e4
Show file tree
Hide file tree
Showing 122 changed files with 8,077 additions and 2,107 deletions.
104 changes: 61 additions & 43 deletions README.md
100644 → 100755
Original file line number Diff line number Diff line change
@@ -1,43 +1,61 @@
# react手脚架

> 相关技术栈
- react
- redux
- stylus
- eslint

## 目录结构

/ 根目录
|__ build webpack配置
|__ config 环境配置
|__ dist 生成结果
|__ src 源文件
| |__ assets 静态目录
| |__ components 公用组件
| |__ redux redux状态管理
| |__ routers 路由管理
| |__ services 接口管理
| |__ utils 工具类
| |__ views 页面路径
| |__ app.jsx jsx入口
| |__ main.js 主文文件
|__ index.html 应用入口文件
|__ package.json npm依赖管理

## 使用

```bash
# 依赖安装
npm install

# 开发模式,默认端口:8080
npm run dev

# 打包
npm run build

# eslint检测
npm run lint
```
# react手脚架

## 相关技术栈

- react
- redux
- stylus
- eslint
- webpack2
- antd

## 目录结构

/ 根目录
|__ build # webpack配置
|__ config # 环境配置
|__ dist # 生成结果
├── src # 程序源文件
│ ├── main.js # 程序启动和渲染
│ ├── components # 全局可复用的表现组件(Presentational Components)
│ ├── containers # 全局可复用的容器组件
│ ├── layouts # 主页结构
│ ├── static # 静态文件(不要到处imported源文件)
│ ├── styles # 程序样式
│ ├── store # Redux指定块
│ │ ├── createStore.js # 创建和使用redux store
│ │ └── reducers.js # Reducer注册和注入
│ └── routes # 主路由和异步分割点
│ ├── index.js # 用store启动主程序路由
│ └── Home # 不规则路由
│ ├── index.js # 路由定义和代码异步分割
│ ├── assets # 组件引入的静态资源
│ ├── components # 直观React组件
│ ├── container # 连接actions和store
│ └── modules # reducers/constants/actions的集合
├── index.html # 应用入口文件
└──package.json # npm依赖管理

## 使用

```bash
# 依赖安装
npm install

# 开发模式,默认端口:8080
npm run dev

# 打包
npm run build

# eslint检测
npm run lint
```

## 代码处理流程

main.js => router => views => redux

action => types => reducers => store => connect => views

组件 -->action--> thunk中间件-->ajax请求-->reducer-->store->组件
Empty file modified build/build.js
100644 → 100755
Empty file.
Empty file modified build/check-versions.js
100644 → 100755
Empty file.
Empty file modified build/dev-client.js
100644 → 100755
Empty file.
4 changes: 2 additions & 2 deletions build/dev-server.js
100644 → 100755
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ const devMiddleware = require('webpack-dev-middleware')(compiler, {
});

const hotMiddleware = require('webpack-hot-middleware')(compiler, {
log: () => {}
log: () => { }
});
// force page reload when html-webpack-plugin template changes
compiler.plugin('compilation', function (compilation) {
Expand Down Expand Up @@ -76,6 +76,6 @@ module.exports = app.listen(port, function (err) {

// when env is testing, don't need open it
if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
opn(uri)
// opn(uri)
};
});
Empty file modified build/postcss.config.js
100644 → 100755
Empty file.
Empty file modified build/utils.js
100644 → 100755
Empty file.
33 changes: 32 additions & 1 deletion build/webpack.base.conf.js
100644 → 100755
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,38 @@ module.exports = {
}
},
{
test: /\.(styl|css)$/,
test: /\.(css)?$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: _ => [
require('autoprefixer')({ browsers: ['last 20 versions'] })
]
}
}
]
},
{
test: /\.(less)?$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: _ => [
require('autoprefixer')({ browsers: ['last 20 versions'] })
]
}
},
'less-loader'
]
},
{
test: /\.(styl)$/,
exclude: /node_modules/,
use: [
'style-loader',
Expand Down
Empty file modified build/webpack.dev.conf.js
100644 → 100755
Empty file.
Empty file modified build/webpack.prod.conf.js
100644 → 100755
Empty file.
12 changes: 6 additions & 6 deletions config/dev.env.js
100644 → 100755
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
const merge = require('webpack-merge');
const prodEnv = require('./prod.env');

module.exports = merge(prodEnv, {
NODE_ENV: '"development"'
});
const merge = require('webpack-merge');
const prodEnv = require('./prod.env');

module.exports = merge(prodEnv, {
NODE_ENV: '"development"'
});
84 changes: 46 additions & 38 deletions config/index.js
100644 → 100755
Original file line number Diff line number Diff line change
@@ -1,38 +1,46 @@
// see http://vuejs-templates.github.io/webpack for documentation.
const path = require('path');

module.exports = {
build: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
productionSourceMap: true,
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
},
dev: {
env: require('./dev.env'),
port: 8090,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
// CSS Sourcemaps off by default because relative paths are "buggy"
// with this option, according to the CSS-Loader README
// (https://github.com/webpack/css-loader#sourcemaps)
// In our experience, they generally work as expected,
// just be aware of this issue when enabling this option.
cssSourceMap: false
}
};
// see http://vuejs-templates.github.io/webpack for documentation.
const path = require('path');

module.exports = {
build: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
productionSourceMap: true,
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
},
dev: {
env: require('./dev.env'),
port: 8091,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
// '/api': {
// target: 'http://192.168.220.70:8080/api/',
// changeOrigin: true,
// pathRewrite: {
// '^/api': ''
// }
// }
},
// CSS Sourcemaps off by default because relative paths are "buggy"
// with this option, according to the CSS-Loader README
// (https://github.com/webpack/css-loader#sourcemaps)
// In our experience, they generally work as expected,
// just be aware of this issue when enabling this option.
cssSourceMap: false
}
};
6 changes: 3 additions & 3 deletions config/prod.env.js
100644 → 100755
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
module.exports = {
NODE_ENV: '"production"'
};
module.exports = {
NODE_ENV: '"production"'
};
26 changes: 13 additions & 13 deletions index.html
100644 → 100755
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>xx</title>
</head>

<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>

<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>账户平台</title>
</head>

<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>

</html>
18 changes: 14 additions & 4 deletions package.json
100644 → 100755
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"name": "xx",
"name": "zpx-react",
"version": "1.0.0",
"description": "x",
"main": "src/main.js",
Expand All @@ -9,19 +9,19 @@
"node",
"spa"
],
"author": "xx",
"author": "acc-react",
"license": "MIT",
"scripts": {
"dev": "node build/dev-server",
"build": "node build/build.js",
"lint": "eslint --ext .js,.jsx src"
},
"devDependencies": {
"antd": "^2.8.1",
"autoprefixer": "^6.7.7",
"babel-core": "^6.22.1",
"babel-eslint": "^7.1.1",
"babel-loader": "^6.3.2",
"babel-plugin-import": "^1.1.1",
"babel-plugin-transform-class-properties": "^6.23.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-runtime": "^6.22.0",
Expand Down Expand Up @@ -50,6 +50,8 @@
"function-bind": "^1.1.0",
"html-webpack-plugin": "^2.28.0",
"http-proxy-middleware": "^0.17.4",
"less": "^2.7.2",
"less-loader": "^4.0.3",
"opn": "^4.0.2",
"optimize-css-assets-webpack-plugin": "^1.3.0",
"ora": "^1.1.0",
Expand All @@ -68,20 +70,28 @@
"webpack-merge": "^2.6.1"
},
"dependencies": {
"antd": "^2.8.1",
"axios": "^0.15.3",
"element-react": "^1.0.0-beta.4",
"element-theme-default": "^1.3.1",
"postcss-pxtorem": "^4.0.0",
"prop-types": "^15.5.8",
"react": "^15.4.2",
"react-addons-css-transition-group": "^15.5.2",
"react-dom": "^15.4.2",
"react-logger": "^1.1.0",
"react-redux": "^5.0.2",
"react-router": "^3.0.2",
"react-router-redux": "^4.0.8",
"react-spinkit": "^2.1.2",
"react-thunk": "^1.0.0",
"redux": "^3.6.0",
"redux-devtools": "^3.3.2",
"redux-devtools-dock-monitor": "^1.1.1",
"redux-devtools-log-monitor": "^1.2.0",
"redux-logger": "^3.0.0",
"redux-thunk": "^2.2.0"
"redux-thunk": "^2.2.0",
"why-did-you-update": "0.0.8"
},
"engines": {
"node": ">= 4.0.0",
Expand Down
20 changes: 0 additions & 20 deletions src/App.jsx

This file was deleted.

2 changes: 0 additions & 2 deletions src/assets/README.md

This file was deleted.

7 changes: 7 additions & 0 deletions src/assets/icomoon/Read Me.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
Open *demo.html* to see a list of all the glyphs in your font along with their codes/ligatures.

To use the generated font in desktop programs, you can install the TTF font. In order to copy the character associated with each icon, refer to the text box at the bottom right corner of each glyph in demo.html. The character inside this text box may be invisible; but it can still be copied. See this guide for more info: https://icomoon.io/#docs/local-fonts

You won't need any of the files located under the *demo-files* directory when including the generated font in your own projects.

You can import *selection.json* back to the IcoMoon app using the *Import Icons* button (or via Main Menu → Manage Projects) to retrieve your icon selection.
Loading

0 comments on commit c7401e4

Please sign in to comment.