在前端开发中，我们经常使用框架和模板来提高开发效率和代码质量。而 egg-born-template-front 就是一个基于 Egg.js 的前端类模板，其采用了一系列的前端技术，可以快速搭建企业级前端应用。
安装
使用 npm 安装 egg-born-template-front
npm install egg-born-template-front --save
创建项目
在命令行中使用脚手架工具创建项目：
node_modules/.bin/egg-born init myapp --template=front
其中 myapp 是项目名称，--template=front 指定使用 egg-born-template-front 。
目录结构
创建好的项目目录结构如下：
-- -------------------- ---- ------- - --- --- - ------------- - ------------- - -------- - ------------ --- --------- --- ------ - -------------------- - ------------ --- ------ - -------------- - ------------- - --------- - ------ - ----- - --------- - --- ---- - ------ --- -------------- --- ------------- --- ------------- --- --------- --- ------ --- ------------ --- ---------展开代码
可以看到，egg-born-template-front 项目与普通的 Egg.js 模板项目的主要区别在于 public 目录和 app/controller/front 目录。public 目录是前端资源目录，包括生成的 webpack 打包文件、静态资源和一些应用级别的 HTML 页面。而 app/controller/front 目录是整个应用的前端路由和控制器层。
前端路由
在 app/controller/front 目录中，我们可以直接定义前端路由：
-- -------------------- ---- ------- ---- -------- ----- ---------- - -------------------------- ----- --------------- ------- ---------- - ----- ------- - ----- - --- - - ----- ----- ----------------------------- - - -------------- - ----------------展开代码
这里我们定义了一个 index 方法，并使用 ctx.renderClient 方法来指定前端页面的入口 js 文件，即 index.js。
前端页面
我们可以在 public 目录中定义前端页面，可以是 HTML 页面，也可以是 Vue、React 等前端框架的单页应用。在 webpack 打包时会将这些页面打包成静态文件。
比如我们可以将 index.html 放置在 public 目录下：
-- -------------------- ---- ------- --------- ----- ----- ------------- ------ ----- ---------------- ----- --------------- ---------------------------- ------------------- -------------------------------------- ------- ------ ---- --------------- ------- -------------------------- ------- -------展开代码
其中，我们通过 script 标签引入了前端入口 js 文件 index.js。
前端模板引擎
相比于普通的前端项目，egg-born-template-front 集成了前端模板引擎，我们可以在前端页面中使用模板引擎来生成动态 HTML。
-- -------------------- ---- ------- --------- ----- ----- ------------ ---------- ------ ----- ---------------- ----- --------------- ---------------------------- ------------------- ----------------------------- ------- ------ --- --------- -- ------- -------------------------- ------- -------展开代码
这里我们使用了模板引擎的语法，通过 <%- this.body %> 来渲染动态内容。当然，这里的模板引擎是可配置的，如果你熟悉其他的前端模板引擎，可以自行切换。
Webpack 配置
egg-born-template-front 会自动集成 Webpack，你可以在项目目录下的 webpack.config.js 中配置 Webpack。当然，你也可以使用 egg-born-template-front 提供的默认配置：
-- -------------------- ---- ------- ---- -------- -------------- - - ------- ------ ------ - ------ -------------------------------- -- ------- - ----- ------------- -------------- ------ -- ------- - ------ - - ----- --------- ------- ---------------------- -- -- -- --展开代码
你可以在这里配置 entry、output 等 Webpack 的常用配置。
运行项目
使用 npm run dev 命令可以在开发模式下启动应用。在浏览器中访问 http://localhost:7001，即可看到默认生成的前端页面。如果你修改了前端代码，Webpack 会自动编译重新打包，你无需手动刷新浏览器。而如果你需要在生产环境下运行项目，可以使用 npm start 命令。
总结
使用 egg-born-template-front 可以快速搭建基于 Egg.js 的企业级前端应用，同时集成了前端路由、前端页面、前端模板引擎和 Webpack 等常用技术。通过上述教程，你可以快速了解 egg-born-template-front 的使用方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600567f381e8991b448e41a6
