什么是 generator-elm-mdl
generator-elm-mdl 是一个 npm 包，它的作用是生成基于 Elm 和 Material Design Lite（以下简称 MDL）的前端项目模板。
Elm 是一种函数式编程语言，它有很好的可伸缩性和可维护性，适合构建大型的 Web 应用程序。MDL 是一个 Google 开源的前端框架，它提供了一些 UI 组件和样式，使得前端开发变得更加容易和快速。
generator-elm-mdl 将这两者结合在一起，提供了一个快速搭建前端项目的方案。
安装 generator-elm-mdl
首先，确保您已经安装了 Node.js 和 npm。然后，在命令行中输入以下命令进行安装：
npm install -g generator-elm-mdl
这个命令将会在全局范围内安装 generator-elm-mdl。
使用 generator-elm-mdl
在您想要创建新项目的目录下打开命令行，并输入以下命令：
yo elm-mdl
然后，您将会被提示输入基本信息，例如项目名称、作者等。完成之后，generator-elm-mdl 将会自动下载并安装依赖，生成项目文件和文件夹结构。
项目文件夹结构
生成的项目文件和文件夹结构如下：
-- -------------------- ---- ------- -- --- - -- --- - - -- -------- - - -- -------- - - - -- -------- - -- --------- - -- ------- - -- --------- - -- ---------- - -- ------ - -- --- - - -- ----------- - - - -- -- - - -- ------ - - - -- ---------- - -- ---------- -- ------------ -- ---------
其中，src 目录包含了 Elm 文件；static 目录包含了 MDL 和 Elm 编译出来的 JavaScript 文件，以及 index.html 文件。
开发过程
开发环境
在进行开发之前，您需要了解以下工具和技术：
- Node.js 和 npm
- Elm
- Material Design Lite
- Git
安装完 generator-elm-mdl 后，您可以通过以下命令安装 Elm 和 Material Design Lite：
npm install -g elm material-design-lite
编译 Elm 文件
在 src 目录下有一个 Main.elm 文件，这是 Elm 代码的入口。在进行开发时，您需要在命令行中输入以下命令来编译 Elm 文件：
elm make src/Main.elm --output static/js/elm.js
这个命令会将 Main.elm 编译为静态 JavaScript 文件，并输出到 static/js/elm.js。
启动本地服务器
在进行开发时，您需要启动一个本地服务器来运行 web 应用程序，以便于预览和测试。您可以使用 Node.js 自带的 http-server，或者其他第三方的服务器软件。
在命令行中输入以下命令来启动 Node.js 自带的 http-server：
http-server static
这个命令会将 static 目录作为根目录，启动本地服务器并监听 8080 端口。您可以在浏览器中输入 http://localhost:8080 访问应用程序。
修改项目文件
在进行开发时，您需要修改 src 目录下的 Elm 文件和 static 目录下的 HTML、CSS 和 JavaScript 文件，以实现您想要的功能。
Git 版本控制
在进行开发时，您需要使用 Git 将项目管理起来。您需要使用 git init 命令初始化仓库，然后使用 git add 和 git commit 命令提交代码变更。
结语
通过使用 generator-elm-mdl，您可以快速搭建一个基于 Elm 和 Material Design Lite 的前端项目，并且可以轻松进行开发、预览和测试。这对于那些想要使用 Elm 和 MDL 技术栈构建前端应用程序的开发者来说是一个不错的选择。
示例代码请参见：https://github.com/chris290529/generator-elm-mdl-example
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005728381e8991b448e8b87