vue => 在vue中使用MUI

最新推荐文章于 2021-06-28 05:46:27 发布

转载最新推荐文章于 2021-06-28 05:46:27 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5ab27731f265da23866fc846

文章标签：

#javascript #git #ViewUI

本文介绍如何在Vue项目中集成MUI和MintUI，包括从GitHub克隆MUI源码、在Vue项目中引入MUI样式及MintUI组件，并展示了具体的页面结构实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先去git上 https://github.com/dcloudio/mui/ 把文件clone一份到本地，需要用到什么结构进examples里面去找

在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: #fff;
}

.content {
  padding-top: 40px;
  padding-bottom: 50px;
}
</style>

复制代码