在现代化的前端开发中，快速地创建一个具备基本配置的项目是关键的一步。这是因为前端项目常常包括一系列的组件、工具集和设置，而且这些设置常常是相似的。为了提高效率，我们可以使用一个叫做 create-evergreen-app 的 npm 包，它可以快速地创建 react 项目以及一些基本的组件库和样式文件。
安装 create-evergreen-app
首先需要在本地环境下安装 Node.js 和 npm。安装完成后，可以在终端中使用以下命令来安装 create-evergreen-app：
npm install -g create-evergreen-app
也可以使用 yarn 代替 npm：
yarn global add create-evergreen-app
创建新项目
使用以下命令在当前目录下创建一个新的 react 项目：
create-evergreen-app my-app
其中，my-app 为项目名称。创建完成后，进入新创建的项目目录：
cd my-app
目录结构如下：
-- -------------------- ---- -------
-------
-------------
-------
----------
-----------
----
-------
------
-----------
---------
--------使用以下命令启动开发服务器：
npm start
或者使用 yarn：
yarn start
在浏览器中打开 http://localhost:3000 可以查看项目的运行状态。
自定义样式
create-evergreen-app 默认已经导入了 evergreen 库的基本样式，但是可以自定义完全属于自己的样式表。此时可以编辑 src/App.css 文件。
例如，编辑样式表代码如下：
.App {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
color: #333;
}自定义组件
使用 create-evergreen-app 创建的项目也允许自定义组件。例如，我们创建一个新组件 MyComponent，并在主应用中载入该组件。
首先，使用以下命令创建一个新的组件：
npm run generate MyComponent
或者使用 yarn：
yarn generate MyComponent
创建完成后，继续使用以下命令编译项目：
npm start
或者使用 yarn：
yarn start
然后，编辑 src/App.js，在文件中导入 MyComponent 并添加以下代码：
-- -------------------- ---- -------
------ ----------- ---- ----------------
-------- ----- -
------ -
---- ----------------
---------- -----------
------------ --
------
--
-此时刷新浏览器即可看到添加的 MyComponent 组件。
发布项目
使用以下命令可以打包应用程序：
npm run build
或者使用 yarn：
yarn build
在 build 目录中生成的文件可用于部署到生产环境。
结论
create-evergreen-app 可以快速地创建一个基本的 react 项目，并且自带了一些常见的组件库和样式文件。在此基础上，我们还可以通过自定义组件和样式来二次开发。此方式大大提高了开发效率，同时还能够自由发挥。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d530d0927023822aa1