vue.js中mint-ui框架的使用方法

本文为大家分享了vue.js中mint-ui框架的使用方法，具体内容如下

1.安装vue2.0的mint-ui框架

npm install mint-ui -save

2.引用和使用框架，我用的是全部组件，也可以按需选择加载相应的组件，不过要使用babel-plugin-component

import Mint from 'mint-ui';
Vue.use(Mint);

3.创建一个header.vue组件，里面写入mint-ui的头部组件

<template>
 <mt-header title="问答">
 <router-link to="/search" slot="left">
  <mt-button icon="search">{{searchTitle}}<mt-button>
 <router-link>
 <mt-button to="/ask" slot="right">
  <mt-button icon="ask">提问<mt-button>
 <mt-button>
 <mt-header>
<template>

<script>
 require('../less/config.less');
 export default {
  data(){
  return{
   searchLeft:'searchLeft',
   searchTitle:'搜索',
  }
  },
  methods:{
  handleClose:function(){
   this.$indicator.open('加载中...');
  }
  }
 }
<script>

4.在app.vue组件中调用header.vue组件

<template>
 <div id="app">
 <h-eader><h-eader>
 <router-link to="/home">主页<router-link>
 <router-link to="/news">新闻<router-link>
 <mt-button @click.native="handleClick">按钮<mt-button>
 <div>
  <router-view><router-view>
 <div>
 <div class="box"><div>
 <div>
<template>

<script>
 import Header from './components/header.vue';
 require('./less/collect.less');
 export default {
 name: 'app',
 methods:{
  handleClick:function(){
  this.$indicator.open('加载中...');
  }, 

 },
 components:{
  'h-eader':Header
 }
 }
<script>

5.预览图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue中mint-ui环境搭建详细介绍

     vue中mint-ui环境搭建详细介绍 首先需要如下配置node (最好用淘宝源) $ npm install -g cnpm --registry=https://registry.npm.taobao.org 以及git 从官方github拉下来mint-ui git clone https://github.com/ElemeFE/mint-ui.git 进入mint-ui npm run dev 全程大概5-10分钟,出现 Build completed in 34.926s Chil

  • vue中配置mint-ui报css错误问题的解决方法

    vue中配置mint-ui报css错误问题的解决方法

    在vue2.0中引入了mint-ui后总是报一个css的错误 但是package.json中已经配置了css-loader style-loader ,webpack.config中也已经配置了css,还是报这个错误,相反,如果把webpack.config中css的配置注释掉就不会出错,这是为什么呢? 因为 在webpack.config中没有设置好css引入的目录,因为默认情况下我们只会引入/src/目录下的css, 但是mint-ui是要冲node_modules目录去引入的,所以在web

  • 基于VUE.JS的移动端框架Mint UI的使用

    基于VUE.JS的移动端框架Mint UI的使用

    Mint UI GitHub:github.com/ElemeFE/mint 项目主页:mint-ui.github.io/# Demo:elemefe.github.io/mint- 文档:mint-ui.github.io/docs/# 由饿了么前端团队推出的 Mint UI 是一个基于 Vue.js 的移动端组件库.自 6 月初开源以来,根据社区和团队内部的反馈,修复了一些 bug 并新增了部分组件,于本周发布了 0.2.0 版本.本文介绍如何从零开始构建一个使用 Mint UI 的 Vu

  • vue.js中proxyTable 转发请求的实现方法

    找到config/index.js 配置文件 proxyTable: { '/api': { target: 'http://your_website', changeOrigin: true, pathRewrite: { //需要rewrite重写的, 如果在服务器端做了处理则可以不要这段 '^/api': '' } } } 以上这篇vue.js中proxyTable 转发请求的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 在Vue.js中加载字体的正确方法

    在Vue.js中加载字体的正确方法

    添加字体不应该对性能产生负面影响.在本文中,我们将探讨在 Vue 应用程序中加载字体的最佳实践. 正确声明 font-face 的字体 确保正确声明字体是加载字体的重要方面.这是通过使用 font-face 属性来声明你选择的字体来实现的.在你的 Vue 项目中,这个声明可以在你的根 CSS 文件中完成.在进入这个问题之前,我们先来看看 Vue 应用的结构. /root public/ fonts/ Roboto/ Roboto-Regular.woff2 Roboto-Regular.woff

  • 基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)

    基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)

    像我们平日里做惯了 Java 或者 .NET 这种后端程序员,对于前端的认识还常常停留在 jQuery 时代,包括其插件在需要时就引用一下,不需要就删除.故观念使然,尽管 Nuget 和 Maven 用得顺溜,但对 NPM 仍不带感,兴许是周边无人带动的稀薄气氛,也或者是没参加过类似的大型活动,于是在自发性上差了许多.再者,我不用 MVVM 模式,领导也不会扣绩效. 为了快速体验 MVVM 模式,我选择了非工程化方式来起步,并选择使用 Vue.js,以及基于它构建的 iView UI 框架. V

  • vue.js中ref及$refs的使用方法解析

    vue.js中ref及$refs的使用方法解析

    关于ref和$refs的用法及讲解,vue.js中文社区( https://cn.vuejs.org/v2/api/#ref )是这么讲解的: ref 被用来给元素或子组件注册引用信息,引用信息将会注册在父组件的 $refs 对象上. 如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素:如果用在子组件上,引用就指向组件: vue.js中文社区文档上的说明已经就比较通俗易懂了,其实我们可以这么理解,ref和$refs其实就是用来获取/操作DOM元素的:类似于jquey中的$(".xxx

  • vue.js中mint-ui框架的使用方法

    vue.js中mint-ui框架的使用方法

    本文为大家分享了vue.js中mint-ui框架的使用方法,具体内容如下 1.安装vue2.0的mint-ui框架 npm install mint-ui -save 2.引用和使用框架,我用的是全部组件,也可以按需选择加载相应的组件,不过要使用babel-plugin-component import Mint from 'mint-ui'; Vue.use(Mint); 3.创建一个header.vue组件,里面写入mint-ui的头部组件 <template> <mt-header

  • 详细聊聊Vue.js中的MVVM

    详细聊聊Vue.js中的MVVM

    目录 MVVM的理解 MVVM的原理 脏检查机制: 数据劫持 相同点 实现MVVM 总结 MVVM的理解 MVVM拆开来即为Model-View-ViewModel,有View,ViewModel,Model三部分组成.View层代表的是视图.模版,负责将数据模型转化为UI展现出来.Model层代表的是模型.数据,可以在Model层中定义数据修改和操作的业务逻辑.ViewModel层连接Model和View. 在MVVM的架构下,View层和Model层并没有直接联系,而是通过ViewModel

  • vue.js中指令Directives详解

    vue.js中指令Directives详解

    想必喜欢前端开发的小伙伴们都或多或少接触过MVVM这个概念,说起MVVM,第一时间想到的便是angularjs,knockoutjs等已经被广泛运用的MVVM框架,之前我也没有在这方面有很多了解,最近在做项目的过程中接触了Vue.js,这是一个小巧精致,性能优异的MVVM框架,可以说对初学者是比较容易入门的,该框架的英文文档写得很好,但是中文版访问还不太稳定,翻译也有待改进,所以自己一遍学习,一遍记录自己的思考,与各位共享学习的经验. 第一篇主要是想谈谈vue.js中的Directives即指令

  • 初识 Vue.js 中的 *.Vue文件

    初识 Vue.js 中的 *.Vue文件

    什么是Vue.js? vue.js是一套构建用户界面的渐进式框架,它采用自底向上增量开发的设计.(自底向上设计方法是根据系统功能要求,从具体的器件.逻辑部件或者相似系统开始,凭借设计者熟练的技巧和丰富的经验,通过对其进行相互连接.修改和扩大,构成所要求的系统.)Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当与单文件组件和Vue生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动. 什么是*.vue文件 首先,我们用 vue-cli

  • Vue.js中的高级面试题及答案

    Vue-loader 是 Webpack 的加载模块,它使我们可以用 Vue 文件格式编写单文件组件. 单文件组件文件有三个部分,(模板.脚本和样式). vue-loader 模块允许 webpack 使用单独的加载模块 (例如 SASS 或 SCSS 加载器) 提取和处理每个人部分.该设置使我们可以使用 Vue 文件无缝编写程序. vue-loader 模块还允许把静态资源视为模块依赖性,并允许使用 webpack 加载器进行处理. 而且还允许还开发过程中进行热重装. 2.prop 如何指定其

  • Vue.js中的组件系统

    vue.js既然是框架,那就不能只是简单的完成数据模板引擎的任务,它还提供了页面布局的功能.本文详细介绍使用vue.js进行页面布局的强大工具,vue.js组件系统. Vue.js组件系统 每一个新技术的诞生,都是为了解决特定的问题.组件的出现就是为了解决页面布局等等一系列问题.vue中的组件分为两种,全局组件和局部组件. 组件的注册 全局组件的注册 通过Vue.component()创建一个全局组件之后,我们可以在一个通过 new Vue 创建的 Vue 根实例中,把这个组件作为自定义元素来使

随机推荐