!!!欢迎来到我的博客站点~

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="width: 100%">Test</mt-button>
</template>
<script>
import {Toast} from 'mint-ui'
export default {
methods: {
handleClick () {
Toast(' 点击了测试');
}
}
}
</script>
App.vue
复制代码

 

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

 

posted @   Haisen'Blogs  阅读(165)  评论(0编辑  收藏  举报
编辑推荐:
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
阅读排行:
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· 本地部署DeepSeek后,没有好看的交互界面怎么行!
· 趁着过年的时候手搓了一个低代码框架
· 推荐一个DeepSeek 大模型的免费 API 项目!兼容OpenAI接口!

reeber

开车啦

1
2
3
4
5
/* 看板娘 */
点击右上角即可分享
微信分享提示