> For the complete documentation index, see [llms.txt](https://zpliu.gitbook.io/booknote/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://zpliu.gitbook.io/booknote/vue/vue-xiang-mu/01-ye-mian-bu-ju.md).

# 使用Mint UI组件库

## 1.使用

* 下载组件

  `npm i mint-ui`
* 在main.js中进行挂载

  ```javascript
  import Vue from 'vue'
  import MintUI from 'mint-ui'
  import 'mint-ui/lib/style.css'
  import App from './App.vue'

  Vue.use(MintUI)
  ```

  **1.2 按照需求使用组件**

  * 下载对应的插件并且修改vue-lazyload中**.babelrc**文件内容

    ```javascript
    npm install babel-plugin-component -D
    ```
  * 将组件注册为Vue中全局组件

    ```javascript
    import {Header} from 'mint-ui' 

    import 'mint-ui/lib/style.css' //自动去node_modules下找
    Vue.component(Header.name,Header)
    ```

> 第一次按照官方文档使用时就报错

`ReferenceError: Unknown plugin "external-helpers" specified in "node_modules/vue-lazyload/.babelrc"`

按照官网的去配置了`.babelrc`文件

```javascript
{
  "presets": [
    ["es2015", { "modules": false }]
  ],
  "plugins": [["component", [
    {
      "libraryName": "mint-ui",
      "style": true
    }
  ]]]
}
```

## 2.项目整体结构

```bash
./
|-- dist
|   `-- bundle.js
|-- index.html
|-- src
|   |-- components
|   |   |-- app.vue
|   |   |-- header.vue
|   |   |-- index.vue
|   |   `-- login.vue
|   |-- css
|   |   |-- index.css
|   |   `-- mui
|   |-- img
|   |   `-- bg2.jpg
|   |-- main.js
|   `-- routes.js
`-- webpack.config.js
```

* webpack.config.js 配置webpack打包配置信息
* index.html 用于显示页面
* src目录下用于存放打包的源代码
  * components 目录中存放vue组件
  * css 存放一些插件的样式，或者自定义的一些样式
  * img是资源目录
  * min.js是webpack的程序入口
  * routes.js用于管理vue的路由
  * 最后将所有文件打包成dist中的bundle.js文件

## 3.关于webpack的配置

```javascript
const path=require("path") //node.js中用于识别路径的包

const VueLoaderPlugin = require('vue-loader/lib/plugin') //用于打包Vue组件的插件

module.exports={    
    mode:'development', //设置开发模式
    entry: path.join(__dirname,"src/main.js"), //入口文件

    output:{
        path:path.join(__dirname,"dist"), //出口文件和文件名
        filename:"bundle.js"
    },
    devServer:{ //使用webpack-dev-server进行实时监控
        port:8081, //展示的端口
        host:'0.0.0.0', //外部主机可以访问
        disableHostCheck: true, //避免安全检查
        contentBase:path.join(__dirname,"/"), //设置展示的初始路径
        hot:true //启用热重载
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                {loader:'vue-style-loader'}, //定义css文件的处理规则，这里具有固定的加载顺序
                {loader:'css-loader'}
                ]
            },
            {test:/\.(jpg|png|gif|jpeg)$/,use: 'url-loader?limit=102400&name=[name].[ext]'}, //处理url类型资源和图片的base64压缩处理
            {test:/\.vue$/,use:'vue-loader'}, //
            {test:/\.js$/,use:'babel-loader'}
        ]
    },
    plugins:[
        new VueLoaderPlugin() //vue打包必须
    ],
    resolve:{
        alias:{
            vue$:"vue/dist/vue.js" //处理在main中引用vue的问题
        }
    }
}
```

## 4.页面组件化

* main.js中作为程序入口引入app.js组件
* app.js组件中将页面组件化和一些逻辑的处理
* index.html 用于渲染对应的vue实例对象

### 4.1 main.js程序入口

```javascript
//Vue 入口文件
import Vue from 'vue'

import {Header, Tabbar, TabItem} from 'mint-ui' 

import 'mint-ui/lib/style.css' //自动去node_modules下找

//app组件文件
import appEntry from './components/app.vue'

Vue.component(Header.name,Header)
Vue.component(Tabbar.name,Tabbar)
Vue.component(TabItem.name,TabItem)

//替换html模板x 
var template=`
<App></App>
`

//将app组件挂载到实例对象中
var app=new Vue({
    el:"#app",
    template:template,
    components: {
        'App':appEntry
    }
})
```

### 4.2 app.js页面组件化

```javascript
<template>
    <div class="app-container">
    <!-- 顶部内容 mint-ui组件 -->
    <mt-header fixed :title="header"></mt-header> 
    <router-view></router-view>
    <!-- 底部内容 -->
    <mt-tabbar v-model="selected">
      <mt-tab-item v-for="item in data1" :id="item.content" :key="item.id" >
        <img slot="icon" >
        {{item.content}}
      </mt-tab-item>
    </mt-tabbar>
    </div>
</template>
<script>
    export default {
        data:function(){
            return{
                header:"hello Vue!",
                data1:[{
                    id:0,
                    content:"外卖"
                },{
                    id:1,
                    content:"订单"
                },{
                    id:2,
                    content:"发现"
                },{
                    id:3,
                    content:"我的"
                }
                ],
                selected:''
            }
        }
    }    
</script>
<style scoped>

</style>
```

### 4.4 index.html 渲染

```markup
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>webpack</title>
    <link rel="stylesheet" href="">
</head>
<body>
    <div id="app">    
    </div>
</body>
<script type="text/javascript" src="/bundle.js"></script>
</html>
```

## 5 使用git将项目进行保存

* README.md说明文件
* License开源协议
* **.gitignore**忽略掉要上传的文件或者目录

### 5.1 仓库初始化

`git init`

### 5.2 根据.gitignore规则添加文件到本地git

`git add .`

`git commit -m 'Vue Test'`

### 5.3 创建云端仓库

获得对应的ssh或者https链接

### 5.4 与云仓库关联

`git remote add origin git@github.com:zpliu1126/VueTest.git`

### 5.5推送文件到云仓库

`git push origin master`

**master**为对应的分支

### 5.6 将云端代码更新到本地

`git pull origin 分支名`

​