Vue.js尚硅谷视频学习笔记(第四章：vue UI 组件库)

最新推荐文章于 2023-02-22 15:46:53 发布

原创最新推荐文章于 2023-02-22 15:46:53 发布 · 427 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Vue #前端小白 #学习笔记

Vue 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍Vue UI组件库MintUI和Element的特性与使用方法，包括下载安装、按需打包配置及具体组件应用示例，适合前端开发者快速上手。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

内容大部分文字描述来自尚硅谷课件，实例操作截图和注释内容为亲测。

第4 章：vue UI 组件库

4.1. 常用

Mint UI:
a. 主页: http://mint-ui.github.io/#!/zh-cn
b. 说明: 饿了么开源的基于vue 的移动端UI 组件库
Elment
a. 主页: http://element-cn.eleme.io/#/zh-CN
b. 说明: 饿了么开源的基于vue 的PC 端UI 组件库

4.2. 使用Mint UI

4.2.1. 下载:

npm install --save mint-ui

注释：点开网站点使用
在这里插入图片描述

在工程文件目录下运作这个命令

4.2.2. 实现按需打包

下载
npm install --save-dev babel-plugin-component
修改babel 配置

"plugins": ["transform-runtime",["component", [
	{
		"libraryName": "mint-ui",
		"style": true
	}
]]]

注释：
只需要在plugins中添加

["component", [
	{
		"libraryName": "mint-ui",
		"style": true
	}
]]

内容即可，不要把原里的 .babelrc文件替换掉
在这里插入图片描述

4.2.3. mint-ui 组件分类

标签组件
非标签组件

4.2.4. 使用mint-ui 的组件

index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> -->
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,
minimum-scale=1, user-scalable=no" />
  <link rel="stylesheet" href="./static/css/bootstrap.css">
  <title>vue_demo</title>
</head>

<body>
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>
<script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script>
<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>

</html>

main.js

import  Vue from 'vue'
import App from './App.vue'
import {Button, Swipe} from 'mint-ui'

//注册成标签（全局注册）
Vue.component(Button.name, Button)
Vue.component(Swipe.name, Button)

new Vue({
    el: '#app',
    components: {App},
    template: '<App/>'
})

App.vue

<template>
  <mt-button type="primary" @click.native="handleClick" style="width: 100%">Test</mt-button>
</template>

<script>
import {Toast} from 'mint-ui'
export default {
 methods: {
   handleClick () {
     Toast('提示信息')
   }
 },
};
</script>

<style>
</style>

在这里插入图片描述