Mint UI组件快速上手，在项目中使用mint UI

最新推荐文章于 2022-03-17 22:52:04 发布

samllplum

最新推荐文章于 2022-03-17 22:52:04 发布

阅读量585

点赞数

分类专栏： Vue基础

本文链接：https://blog.csdn.net/sunnyjingqi/article/details/93132922

版权

Vue基础专栏收录该内容

19 篇文章 1 订阅

订阅专栏

一.Mint UI是什么

Mint UI 是饿了么团队开源的一款基于 Vue.js 的移动端组件库

Bootstrap「它是 Twitter 开源的一个 css/html 工具包」

二.引入 Mint UI

1、使用 cdn 的方式引入

<!DOCTYPE html>
<html>
<head>
	<title>MintUI</title>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
</head>
<body>
	<div id="app">
    <mt-button @click.native="handleClick">按钮</mt-button>
  </div>
</body>
<!-- 先引入 Vue -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/mint-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      methods: {
        handleClick: function() {
          this.$toast('Hello world!')
        }
      }
    })
  </script>
</html>

2、在 Vue-cli 中使用 Mint UI

（1）、直接在 index.html 中引入

在 main.js 中写入以下内容：

1、在 index.html 中使用 cdn 引入 mint-ui 相关的 css 和 js

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>mint-ui-demo</title>
    <link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
  </head>
  <body>
    <!-- 先引入 Vue -->
    <script src="https://unpkg.com/vue@2.5.11/dist/vue.js"></script>
    <!-- built files will be auto injected -->
    <script src="https://unpkg.com/mint-ui/lib/index.js"></script>
    <div id="app"></div>
  </body>
</html>

2.在 webpack.base.conf.js 的 module.exports 中配置 externals，externals 是把组件公开出去，供全局使用

3、修改 main.js

import MINT from 'mint-ui'
Vue.use(MINT)

添加以上两句，引入 mint-ui ，并且使用它

经过以上三部，我们就使用 cdn 的方式把 mint-ui 配置完了

<template>
  <div id="app">
    <mt-button type="default">default</mt-button>
        <mt-button type="primary">primary</mt-button>
        <mt-button type="danger" >danger</mt-button>
    <router-view/>
  </div>
</template>

~~~~

samllplum

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Mint UI组件快速上手，在项目中使用mint UI

一.Mint UI是什么Mint UI 是饿了么团队开源的一款基于 Vue.js 的移动端组件库Bootstrap「它是 Twitter 开源的一个 css/html 工具包」二.引入 Mint UI1、使用 cdn 的方式引入<!DOCTYPE html><html><head> <title>MintUI</t...
复制链接

扫一扫

专栏目录