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