一、创建项目
用vue-cli脚手架创建一个新项目
二、确定好基于什么样ui去写
这里我选的是mint-ui，查了度娘，发现这个比较适合应用
三、开始引入mint-ui的样式
官方文档教了两种方式引入，一种全部引入，一种按需引入，全部引入当然没问题，不过我做的这个项目想按需引入，这样就不会使得文件大小变大。
(1) 先安装mint-ui npm i mint-ui -S
(2) 借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。npm install babel-plugin-component -D 然后在 .babelrc 添加为：
["component", [
{
"libraryName": "mint-ui",
"style": true
}
]]
完整的.babelrc文件：
{ "presets": [ ["env", { "modules": false, "targets": { "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] } }], "stage-2" ], "plugins": [ "transform-vue-jsx", "transform-runtime", ["component", [ { "libraryName": "mint-ui", "style": true } ]] ], }
这样就完成了按需引入需要的文件了，
(3) 接下来只要在main.js中引入需要的ui样式即可
import { DatetimePicker, Picker, Popup, Header, Button } from ‘mint-ui‘ Vue.component(DatetimePicker.name, DatetimePicker) Vue.component(Picker.name, Picker) Vue.component(Popup.name, Popup); Vue.component(Header.name, Header); Vue.component(Button.name, Button);
会有一种情况，就是引入提示框（Toast、Indicator ）和信息框（MessageBox）的时候会报错，一种需要在单个组件页面引入，另一种可以直接在main.js全局引用
全局引入 window.Toast= Toast window.Indicator= Indicator 单个组件页面引用 import { Indicator } from ‘mint-ui‘; import { MessageBox } from ‘mint-ui‘;
（目前只做到这里，明天再更）