随着 Vue.js 的迅速发展，目前搭建一个 Vue 项目的脚手架已经有不少选择了。比如可以使用官 方提供的
vue-cli。本文使用饿了么自己的构建工具 cooking 来完成这个任务。
首先，全局安装 cooking：
npm i cooking -g
新建项目文件夹：
mkdir mint-ui-example
进入项目文件夹，使用 cooking 进行构建：
cooking init vue
后的参数 vue 表示构建的是基于 Vue.js 的脚手架。
在构建过程中，cooking 需要如下一些参数：
其中“使用何种 CSS 预处理”这里选择的是 Salad，它是一套基于 PostCSS
的解决方案，有兴趣的同学可以了解一下。当然，你也可以选择其他的预处理器。
完成构建后的项目结构为：
接下来安装 Mint UI：
npm i mint-ui --save
1. 引入全部组件
如果你的项目会用到 Mint UI 里较多的组件，简单的方法就是把它们全部引入。此时需要在入口文件 main.js 中：import MintUI from 'mint-ui';
import 'mint-ui/lib/style.css';
Vue.use(MintUI);
2. 按需引入
如果你只需要使用某个组件，可以仅引入这个组件，Mint UI 能够保 证在代码打包时，与这个组件无关的文件不会出现在最终代码里。比如需要引入 Button 组件，则在 main.js 中：
import Button from 'mint-ui/lib/button';
import 'mint-ui/lib/button/style.css';
Vue.component(Button.name, Button);
可以看出，上面两种引入方法都要单独引入相应的 CSS 文件。这很不方便，尤其当你使用按需引入的方法引入多个组件时。为了避免这个问题，可以使用 babel-plugin-component 插件。首先当然是安装它：
npm i babel-plugin-component -D
然后在 .babelrc 中配置它：
{
"plugins": ["other-plugin", ["component", [
{ "libraryName": "mint-ui", "style": true }
]]]
}
这样上述两种引入方法就可以简化为：
import MintUI from 'mint-ui';
Vue.use(MintUI);
和
import Button from 'mint-ui/lib/button';
Vue.component(Button.name, Button);
插件会自动引入相应的 CSS 文件。
