webpack-ui
这篇文章主要介绍webpack结合mint-ui使用，mui的使用方法。以及如何将项目源码托管到oschina中（本地已经安装使用了github可以使用Git配置多个SSH-Key）。
1. vue中mint-ui的安装和使用
Github 仓储地址
Mint-UI官方文档
mint-ui中文文档
1.1 安装mint-ui
1
npm i mint-ui -S
1.2 使用mint-ui组件
1
2
3
4// 引入整个mint-ui包和相应样式,这是引入全部
import MintUI from 'mint-ui'; // 导入组件
import 'mint-ui/lib/style.css'; // 导入样式
Vue.use(MintUI);1.3 按需引入mint-ui，借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。
首先，安装 babel-plugin-component：
1
npm install babel-plugin-component -D
然后，将 .babelrc 修改为：
1
2
3
4
5
6
7
8
9
10
11{
"presets": [
["es2015", { "modules": false }]
],
"plugins": [["component", [
{
"libraryName": "mint-ui",
"style": true
}
]]]
}如果你只希望引入部分组件，比如 Button 和 Cell，那么需要在 main.js 中写入以下内容：
1
2
3
4
5
6import Vue from 'vue'
import { Button, Cell } from 'mint-ui'
import App from './App.vue'
Vue.component(Button.name, Button)
Vue.component(Cell.name, Cell)备注：按需引入可减少打包量，起到优化代码作用。
2. MUI
MUI 不同于 Mint-UI，MUI只是开发出来的一套好用的代码片段，里面提供了配套的样式、配套的HTML代码段，类似于 Bootstrap； 而 Mint-UI，是真正的组件库，是使用 Vue 技术封装出来的 成套的组件，可以无缝的和 VUE项目进行集成开发；
因此，从体验上来说， Mint-UI体验更好，因为这是别人帮我们开发好的现成的Vue组件；
从体验上来说， MUI和Bootstrap类似；
理论上，任何项目都可以使用 MUI 或 Bootstrap，但是，MInt-UI只适用于Vue项目；
注意： MUI 并不能使用 npm 去下载，需要自己手动从 github 上，下载现成的包，自己解压出来，然后手动拷贝到项目中使用；
使用方法：
1 | // 在src目录下创建lib目录，将下载解压好的mui-master中的dist更名为mui放到lib目录里 |
3. 将项目源码托管到oschina中
- 点击头像 -> 修改资料 -> SSH公钥 如何生成SSH公钥
- 创建自己的空仓储，使用
git config --global user.name "用户名"和git config --global user.email ***@**.com来全局配置提交时用户的名称和邮箱 - 使用
git init在本地初始化项目 - 使用
touch README.md和touch .gitignore来创建项目的说明文件和忽略文件； - 使用
git add .将所有文件托管到 git 中 - 使用
git commit -m "init project"将项目进行本地提交 - 使用
git remote add origin 仓储地址将本地项目和远程仓储连接，并使用origin做为远程仓储的别名 - 使用
git push -u origin master将本地代码push到仓储中
1 | # 使用gitee作为码云远程仓库的别名，因为github上远程操仓库是以origin作为别名的 |