好用的脚手架

React  --dva也是基本要会的

0  . 基于umi搭建React快速开发框架

基于umi搭建一个快速开发框架，react 应用框架。umi 以路由为基础的，支持类 next.js 的约定式路由，以及各种进阶的路由功能，并以此进行功能扩展，比如支持路由级的按需加载。
我们会在基于umi的基础上，开发出一个框架通用功能和业务功能
框架功能列表

• 全局layout
• 权限管理
• 封装列表增删改查
• 国际化
• 集成 g2 chart图表
• 集成 socket.io
• ....(后续补充)

业务功能

• 用户管理

1 . generator-z-react-cli
一款基于yeoman generator的脚手架：http://yeoman.io/ 1.首先基于npm在全局安装yeoman

npm install -g yo

其次在全局下安装脚手架

npm install -g generator-z-react-cli

最后生成项目

yo z-react-cli

目录结构：

my-app
  |-- index.html //启动页(主页)
  |-- build //构建目录，遵循发布系统规范
  |    |-- index.html   //静态页面
  |    |-- static       //资源文件发布到cdn,或发布到服务器  
  |
  |-- src                     //源码目录
  |    |--component           // 组件
  |    |      |-- common      //公共组件
  |    |      |-- temp        //父组件
  |    |--Config              //工具方法
  |    |--Image               //图片资源
  |    |--Redux               //react-redux数据状态管理
  |    |      |-- action.jsx  //派发数据的action
  |    |      |-- reducer.jsx //用于处理action的reducer
  |    |      |-- store.jsx   //数据管理器
  |    |-- Router           //路由
  |    |-- Style            //样式
  |    |-- template         //编译html模板
  |    |-- App.jsx          //js入口文件
  |
  |-- webpack.config.hot       //本地热编译
  |-- webpack.config.buildt    //编译发布测试环境
  |-- webpack.config.online    //编译发布线上环境
  |-- server.js
  |-- server_hot.js    //本地服务器启动文件
  |-- .babelrc  //ES6语言解析设置
  |-- package.json  //项目依赖项
  |-- 

安装依赖
报了一个错误

check python checking for Python executable "python2" in the PATH
gyp verb which failed Error: not found: python2
然后我们谷歌了一把

npm --add-python-to-path='true' --debug install --global windows-build-tools
npm install --global node-gyp

执行完成后，就没有报错，安装完成

npm run hot

项目整体编译部署，用于测试环境 npm run buildt

项目整体编译部署，用于线上环境 npm run online

这个特色就是可以解析JSX语法，可以解析ES6语法新特性，支持LESS、SCSS预处理器，编译完成自动打开浏览器，单独分离CSS样式文件，支持文件MD5戳，解决文件缓存问题，支持图片，图标字体等资源的编译，支持浏览器源码调试，实现组件级热更新，实现代码的热替换，浏览器实时刷新查看效果，区分开发环境和生产环境分离业务功能代码和公共依赖代码
很明显 这个脚手架集成了更加强大的功能

 

2. 

 

分享一个react单页应用脚手架

 

项目技术栈：react16+react-router4+antd-mobile2+mobx+axios+webpack4
项目github地址：https://github.com/longtoken/...
https://github.com/longtoken/...
项目演示：https://frontendfunny.site

现在比较流行的react脚手架应该是create-react-app，由Facebook官方开发。我们可以发现用create-react-app生成的项目的目录结构是比较简洁的：

需要我们自己根据实际的项目情况去创建对应的目录结构。网上关于react项目的目录结构也很多，那应该怎么合理地去组织我们的目录结构呢？

为了处理这个问题，我参考了一些react项目，然后把它们的优点结合起来，最后写了这个脚手架。

lt-self-cli是参照create-react-app的源码，去掉了其中关于下载模块的代码。用来生成我们的项目。

我们先看看这个项目的目录结构：

config目录里面存放的是webpack各个环境的编译文件
src目录里面是我们主要的开发文件
components目录存放的是containers引用的组件
containers目录存放的是react-router的路由组件
router目录存放的是项目的路由配置
static目录存放的是项目的静态文件
stores目录存放的是项目的mobx文件
utils目录里面是一些工具函数，目前写了一个axios的封装

使用npm run build进行编译，编译后的目录：

基本的生产配置都加上了，比如：
css文件使用了autoprefixer自动添加浏览器私有前缀并用mini-css-extract-plugin提取出来，使用link标签加载。
react-router做了按需加载，把新增路由添加到router配置即可。
webpack-bundle-analyzer用于查看打包之后各个模块的体积大小，在webpack生产配置文件build.js中的plugins里面加上new BundleAnalyzerPlugin()即可使用。

目前该项目使用的是mobx作为数据管理方案，mobx使用起来比redux简单，开发起来比较快，没有那么多的模板代码。
而redux用起来就麻烦了，除了要写一堆模板代码之外，还需要引入redux-thunk或者redux-saga去处理异步问题。然后为了优化性能还会引入immutable.js。
当然redux比起mobx是更加符合react的思想，而且现在多数项目都是react+redux的模式。所以后面会用redux再写一版

/****************

 

Vue

开发人员查看使用SPA，Webpack，身份验证，GraphQL，文档和测试的Vue开发人员的资源。

你准备开始一个重要的Vue项目吗？为了确保从坚实的基础开始，您可以使用模板（也就是样板，骨架，起动器或脚手架）而不是从npm init或开始vue init。

许多经验丰富的开发人员已经掌握了以开源模板的形式构建高质量Vue应用程序的智慧。这些模板包括最佳配置和项目结构，最佳第三方工具以及其他开发最佳实践。

与Vue CLI 3不同，Vue CLI 3针对灵活性进行了优化，因此模板具有观点。因此，重要的是选择符合您的开发理念并且具有开箱即用的大致相同的功能。

选择Vue模板的一些注意事项包括：

WebpackPWA具有身份验证的全栈好文档GraphQLTesting

有很多很棒的Vue.js模板，但是，在本文中，我们将看看包含新项目通常需要的关键功能的5个模板。

1.最适合Webpack

如果你需要一个可靠的Webpack设置，那么Vue CLI 2附带的Webpack模板就是最好的。在GitHub上有近7000颗星，Vue团队成员开发和维护，这个模板是创建高度优化的Webpack驱动的最好选择。

该模板利用了Webpack及其生态系统的许多前沿功能，包括热重载，CSS提取，linting以及单文件组件加载。它还包括针对开发，生产甚至测试而优化的独立配置。

作为Vue CLI 2的一部分，这是我们将要展示的最不具意见的模板之一，因此不包括服务器端渲染等许多理想的附加功能。

如果你发现Webpack模板有点过分，你可以试试它的小兄弟，Webpack Simple模板。

链接：https：//github.com/vuejs-templates/webpack

注意：即将退出测试版的Vue CLI版本3已经放弃了模板体系结构，转而使用插件，因此该模板在技术上将被弃用，但仍可从Vue CLI 3的旧版设置中获取。了解更多信息文章Vue CLI 3：用于前端开发的游戏改变者。

2.最适合PWA

您是否需要渐进式应用的卓越用户体验？Vue Starter是服务器呈现的PWA的SPA模板。它包括Vuex和Vue Router，配置为开箱即用的服务器端渲染（SSR）。

该项目已经考虑到确保您的部署项目从一开始就具有惊人的用户体验，如多语言支持的国际化和灯塔得分为90+，这要归功于SSR和服务工作者的缓存。

此外，使用vue-meta的文档头标签管理用于SEO，而SSR确保您的页面将被支持JavaScript内容的搜索引擎编入索引。

链接：https：//github.com/devCrossNet/vue-starter

演示：https：//vue-starter.herokuapp.com

如果您正在构建PWA，另一个不错的选择是VuePack，当然，还有Vue CLI 2 PWA模板。

3.最适合身份验证

如果您需要用户身份验证，请查看Vue Express Mongo Boilerplate。该项目提供了一个全栈“MEVN”Web应用程序样板，具有开箱即用的身份验证，包括用户注册和Google，Facebook，Twitter和GitHub的社交登录。

此模板遵循安全最佳实践，使用OAuth 2，Helmet（添加安全HTTP标头）和Express Validator进行输入清理。它还为多个远程日志记录服务提供支持。

对于数据库，提供了Mongo和Mongoose。repo还包括Docker配置，因此您可以轻松地启动实例。

链接：https：//github.com/icebob/vue-express-mongo-boilerplate

演示：http：//vemapp.moleculer.services/

提示：如果您更喜欢使用Laravel作为经过身份验证的Vue应用程序的后端，请尝试使用包含许多类似功能的Laravel Vue Boilerplate。

4.最适合文档

许多模板失败的原因是缺乏文档。Vue Enterprise Boilerplate不是这样。该项目由Chris Fritz创建和维护，他编写了大部分Vue文档，因此它组织良好并与Vue最佳实践保持一致。

关于这个模板的文档的好处在于它不仅解释了包含的内容，还解释了未包含的内容以及原因。例如，Chris解释了为什么没有TypeScript，Babel polyfill，Pug等，这在其他模板中很常见。

不要让这个应用程序的简洁默认页面欺骗你，它也有很多功能。我最喜欢的一些包括用于测试的模拟API，以及包含生成器，允许您自动添加单元测试来设置组件，视图和布局。

Vue Enterprise Boilerplate还支持Vue CLI 3，因此可以使用其他Vue CLI 3插件轻松扩展项目。

链接：https：//github.com/chrisvfritz/vue-enterprise-boilerplate

5.最适合GraphQL

GraphQL现在风靡一时，许多开发人员都希望在他们的新Vue项目中使用它。虽然Vue模板不多，但是如果你需要GraphQL，请务必查看Vuexpresso。

该项目使用GraphQL，Apollo和GraphiQL UI，这是一个用于浏览GraphQL的浏览器内部IDE。除此之外，您还可以获得配置良好的Webpack设置，Vuex和Vue路由器。您还可以获得Storybook，它允许交互式开发，测试和共享UI组件。

Vuexpresso唯一的缺点是它仍然相当新，所以一定要有时间彻底测试你用它构建的任何应用程序。

链接：https：//github.com/Ethaan/vuexpresso

另一个支持GraphQL的样板是Friendly Vue Starter，它还包括通过Critical提取的关键路径CSS。