在前端开发中，快捷地搭建界面是非常重要的一部分，而使用成熟的 UI 框架就可以省去很多开发时间。MUI 就是一款优秀的移动端 UI 框架，而 mui-create 则是一个基于 MUI 创建项目的 npm 包，让使用者可以更加便利地搭建 MUI 应用程序。
mui-create 简介
mui-create 是一个快速创建基于 MUI 框架的项目结构的 npm 包，它能够快速初始化整个项目，并提供了一些编译、打包等工具来加速项目开发，而且还提供了一些模板让开发者可以快速选择。使用 mui-create 可以帮助开发者避免一些重复性的工作，极大地提升了开发效率。
安装 mui-create
使用 npm 可以很方便地安装 mui-create：
--- ------- -- ----------
这里使用 -g 参数是为了全局安装 mui-create，可以使用命令行在任意地方调用。
快速创建 MUI 项目
执行如下代码即可快速创建 MUI 项目：
---------- -----
其中 myapp 是项目名称，此命令会在当前目录下创建一个以 myapp 为名称的文件夹，里面包含了 MUI 项目的基本结构：
----- -- ------ - -- -------- - -- ----------------- - -- ------------- - -- ------------- - -- -------- - -- ------------------ - -- -------------------- - -- ------------------- - -- -------------------- -- ------- - -- ---------- - -- -------- - -- ----------- -- ------------- -- ---- - -- ------- - -- ------- - - -- ------- - - -- ------- - - -- ---------- - -- ----------- - - -- -------------- - - -- -------- - -- ------- - - -- -------- - -- ------ - - -- -------- - -- ------- -- ------- -- -------- -- ------------- -- ------------- -- ------------ -- ---------- -- ---------- -- ------------
可以看到创建的项目结构非常齐全，而且包含了基本的 Webpack 配置以及一些初始模板文件。
编译、运行 MUI 项目
在项目目录下执行如下代码即可完成项目的编译、运行：
-- ----- - ------ --- ------- - ----------- --- --- --- - ------
之后即可在浏览器中通过如下地址访问项目：
---------------------
支持自定义
除了上面所述的命令外，使用 mui-create 还支持一些自定义的命令，使我们能够灵活地定制项目的结构和一些功能。
-c 或 --config
指定一个配置文件来创建项目，这只需要将你的配置文件作为第二个参数，例如：
---------- ----- -- ---
这里的 -c vue 指定的就是使用 vue 模板来创建项目。
-v 或 --version
查看 mui-create 的版本：
---------- --
-h 或 --help
查看帮助：
---------- --
MUI 模板的使用
在 MUI 中，mui-create 集成了多个模板，可以通过配置文件以及自定义命令来使用。这里介绍一下如何配置模板及使用模板。
自定义模板
在创建项目时可以使用自定义模板，只需在自定义配置文件中添加模板即可。首先需要在本地或者云端上创建一个可用的模板并配置好模板的结构和内容（使用 Vue+Webpack），以 GitHub 上的 muikit/mui-template 为例：
----------- -- ------ - -- -------- - -- ----------------- - -- ------------- - -- ------------- - -- -------- - -- ------------------ - -- -------------------- - -- ------------------- - -- -------------------- -- ------- - -- ---------- - -- -------- - -- ----------- -- ------------- -- ---- - -- ------- - -- ----------- - - -- -------------- - - -- -------- - -- ------- - - -- -------- - -- ------- -- ------- -- -------- -- ------------- -- ------------- -- ------------ -- ---------- -- ---------- -- ------------
然后把 my-template 目录放在 /usr/local/lib/node_modules/mui-create/templates/ 目录下，这里的 /usr/local/lib/node_modules/ 是 mui-create 的全局目录（利用 mui-create -g 命令全局安装看到 /usr/local/lib/node_modules/mui-create 这个地址），templates/ 为模板存放目录，之后即可通过以下命令使用自定义模板：
---------- ----- -- -----------
内置模板
除了自定义模板，mui-create 还内置了多个常用的 MUI 模板，包括有：
- mui vue
- mui react
- mui single-page
你只需要在执行创建项目的命令时加上相应的参数即可。假如你需要创建一个基于 Vue 的 MUI 项目，则可以执行如下命令：
---------- ----- -- ---
使用命令来出现帮助
在命令行输入以下命令即可获得 mui-create 的帮助文档：
---------- --
由此可知，mui-create 有多个基本命令，如 init、create、add 等，这些命令可以让我们在开发过程中更加便捷。同时，mui-create 支持使用自定义配置文件或内置模板等方式创建项目，确实在前端 UI 开发中的效率提升。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066b6151ab1864dac672f7