1.首先准备一个vue的脚手架，安装好后，如下图所示。
image
图中node_modules文件夹是放各种vue没有的第三方模块的，mint-ui也不是vue自带的，所以也需要下载准备好。
我们写的所有组件，都放在src当中。
2.下载mint-ui
在该项目的终端，输入命令：npm install mint-ui -S
然后就能看到node_modules文件夹多了一个mint-ui模块，里面有很多不同的组件可以使用。
3.在src的main.js文件中，引入需要的mint-ui组件，并注册
image
我们的代码主要在脚手架的src中进行，src又包含这些脚手架自带的结构。
- components: 存放我们编写的各个组件，即各个页面
- App.vue: 是整个项目的根组件
- main.js：是各个第三方组件的入口文件
- router.js: 路由配置文件。
我们可以看到mint-ui的官网介绍，里面有很多不同的组件，不同的效果，比如：‘按钮’，‘轮播图’，‘提示消息’...等等等等。
但是并不需要每次使用mint-ui都引入全部组件，所以我们在main.js里引入自己需要的组件即可。
比如，引入一个头部导航的组件，需要下面两个步骤：
1.在main.js引入Header组件
import {Header} from 'mint-ui'
- 在main.js注册Header组件
Vue.component{Header.name,Header}
其中，‘Header.name’可以自定义名称，是之后用在我们组件中的标签名，使用Header.name是用的mint-ui的默认名称，‘mt-header’.
4.建立一个组件，使用Header组件。
注册好之后，就可以直接使用Header组件了。
- 首先，建立一个组件Test.vue
在src-components文件夹下，建立Test.vue文件。
<template>
<div>
<h1>Test.vue 测试组件</h1>
</div>
</template>
<script>
export default {
data(){
return {}
}
}
</script>
<style scoped>
</style>
- 为Test.vue配置路由
在router.js中，引入Test.vue组件，并为其配置路由路径。
<!--引入Test.vue组件-->
import Test from './components/Test.vue'
<!--为其配置路由路径-->
export default new Router({
routes:[
{path: '/Test',component:Test},
]
})
- 加入Header组件，因为顶部导航是在最顶部，所以一般写在所有标签顶部
<template>
<div>
<!--Header组件-->
<mt-header title="这里写标题" fixed></mt-header>
<h1>Test.vue 测试组件</h1>
</div>
</template>
注意，顶部导航需要展示的文本内容不是写在两个标签中间，而是写在title属性值里的。
一般加上一个属性‘fixed’,这样顶部导航就会固定在顶部了。
image
