--- order: 1 title: 开始使用 type: 入门 --- # 开始使用 ### 快速开始 ``` 1. **初始化环境配置** 第一次运行需要配置环境. 2. **克隆项目** `git clone svn://182.92.218.9:3691/project/JSJG/Server/dev/front/branches/bbdweb`. 3. **运行安装命令** `npm install or yarn install`. 4. **启动项目** `npm start`. 5. **环境配置** 需要 node4.0 以上请自行配置、直接最新版也可以只是一个环境 ``` ### 目录结构 ```bash ├── mock # 本地模拟数据 ├── public │   └── favicon.ico # Favicon ├── src │   ├── assets # 本地静态资源 │   ├── common # 应用公用配置，如导航信息 │   ├── components # 业务通用组件 │   ├── constants # 常量文件 │   ├── e2e # 集成测试用例 │   ├── layouts # 通用布局 │   ├── models # dva model │   ├── routes # 业务页面入口和常用模板 │   ├── services # 后台接口服务 │   ├── utils # 工具库 │   ├── theme.js # 主题配置 │   ├── index.ejs # HTML 入口模板 │   ├── index.js # 应用入口 │   ├── rollbar.js # 滚动条配置 │   ├── index.less # 全局样式 │   └── router.js # 路由入口 ├── tests # 测试工具 ├── README.md # 说明文档 ├── .editorconfig # ide ├── .eslintrc # 代码规范 ├── .gitignore # git配置 ├── .roadhogrc # dva配置 ├── jsconfig # js配置和lint配合用 ├── .roadhogrc.mock # mock数据 ├── .stylelintrc # 样试lint └── package.json # 包管理 ``` ## 技术点 框加用到的技术点就是下面提供的: | **标题** | **描述** |**了解更多**| |----------|-------|---| | [React](https://facebook.github.io/react/) | 快速，可组合的客户端组件. | [Pluralsight Course](https://www.pluralsight.com/courses/react-flux-building-applications) | | [Redux](http://redux.js.org) | 实施单向数据流和不可变的热可重新加载存储 [Facebook's Flux](https://facebook.github.io/flux/docs/overview.html).| [Getting Started with Redux](https://egghead.io/courses/getting-started-with-redux), [Building React Applications with Idiomatic Redux](https://egghead.io/courses/building-react-applications-with-idiomatic-redux), [Pluralsight Course](http://www.pluralsight.com/courses/react-redux-react-router-es6)| | [React Router](https://github.com/reactjs/react-router) | react前端路由解决方案 | [Pluralsight Course](https://www.pluralsight.com/courses/react-flux-building-applications) | | [Babel](http://babeljs.io) | 将ES6编译为ES5,编写代码可以用最新的javascript语法. | [ES6 REPL](https://babeljs.io/repl/), [ES6 vs ES5](http://es6-features.org), [ES6 Katas](http://es6katas.org), [Pluralsight course](https://www.pluralsight.com/courses/javascript-fundamentals-es6) | | [Webpack](https://webpack.js.org) | 将npm包和我们的JS捆绑到一个文件中。 包括通过热重新加载 [react-transform-hmr](https://www.npmjs.com/package/react-transform-hmr). | [Quick Webpack How-to](https://github.com/petehunt/webpack-howto) [Pluralsight Course](https://www.pluralsight.com/courses/webpack-fundamentals)| | [Browsersync](https://www.browsersync.io/) | 轻量级开发HTTP服务器，支持多设备上的同步测试和调试. | [Intro vid](https://www.youtube.com/watch?time_continue=1&v=heNWfzc7ufQ)| | [Jest](https://facebook.github.io/jest/) | 自动化测试，内置预期断言和用于DOM测试的酶，无需浏览器使用Node. | [Pluralsight Course](https://www.pluralsight.com/courses/testing-javascript) | | [TrackJS](https://trackjs.com/) | JavaScript错误跟踪. | [Free trial](https://my.trackjs.com/signup)| | [ESLint](http://eslint.org/)| 检查JS。 报告语法和样式问题。 使用eslint-plugin-for额外的反应特定的linting规则 [eslint-plugin-react](https://github.com/yannickcr/eslint-plugin-react) 或额外的React特定的linting规则. | | | [SASS](http://sass-lang.com/) | C用变量，函数等编译CSS样式. | [Pluralsight Course](https://www.pluralsight.com/courses/better-css)| | [PostCSS](https://github.com/postcss/postcss) | 用JS插件转换样式。 用于autoprefixer CSS | | [Editor Config](http://editorconfig.org) | 强化一致的编辑器设置（空格与制表符等）. | [IDE Plugins](http://editorconfig.org/#download) | | [npm Scripts](https://docs.npmjs.com/misc/scripts)| 所有这些都集中在一个方便的自动化构建中. | [Pluralsight course](https://www.pluralsight.com/courses/npm-build-tool-introduction), [Why not Gulp?](https://medium.com/@housecor/why-i-left-gulp-and-grunt-for-npm-scripts-3d6853dd22b8#.vtaziro8n) | | [store](https://github.com/marcuswestin/store.js)| 针对整个网络使用的所有用例的跨浏览器存储. | | ---