| 1 | ### 项目结构
|
| 2 |
|
| 3 | - package.json 文件
|
| 4 | ```json
|
| 5 | {
|
| 6 | "scripts": {
|
| 7 | "eslint": "eslint ./src --color --fix",
|
| 8 | "w": "webpack --color --watch --env.NODE_ENV=dev --progress",
|
| 9 | "b": "webpack --color --env.NODE_ENV=dev --progress",
|
| 10 | "p": "webpack -p --color --env.NODE_ENV=prod --progress",
|
| 11 | "nodemon": "set NODE_ENV=dev&& nodemon src/server/index.js --config nodemonrc.json",
|
| 12 | },
|
| 13 | "dependencies": {
|
| 14 | "antd": "^2.13.3",
|
| 15 | "babel-plugin-import": "^1.4.0",
|
| 16 | "babel-plugin-transform-decorators-legacy": "^1.3.4",
|
| 17 | "babel-preset-react": "^6.24.1",
|
| 18 | "babel-preset-stage-0": "^6.24.1",
|
| 19 | "body-parser": "^1.17.2",
|
| 20 | "chai": "^4.1.2",
|
| 21 | "clean-webpack-plugin": "^0.1.16",
|
| 22 | "codemirror": "^5.31.0",
|
| 23 | "cross-env": "^5.0.5",
|
| 24 | "css-loader": "^0.28.4",
|
| 25 | "ejs": "^2.5.7",
|
| 26 | "extract-loader": "^0.1.0",
|
| 27 | "extract-text-webpack-plugin": "^3.0.0",
|
| 28 | "file-loader": "^0.11.2",
|
| 29 | "github": "^12.0.1",
|
| 30 | "history": "^4.6.3",
|
| 31 | "html-webpack-plugin": "^2.29.0",
|
| 32 | "http": "^0.0.0",
|
| 33 | "json-loader": "^0.5.7",
|
| 34 | "less": "^2.7.2",
|
| 35 | "less-loader": "^4.0.5",
|
| 36 | "lodash": "^4.17.4",
|
| 37 | "mobx": "^3.3.0",
|
| 38 | "mobx-react": "^4.3.2",
|
| 39 | "mocha": "^4.0.1",
|
| 40 | "moment-timezone": "^0.5.14",
|
| 41 | "mongodb": "^2.2.33",
|
| 42 | "mongoose": "^4.11.5",
|
| 43 | "path": "^0.12.7",
|
| 44 | "prismjs": "^1.8.3",
|
| 45 | "react": "^16.1.1",
|
| 46 | "react-dom": "^16.1.1",
|
| 47 | "react-router": "^4.2.0",
|
| 48 | "react-router-dom": "^4.2.2",
|
| 49 | "request-promise": "^4.2.2",
|
| 50 | "style-loader": "^0.18.2",
|
| 51 | "webpack": "^3.8.1",
|
| 52 | "webpack-manifest-plugin": "^1.3.1",
|
| 53 | "webpack-merge": "^4.1.0",
|
| 54 | "yarn": "^0.27.5"
|
| 55 | },
|
| 56 | "devDependencies": {
|
| 57 | "babel-core": "^6.25.0",
|
| 58 | "babel-loader": "^7.1.1",
|
| 59 | "babel-preset-env": "^1.6.0"
|
| 60 | }
|
| 61 | }
|
| 62 | ```
|
| 63 | - 项目目录结构
|
| 64 | ```
|
| 65 | |-- undefined
|
| 66 | |-- .babelrc
|
| 67 | |-- .eslintrc.js
|
| 68 | |-- .gitignore
|
| 69 | |-- .npmrc
|
| 70 | |-- ecosystem.config.js
|
| 71 | |-- favicon.png
|
| 72 | |-- nodemonrc.json
|
| 73 | |-- package.json
|
| 74 | |-- README.md
|
| 75 | |-- webpack.config.js
|
| 76 | |-- assets
|
| 77 | | |-- font
|
| 78 | | |-- images
|
| 79 | | |-- media
|
| 80 | | |-- template
|
| 81 | |-- build
|
| 82 | | |-- webpack.dev.config.js
|
| 83 | | |-- webpack.prod.config.js
|
| 84 | |-- config
|
| 85 | | |-- client.js
|
| 86 | | |-- project.js
|
| 87 | | |-- server.js
|
| 88 | |-- dist
|
| 89 | | |-- index.html
|
| 90 | |-- src
|
| 91 | | |-- client
|
| 92 | | | |-- index.jsx
|
| 93 | | | |-- common
|
| 94 | | | | |-- commonStyle.less
|
| 95 | | | |-- components
|
| 96 | | | | |-- Content.js
|
| 97 | | | | |-- body.js
|
| 98 | | | | |-- Header.js
|
| 99 | | | | |-- Sider.js
|
| 100 | | | |-- features
|
| 101 | | | | |-- Trigger.js
|
| 102 | | | |-- less
|
| 103 | | | | |-- body.less
|
| 104 | | | | |-- content.less
|
| 105 | | | | |-- header.less
|
| 106 | | | | |-- index.less
|
| 107 | | | | |-- sider.less
|
| 108 | | | |-- store
|
| 109 | | | |-- index.js
|
| 110 | | |-- server
|
| 111 | | |-- index.js
|
| 112 | |-- test
|
| 113 | |-- demo.test.js
|
| 114 |
|
| 115 | ```
|
| 116 |
|
| 117 | |
| 118 | ### 疑问
|
| 119 | - 目前来说，前端新鲜工具层出不穷，从less/css/study
|
| 120 | 
|
| 121 | 到底学习的方法。。
|
| 122 | 1.看官方文档？
|
| 123 | 2.看博客？
|
| 124 | 二者所说的不一致？要怎么做？
|
| 125 | 怎么看只看中文博客 求速成？
|
| 126 |
|
| 127 | less的学习
|
| 128 | http://www.css88.com/doc/less/usage/index.html#command-line-usage-installing-for-node-development-
|
| 129 | 官方推荐编译器 -- lessc vs koala ？？？
|
| 130 | 具体项目中到底用哪一款？
|
| 131 | 我认为要以官方文档为标准进行项目开发，
|
| 132 | 1.用的人多，遇到bug网上搜也容易搜到
|
| 133 | 2.有官方维护 --> |
| \ | No newline at end of file |