电子商务网站建设与管理的考试淮北网络推广

Mint-ui

简介

1. 基于 Vue.js 的移动端组件库

2. Mint UI 包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要。通过它，可以快速构建出风格统一的页面，提升开发效率。

3. 真正意义上的按需加载组件。可以只加载声明过的组件及其样式文件，无需再纠结文件体积过大。

4. 考虑到移动端的性能门槛，Mint UI 采用 CSS3 处理各种动效，避免浏览器进行不必要的重绘和重排，从而使用户获得流畅顺滑的体验。

5. 依托 Vue.js 高效的组件化方案，Mint UI 做到了轻量化。即使全部引入，压缩后的文件体积也仅有 ~30kb (JS + CSS) gzip。

安装及引入

1. cnpm install mint-ui --save-dev
2. 引入

• 按需引入,在页面中引入所使用到的插件

// 按需引入部分组件
import { Cell, Checklist } from 'mint-ui';

• 全部引入

全部引入无效，还是要在页面中引入所用的插件，所以都使用按需引入

import Vue from 'vue';
import Mint from 'mint-ui';
Vue.use(Mint);

3. 在main.js中导入css样式

import 'mint-ui/lib/style.css'

示例

1. messagebox示例

• 在app.vue项目中引入

import {MessageBox} from 'mint-ui'

• 直接使用组件（点击触发的事件添加到methods中）
• 完整代码

<template><div id="app"><button @click="alert">打开confirm弹框</button></div>
</template><script>
import {MessageBox} from 'mint-ui'
export default {name: "app",data() {return {};},methods: {alert() {MessageBox({title: "提示",message: "确定执行此操作?",showCancelButton: true});}}
};
</script>

2. 图片轮播

• 引入需要的组件

import { Swipe, SwipeItem} from "mint-ui";

• 如果想直接使用组件，在component中声明用到的组件（名称为模板默认，也可以自己自定义）

 components: {"father": Swipe,//引号中可以自己改名"mt-swipe-item": SwipeItem}

• 画完页面后没有显示，根据样式（高度是父元素100%等，将组件用div包起来后给div设置高度，并给组件设置背景色）

<div style="height:100px"><father :auto="4000"><mt-swipe-item><div class="common">1</div></mt-swipe-item><mt-swipe-item><div class="common">2</div></mt-swipe-item><mt-swipe-item><div class="common">3</div></mt-swipe-item></father</div><style>
.common{height: 100px;background: rgb(22, 196, 129);text-align: center;
}
</style>

• 从官网中也能查到组件的一些其他api,按需使用
  

3. 时间选择

• 引入需要组件

import { DatetimePicker } from "mint-ui";

• 通过页面中的一个按钮触发

    <button @click="opentime">open time</button>

• 添加组件（组件中已经写好了按下确认键的事件名称：confirm）

 <div><mt-datetime-pickerref="picker"type="date"year-format="{value} 年"month-format="{value} 月"date-format="{value} 日"v-model="pickerValue"@confirm="handleConfirm"></mt-datetime-picker></div>

• 将相关函数添加到方法methods中

opentime() {this.$refs.picker.open();},handleConfirm() {console.log(this.pickerValue);}

Element-ui

简介

1. PC端组件库
2. 学习网站 ：https://element.eleme.cn/#/zh-CN/component/icon

安装

1. install可以简写为i cnpm i element-ui --save-dev
2. 导入css库 import 'element-ui/lib/theme-chalk/index.css'

因为没有相关的解析字体文件，所以会疯狂报错
解决：

1. 查看package.json中有没有url-loader,如果没有则需要安装cnpm install url-loader --save-dev
2. 安装成功后在webpack.config.js的rules中配置相关的解析文件
   { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader' }
3. 装完后不会报错

3. 待解决bug使用时图标无法加载显示
   百度后发现说查看package中element-ui的版本和官网https://element.eleme.cn/#/zh-CN/component/icon
   版本是否相同，查看后没有问题但还是无法正常显示

引入

推荐使用全局引入
在main.js中引入：

import ElementUI from 'element-ui';Vue.use(ElementUI);
import 'element-ui/lib/theme-chalk/index.css'

之后直接摘抄官网中组件的用法即可

示例

1. DatePicker 日期选择器
   直接将官网中的内容复制到页面中（组件已经全局引入的前提下）

<template><div id="app"><div class="block"><span class="demonstration">默认</span><el-date-picker v-model="value1" type="date" placeholder="选择日期"></el-date-picker></div><div class="block"><span class="demonstration">带快捷选项</span><el-date-pickerv-model="value2"align="right"type="date"placeholder="选择日期":picker-options="pickerOptions1"></el-date-picker></div></div>
</template><script>
export default {name: "app",data() {return {pickerOptions1: {disabledDate(time) {return time.getTime() > Date.now();},shortcuts: [{text: "今天",onClick(picker) {picker.$emit("pick", new Date());}},{text: "昨天",onClick(picker) {const date = new Date();date.setTime(date.getTime() - 3600 * 1000 * 24);picker.$emit("pick", date);}},{text: "一周前",onClick(picker) {const date = new Date();date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);picker.$emit("pick", date);}}]},value1: "",value2: ""};},components: {},methods: {}
};
</script>
<style>
</style>

实现效果

2. messagebox弹框

<template><div id="app"><el-button type="text" @click="open">点击打开 Message Box</el-button></div>
</template><script>
export default {name: "app",data() {return {};},components: {},methods: {open() {this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {this.$message({type: 'success',message: '删除成功!'});}).catch(() => {this.$message({type: 'info',message: '已取消删除'});          });}}
};
</script>
<style>
</style>