zoukankan      html  css  js  c++  java
  • Vue--- mint-UI 穿插

    Vue-mint-UI库

    概述:就是一个 封装好的库

    安装/下载:npm install  --save mint-ui

    常用

    1. 1) Mint UI:
      a. 主页: http://mint-ui.github.io/#!/zh-cn
      b. 说明: 饿了么开源的基于 vue 的移动端 UI 组件库
      2) Elment
      a. 主页: http://element-cn.eleme.io/#/zh-CN
      b. 说明: 饿了么开源的基于 vue 的 PC 端 UI 组件库
    2. 下载
      1. 下载
      npm install --save-dev babel-plugin-component
      2. 修改 babel 配置
      "plugins": ["transform-runtime",["component", [
      {
      "libraryName": "mint-ui",
      "style": true
      }
      ]]]
      按需打包 配置
    3. Mint-UI 组件分类
      1. 标签组件
      2. 非标签组件
    4. 使用Mint-UI  组件   在index.html  进行移动端格
      1.   
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,
        minimum-scale=1, user-scalable=no" />
        <script
        src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></scrip
        t>
        <script>
        if ('addEventListener' in document) {
        document.addEventListener('DOMContentLoaded', function() {
        FastClick.attach(document.body);
        }, false);
        }
        if(!window.Promise) {
        document.writeln('<script
        src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"
        '+'>'+'<'+'/'+'script>');
        }
        </script>
        View Code

     

     1 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,
     2 minimum-scale=1, user-scalable=no" />
     3 <script
     4 src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></scrip
     5 t>
     6 <script>
     7 if ('addEventListener' in document) {
     8 document.addEventListener('DOMContentLoaded', function() {
     9 FastClick.attach(document.body);
    10 }, false);
    11 }
    12 if(!window.Promise) {
    13 document.writeln('<script
    14 src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"
    15 '+'>'+'<'+'/'+'script>');
    16 }
    17 </scri
    import {Button} from 'mint-ui'
    Vue.component(Button.name, Button)
    main.js
    <template>
    <mt-button @click="handleClick" type="primary" style=" 100%">Test</mt-button>
    </template>
    <script>
    import {Toast} from 'mint-ui'
    export default {
    methods: {
    handleClick () {
    Toast(' 点击了测试');
    }
    }
    }
    </script>
    App.vue

    定义好的  知道语法格式 拿过来用就ok  !!

  • 相关阅读:
    前置++和后置++的区别
    snmp数据包分析
    [codeforces538E]Demiurges Play Again
    [codeforces538D]Weird Chess
    [BZOJ3772]精神污染
    [BZOJ4026]dC Loves Number Theory
    [BZOJ1878][SDOI2009]HH的项链
    [BZOJ3658]Jabberwocky
    [BZOJ3932][CQOI2015]任务查询系统
    [BZOJ3551][ONTAK2010]Peaks加强版
  • 原文地址:https://www.cnblogs.com/reeber/p/10608037.html
Copyright © 2011-2022 走看看