2021-12-19 vue移动端卖座电影项目(十四) mintUI的安装和使用:为电影院列表添加样式

本文链接：https://blog.csdn.net/rowlet/article/details/122032354

文章目录

0.介绍,官网安装和引入

介绍:

Mint UI是 饿了么团队开发基于vue .js的移动端UI框架
，它包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要

官网

全局安装:`npm install mint-ui -S`

全局引入:在项目中的main.js文件引入所有组件

 // 引入全部组件
import Vue from 'vue'; 
import Mint from 'mint-ui'; 
//单独引入样式
import 'mint-ui/lib/style.min.css'
Vue.use(Mint);

1.在网页中使用mintUI

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

2.在vue项目中使用mintUI

同样的效果,在App.vue中使用时这样的:
main.js

// 引入mint-ui
import Mint from "mint-ui"
// 引入mint的样式文件
import "mint-ui/lib/style.min.css"
Vue.use(Mint);

App.vue

<template>
	<div id ="app">
		<mt-button @click.native ="handleClick ">按钮</mt-button>
	</div>
</template>
<script>
	export default{
		 el: '#app',
		 methods: {
			  handleClick: function() {
			   this.$toast('Hello world!');
			  }
		 }
	}
</script>