欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue 引入 mint-ui 简单使用

程序员文章站 2022-04-10 22:09:34
一 npm 方式 1,安装依赖 (已有项目) 如果想简单体验:基于vue-cli /* npm install vue -g npm install vue-cli -g // -g 是否全局安装,如果不需要可不加 vue init webpack mint-pro (一路回车默认即可) */ np ......

一 npm 方式

1,安装依赖 (已有项目)

如果想简单体验:基于vue-cli

/*

npm install vue -g

npm install vue-cli   -g   // -g 是否全局安装,如果不需要可不加

vue init webpack mint-pro

(一路回车默认即可)

*/

npm install -s mint-ui   

2,main.js主函数配置 

// 全局 mint-ui 引入
import vue from 'vue' import mintui from 'mint-ui' import 'mint-ui/lib/style.css' import router from './router' import app from './app' vue.use(mintui); vue.config.productiontip = false /* eslint-disable no-new */ new vue({ el: '#app', router, components: { app }, template: '<app/>' })

 

3,使用 app.vue

<template>
<div id="app">
<h2> hello mint-ui </h2>
<button @click="handletoast">click me!</button>
<button @click="handleindictor">click me!</button>
<router-view/>
</div>
</template>

<script>
export default {
name: 'app',
methods: {
handletoast () {
this.$toast({
message: '提示',
position: 'middle',
duration: 5000
})
},
handleindictor (){
this.$indicator.open({
text: 'loading',
spinnertype: 'snake'
});
settimeout(() => {
this.$indicator.close()
},2000);
}
}
}
</script>

4,npm run dev 预览结果

1)toast 

vue 引入 mint-ui 简单使用

2) indicator

vue 引入 mint-ui 简单使用

 

 

5, css 组件 直接把官方标签引入即可

<template>
  <div class="hello">
    <h3>css components</h3>
    <mt-header title="标题过长会隐藏后面的内容啊哈哈哈哈">
      <router-link to="/" slot="left">
        <mt-button icon="back">返回</mt-button>
      </router-link>
      <mt-button icon="more" slot="right"></mt-button>
    </mt-header>

    <h3>form components</h3>
    <mt-switch v-model="value">开关</mt-switch>

  </div>
</template>

<script>
  export default {
    name: 'helloworld',
    data() {
      return {
        value: false
      }
    }
  }
</script>

5.1 对应效果

vue 引入 mint-ui 简单使用