# MintUi
还有个移动端的 ui 库 (https://vant-contrib.gitee.io/vant/#/zh-CN/home)
# 安装
npm i mint-ui -S
npm install babel-plugin-component -D
把
plugins: [
[
"component",
{
libraryName: "mint-ui",
style: true,
},
],
],
复制到 babel.config.js 中
在 src 文件夹下新建一个 plugins 文件夹
在plugins中新建一个mint.js(记得引入vue)，在main.js中引入 mint.js
弄完之后要重启一下才有效果# 简单使用小案例
-
App.vue
<template> <div id="app"> <h1>hello mint</h1> <mt-button type="primary">按钮</mt-button> <br /><br /> <mt-button type="primary"> <img src="./assets/logo.png" height="20" width="20" slot="icon" /> 带自定义图标 </mt-button> <br /><br /> <ul v-infinite-scroll="loadMore" infinite-scroll-distance="10" class="list" > <li v-for="item in list" :key="item" class="list-item">{{ item }}</li> </ul> <br /> <mt-button type="primary" @click="showMessage">弹出提示Message</mt-button> </div> </template> <script> export default { name: "App", components: {}, data() { return { list: 10, }; }, methods: { loadMore() { console.log("加5"); this.list += 5; }, showMessage() { this.$messageBox({ title: "提示", message: "确定执行此操作?", showCancelButton: true, }).then((str) => { if (str === "confirm") { console.log("删除操作执行"); } }); }, }, }; </script> <style> .list { list-style: none; padding-left: 0; width: 100%; height: 400px; border: 1px solid #ccc; overflow: auto; } .list-item { height: 40px; margin: 5px; background-color: #00b3d4; } </style> -
mint.js
// 按需导入 mint 组件 import Vue from "vue"; import { Button, InfiniteScroll, MessageBox } from "mint-ui"; // 导入button组件 Vue.component(Button.name, Button); // 引入 InfiniteScroll 组件 Vue.use(InfiniteScroll); // 制作成全局方法 Vue.prototype.$messageBox = MessageBox; -
main.js
import Vue from "vue"; import App from "./App.vue"; import "./plugins/mint"; Vue.config.productionTip = false; new Vue({ render: (h) => h(App), }).$mount("#app"); -
babel.config.js
module.exports = { presets: ["@vue/cli-plugin-babel/preset"], plugins: [ [ "component", { libraryName: "mint-ui", style: true, }, ], ], };
# 下拉加载 上拉刷新 (用无限滚动)
<template>
<mt-loadmore
:top-method="loadTop"
ref="loadmore"
@top-status-change="handleTopChange"
>
<ul>
<li v-for="num in arr" :key="num">{{ num }}</li>
</ul>
<div slot="top" class="mint-loadmore-top">
<span
v-show="topStatus !== 'loading'"
:class="{ rotate: topStatus === 'drop' }"
>↓</span
>
<span v-show="topStatus === 'loading'">Loading...</span>
</div>
</mt-loadmore>
<!-- <mt-loadmore :bottom-method="loadBottom" ref="loadmore">
<ul style="padding-left:0;list-style:none;">
<li v-for="item in list" :key="item" class="list-item">{{ item }}</li>
</ul></mt-loadmore
> -->
</template>
<script>
export default {
name: "App",
components: {},
data() {
return {
topStatus: "",
list: 10,
arr: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
};
},
methods: {
// 无限滚动的函数
loadMore() {
console.log("加5");
this.list += 5;
},
// 监听下拉过程获取对应的下拉状态字符串 pull,drop,loading
// 根据这些状态动态控制 slot='top' 的具名插槽内容，以及样式
// 下拉监听函数
handleTopChange(status) {
// console.log(status);// pull,drop,loading
this.topStatus = status;
},
// 下拉函数
loadTop() {
// 加载梗多数据
const { arr } = this;
const lstNum = arr[arr.length - 1];
setTimeout(() => {
for (let i = 0; i < 5; i++) {
this.arr.push(lstNum + 1 + i);
}
// 借助了 ref 执行了 组件的onTopLoaded方法
this.$refs.loadmore.onTopLoaded();
}, 1000);
},
// 上拉加载更多
/* loadBottom() {
// 加载更多数据
setTimeout(() => {
this.list += 5;
this.$refs.loadmore.onBottomLoaded();
}, 1000);
}, */
},
};
</script>
<style>
.list {
list-style: none;
padding-left: 0;
width: 100%;
height: 400px;
border: 1px solid #ccc;
overflow: auto;
}
.list-item {
height: 40px;
margin: 5px;
background-color: #00b3d4;
}
.rotate {
display: block;
transform: rotate(180deg);
}
.mint-loadmore-top {
background-color: pink;
}
</style># 图片懒加载
<template>
<div>
<div class="box"></div>
<img
class="image"
v-lazy="
'https://img30.360buyimg.com/jdcms/s300x300_jfs/t1/96695/6/13116/209503/5e538675E12c0ab8b/6dfea84f5d13131e.jpg.webp'
"
/>
</div>
</template>
<style>
.box {
width: 100%;
height: 500px;
}
.image[lazy="loading"] {
width: 200px;
height: 300px;
margin: auto;
}
</style># Less 和 Sass 和 Stylus
这三个 和 vue 无关，谁都可以用
这里用的是 dijia vue-lesson vue-mini-ui-demo 中的 App.vue
# Less
npm i less less-loader@5 -D (需要安装 less less-loader 版本分别是 4 和 5)
<template>
<div class="less-demo">
<h2>Less 的基本使用</h2>
<!-- 需要安装 less less-loader 版本分别是 4 和 5 -->
<p class="p">我有一个梦想</p>
</div>
</template>
<script>
export default {
name: "LessDemo",
};
</script>
<style lang="less">
// 导入 默认扩展名是 .less
@import "../assets/style";
// 定义变量
@width: 100px;
// 嵌套语法
.less-demo {
color: orange;
> .p {
color: @color; //@color是 style.less 文件夹中的变量
width: @width;
font-size: 20px;
}
&:hover {
// &(表示当前选择器的父级)代表less-demo
// color: pink;
font-size: 50px;
.color(); // 混合
}
}
// mixins 混合
.color {
color: pink;
}
</style># Sass
npm i node-sass@4 -D
npm i sass-loader@8 -D
npm uni sass -D (卸载 sass，了解一下)
<template>
<div class="sass-demo">
<h2>Sass的使用</h2>
</div>
</template>
<script>
export default {
name: "SassDemo",
};
</script>
<style lang="scss">
$color: pink;
.sass-demo {
h2 {
color: $color;
}
}# Stylus
npm i stylus stylus-loader@3 -D
<template>
<div class="stylus-demo">
<h2>StylusDemo</h2>
</div>
</template>
<script>
export default {
name: "StylusDemo",
};
</script>
<style lang="stylus">
.stylus-demo
h2
color red
</style># Swiper 插件
(https://www.npmjs.com/package/vue-awesome-swiper)
(能用 vue 的尽量用 vue 的，没有 vue 的再用原生的)
npm i swiper vue-awesome-swiper --save
npm i swiper@5.2.0
-
Swiper Vue 案例
-
VueSwiperDemo.vue
<template> <div class="vue-swiper-demo"> <swiper ref="mySwiper" :options="swiperOptions"> <swiper-slide>Slide 1</swiper-slide> <swiper-slide>Slide 2</swiper-slide> <swiper-slide>Slide 3</swiper-slide> <swiper-slide>Slide 4</swiper-slide> <swiper-slide>Slide 5</swiper-slide> <div class="swiper-pagination" slot="pagination"></div> </swiper> </div> </template> <script> export default { name: "VueSwiperDemo", data() { return { swiperOptions: { pagination: { el: ".swiper-pagination", }, loop: true, }, }; }, computed: { swiper() { // 轮播图对象 对象下有很多方法或者属性用来控制对应的轮播图 return this.$refs.mySwiper.$swiper; }, }, mounted() { // 使用原生插件或者封装之后的原生插件的时候注意 插件的方法是不是需要获取真实 dom节点 // console.log("Current Swiper instance object", this.swiper); // 进入页面的时候使用轮播图对象的 slideTo 方法切换到第四张 1000ms 时间 // this.swiper.slideTo(3, 1000, false); }, }; </script> <style> .vue-swiper-demo .swiper-container { width: 400px; height: 500px; border: 1px solid #ccc; text-align: center; } </style> -
plugins 文件夹中自建的 vue-swiper.js 文件
// 全局导入 vue 的 swiper 组件 import Vue from "vue"; import VueAwesomeSwiper from "vue-awesome-swiper"; import "swiper/css/swiper.css"; Vue.use(VueAwesomeSwiper); -
main.js
import Vue from "vue"; import App from "./App.vue"; // import "./plugins/mint"; import "./plugins/vue-swiper"; Vue.config.productionTip = false; new Vue({ render: (h) => h(App), }).$mount("#app");
-
-
原生的 swiper 插件
在这里要将上边 main.js 中引入 vue-swiper 的注释掉，否则会影响这里
App.vue 中引 VueSwiperDemo.vue 的也要注释掉-
NativeSwiper.vue
<template> <div> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div> <!-- 如果需要分页器 --> <div class="swiper-pagination"></div> <!-- 如果需要导航按钮 --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> </div> </template> <script> import "swiper/css/swiper.css"; // 引css文件 import Swiper from "swiper"; // 引js文件 export default { name: "NativeSwiper", mounted() { new Swiper(".swiper-container", { loop: true, // 循环模式选项 // 如果需要分页器 pagination: { el: ".swiper-pagination", }, // 如果需要前进后退按钮 navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, }); }, }; </script> <style> .swiper-container { width: 600px; height: 300px; } </style>
-
# lodash
对数组，字符串处理很好
# Moment 插件
(http://momentjs.cn/)
npm i moment
-
MomentDemo.vue
<template> <div class="moment-demo"> <p>展示格式化之后的日期 {{ date | formateDateFormNow }}</p> </div> </template> <script> export default { name: "MomentDemo", data() { return { date: "2020-12-17T11:45:27.667Z", }; }, }; </script> -
src 文件夹下新建的 filters 文件夹下的 index.js 文件
// vue 全局过滤器 import Vue from "vue"; import moment from "moment"; // 切换 moment 语言 moment.locale("zh-cn"); // 全局过滤器 Vue.filter("formateDateFormNow", (dateStr) => { console.log(dateStr); return moment(dateStr).fromNow(); // 这个是从 moment官网找的 格式化时间的 }); -
main.js
import Vue from "vue"; import App from "./App.vue"; // import "./plugins/mint"; import "./filters/index"; Vue.config.productionTip = false; new Vue({ render: (h) => h(App), }).$mount("#app");
# 富文本编辑器
(https://www.tiny.cloud/docs/integrations/vue/#installingthetinymcevuejsintegrationusingnpm)
(http://tinymce.ax-z.cn/)
在项目文件夹中 npm install --save “@tinymce/tinymce-vue@^3”
-
案例 TinymceDemo.vue
<template> <div class="tiny-mce-demo"> <h2>Tinymce 富文本编辑器的使用</h2> <!-- model-events 控制v-model="content"什么时候能拿到值 --> <Editor v-model="content" model-events="blur" api-key="9mieih2cqsubf30b1omff3w107ojvjfvzhmb7haq4giiy754" :init="{ language: 'zh_CN', elementpath: false, // 隐藏底栏的元素路径 branding: false, //隐藏右下角技术支持 height: 500, menubar: true, // 是否显示菜单栏 plugins: [ 'advlist autolink lists link image charmap print preview anchor', 'searchreplace visualblocks code fullscreen', 'insertdatetime media table paste code help wordcount', ], // 工具栏按钮 toolbar: 'code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | \ styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \ table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen | bdmap indent2em lineheight formatpainter axupimgs', }" /> <!-- 这里是中文文档 --> <button @click="getContent">获取输入内容</button> </div> </template> <script> import Editor from "@tinymce/tinymce-vue"; export default { name: "TinymceDemo", components: { Editor, }, data() { return { content: "", }; }, methods: { getContent() { console.log(this.content); }, }, }; </script>
# Echarts 数据可视化
(https://echarts.apache.org/zh/index.html)
npm i echarts --save
-
抄文档案例
-
EchartsDemo.vue
<template> <div class="excharts-demo"> <h2>Echarts 的使用</h2> <div id="main"></div> </div> </template> <script> // 按需引入相关的图表组件 // 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。 import * as echarts from "echarts/core"; // 引入柱状图图表，图表后缀都为 Chart import { BarChart } from "echarts/charts"; // 引入提示框，标题，直角坐标系组件，组件后缀都为 Component import { TitleComponent, TooltipComponent, GridComponent, } from "echarts/components"; // 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步 import { CanvasRenderer } from "echarts/renderers"; // 注册必须的组件 echarts.use([ TitleComponent, TooltipComponent, GridComponent, BarChart, CanvasRenderer, ]); export default { name: "EchartsDemo", mounted() { // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById("main")); // 绘制图表 myChart.setOption({ title: { text: "ECharts 入门示例", }, tooltip: {}, xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"], }, yAxis: {}, series: [ { name: "销量", type: "bar", data: [5, 20, 36, 10, 10, 20], }, ], }); }, }; </script> <style> #main { width: 600px; height: 400px; } </style>
-
-
案例：模拟后台数据
-
EchartsDemo.vue
<template> <div class="excharts-demo"> <h2>Echarts 的使用</h2> <div id="main" v-if="products.length"></div> <div v-else>请稍等</div> </div> </template> <script> // 按需引入相关的图表组件 // 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。 import * as echarts from "echarts/core"; // 引入柱状图图表，图表后缀都为 Chart import { BarChart } from "echarts/charts"; // 引入提示框，标题，直角坐标系组件，组件后缀都为 Component import { TitleComponent, TooltipComponent, GridComponent, } from "echarts/components"; // 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步 import { CanvasRenderer } from "echarts/renderers"; // 注册必须的组件 echarts.use([ TitleComponent, TooltipComponent, GridComponent, BarChart, CanvasRenderer, ]); export default { name: "EchartsDemo", data() { return { products: [], }; }, created() { setTimeout(() => { this.products = [ { id: 1, name: "衬衫", inventory: 500 }, { id: 2, name: "羊毛衫", inventory: 1000 }, { id: 3, name: "雪纺衫", inventory: 800 }, { id: 4, name: "裤子", inventory: 1200 }, ]; }, 500); }, mounted() {}, updated() { // 基于准备好的dom，初始化echarts实例 const myChart = echarts.init(document.getElementById("main")); // 根据配置绘制图表 也可以是更新图表 myChart.setOption({ title: { text: "商品库存信息展示图表", }, // 划过的提示框 不写就没有 写成 {} 是不进行任何设置,使用默认的 tooltip: {}, xAxis: { // 展示的 x 轴坐标是根据后台的数据来的 data: this.products.map((product) => product.name), }, yAxis: {}, series: [ { // y轴的数据 name: "库存量", type: "bar", data: this.products.map((product) => product.inventory), }, ], }); }, }; </script> <style> #main { width: 600px; height: 400px; } </style>
-
-
案例：对图表进行添加
-
EchartsDemo.vue
<template> <div class="excharts-demo"> <h2>Echarts 的使用</h2> <button @click="addProduct">添加</button> <div id="main" v-if="products.length"></div> <div v-else>请稍等</div> </div> </template> <script> import * as echarts from "echarts/core"; import { BarChart } from "echarts/charts"; import { TitleComponent, TooltipComponent, GridComponent, } from "echarts/components"; import { CanvasRenderer } from "echarts/renderers"; // 注册必须的组件 echarts.use([ TitleComponent, TooltipComponent, GridComponent, BarChart, CanvasRenderer, ]); export default { name: "EchartsDemo", data() { return { products: [], myChart: null, }; }, created() { setTimeout(() => { this.products = [ { id: 1, name: "衬衫", inventory: 500 }, { id: 2, name: "羊毛衫", inventory: 1000 }, { id: 3, name: "雪纺衫", inventory: 800 }, { id: 4, name: "裤子", inventory: 1200 }, ]; }, 500); }, updated() { // 基于准备好的dom，初始化echarts实例 if (!this.myChart) { // 初始绘制图表只执行一次 this.myChart = echarts.init(document.getElementById("main")); this.map("default"); } }, methods: { // 添加商品 addProduct() { this.products.push({ id: 5, name: "袜子", inventory: 600 }); // 数据添加成功，重新绘制 this.map("add"); }, // 绘制图表函数,根据不同的类别绘制图表，比如初始的渲染，删除，添加 map(type) { const colors = ["pink", "orange", "yellow", "blue", "green"]; const publicOption = { xAxis: { data: this.products.map((product) => product.name), }, series: [ { name: "库存量", type: "bar", // 全体改颜色 data: this.products.map((product, index) => ({ value: product.inventory, itemStyle: { color: colors[index] }, })), // 只修改第二个 /* data: this.products.map((product, index) => index === 1 ? { value: product.inventory, itemStyle: { color: "orange" }, // 这里要将上边的colors注释掉，否则会报colors定义了未被使用的错误 } : product.inventory ), */ }, ], }; if (type === "default") { // 根据配置绘制图表 也可以是更新图表 this.myChart.setOption({ ...publicOption, title: { text: "商品库存信息展示", }, tooltip: {}, yAxis: {}, }); } else if (type === "add") { this.myChart.setOption(publicOption); } }, }, }; </script> <style> #main { width: 600px; height: 400px; } </style>
-
-
案例：横向图表
-
EchartsDemo1.vue
<template> <div> <h2>excharts 小案例</h2> <div id="main1"></div> </div> </template> <script> // 按需引入相关的图表组件 import * as echarts from "echarts/core"; import { BarChart } from "echarts/charts"; import { TooltipComponent, GridComponent } from "echarts/components"; import { CanvasRenderer } from "echarts/renderers"; // 注册必须的组件 echarts.use([TooltipComponent, GridComponent, BarChart, CanvasRenderer]); export default { name: "EchartsDemo1", data() { return { arr: [ { id: 2, address: "上海", posts: 3603 }, { id: 1, address: "北京", posts: 1792 }, { id: 3, address: "武汉", posts: 1144 }, { id: 4, address: "杭州", posts: 855 }, ], }; }, mounted() { // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById("main1")); const colors = ["#ccc", "yellow", "pink", "orange"]; // 绘制图表 myChart.setOption({ tooltip: {}, xAxis: { show: false }, yAxis: [ { // category 类目轴 type: "category", data: this.arr.map((item) => item.address).reverse(), // 左边线刻度 axisTick: { inside: true, length: 5, lineStyle: { shadowOffsetX: -5, //阴影偏移位置 }, }, }, { // 竖轴 type: "category", data: this.arr.map((item) => item.posts + "职位").reverse(), offset: -10, //左右偏移量 // 右边线 axisLine: { show: false, }, // 右边线刻度 axisTick: { show: false, }, }, ], series: [ { type: "bar", data: this.arr .map((item, ind) => ({ value: item.posts, itemStyle: { color: colors[ind], }, })) .reverse(), }, ], }); }, }; </script> <style> #main1 { width: 600px; height: 400px; } </style>
-
# nprogress 上方进度条
安装：npm i --save nprogress
两个函数：
Nprogress.start () 显示进度条
Nprogress.done () 隐藏对应进度条
-
案例 main.js
import Vue from "vue"; import App from "./App.vue"; import router from "./router"; import axios from "axios"; import "./plugins/element.js"; // 导入 Nprogress 包对应的js和css import Nprogress from "nprogress"; import "nprogress/nprogress.css"; // axios 请求拦截器(预处理这次请求) // 在 request 拦截器中，展示进度条 Nprogress.start() axios.interceptors.request.use((config) => { Nprogress.start(); return config; }); // 响应拦截器 // 在 response 拦截器中，隐藏进度条 Nprogress.done() axios.interceptors.response.use((res) => { Nprogress.done(); return res; }); Vue.config.productionTip = false; new Vue({ router, store, render: (h) => h(App), }).$mount("#app");
