在main.js中引入mui的css样式（前提是已经从clone下来的文件中把dist文件夹放入vue项目中）
// 1 导入 vue
import Vue from 'vue'
// 导入 vue-resource
import VueResource from 'vue-resource'
// 安装插件
Vue.use(VueResource)
// 使用 MUI，直接导入样式即可
// 注意：样式覆盖的问题，需要先导入 mui.min.css 样式，再导入 icons-extra.css 的样式
// 否则，会存在覆盖的问题！！！
import '../lib/mui/css/mui.min.css'
// import '../lib/mui/css/icons-extra.css'
// 2 导入 项目的入口组件
import App from '../App.vue'
// --------------------MintUI的配置 开始------------------------
// 从 mint-ui 中导入组件
import { Header, Button, Swipe, SwipeItem } from 'mint-ui'
// 注册组件
Vue.component(Header.name, Header)
Vue.component(Button.name, Button)
Vue.component(Swipe.name, Swipe)
Vue.component(SwipeItem.name, SwipeItem)
// --------------------MintUI的配置 结束------------------------
// 导入 VueRouter
// 此处的 ../router 表示在这个目录中查找 index.js
import router from '../router'
// 3 将Vue实例与 App 挂到一起
const vm = new Vue({
el: '#app',
router,
render: c => c(App)
})
复制代码
然后在后缀为.vue 的文件中直接拷贝进去html 结构即可
<template>
<!-- 注意：唯一的根元素 -->
<div>
<!-- 页头 -->
<mt-header fixed title="黑马程序员 | 12期Vue项目">
<a to="/" slot="left">
<mt-button icon="back">返回</mt-button>
</a>
</mt-header>
<!-- 内容 -->
<router-view class="content"></router-view>
<!-- 页脚 -->
<nav class="mui-bar mui-bar-tab">
<router-link to="/home" class="mui-tab-item">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</router-link>
<router-link to="/vip" class="mui-tab-item">
<span class="mui-icon mui-icon-contact"></span>
<span class="mui-tab-label">会员</span>
</router-link>
<router-link to="/cart" class="mui-tab-item">
<span class="mui-icon mui-icon-extra mui-icon-extra-cart">
<span class="mui-badge">9</span>
</span>
<span class="mui-tab-label">购物车</span>
</router-link>
<router-link to="/search" class="mui-tab-item">
<span class="mui-icon mui-icon-search"></span>
<span class="mui-tab-label">搜索</span>
</router-link>
</nav>
</div>
</template>
<script>
// 导入购物车小图标的样式
import './lib/mui/css/icons-extra.css'
export default {
}
</script>
<style>
html,
body {
margin: 0;
padding: 0;
background-color:
}
.content {
padding-top: 40px;
padding-bottom: 50px;
}
</style>
复制代码
