Vue全家桶
关注
分享
扫一扫
Vue全家桶
明知山_
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
Vue引入js-cookie保存用户登陆状态
使用文档安装npm install js-cookie -s在vue/js使用import Cookies from "js-cookie";Cookies.set("userToken", 123456, { expires: 7 });保存的cookiekey:userTokenvalue:1234567天过期时间拿Cookies.get('userToken')原创 2021-04-23 10:32:07 · 400 阅读 · 0 评论 -
less处理Css预编译
一、安装less和less-loadernpm install less less-loader --save二、在build/webpack.base.conf.js文件添加 { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' },三、在组件中引入<st...原创 2019-09-23 14:13:42 · 397 阅读 · 0 评论 -
ElementUI完整引入及按需引入项目开发
假设我们已经创建了vue项目了第一步 使用终端安装Element npm i element-ui -S第二步 在main.js里引入Element// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.c...原创 2019-07-22 17:24:01 · 3585 阅读 · 1 评论 -
ElementUI使用autocomplete组件输入搜索
<el-autocomplete v-model="clientName" :trigger-on-focus="false" highlight-first-item :fetch-suggestions="queryName" @select="getSelect" placeholder="请输入查询姓名"></el-autocomplete>queryNa...原创 2020-03-31 15:28:25 · 688 阅读 · 0 评论 -
ElementUI使用Cascader实现省市区三级联动
效果图省市区的Json数据下载链接下面是公司上传的CDN，可以直接去引用<script src="https://cdn.suoluomei.com/common/js2.0/city-data/city-data.js"></script>省市区的Json格式这样就实现了省市区的三级联动 <el-cascader v-model="area" :...原创 2020-03-31 15:03:40 · 2604 阅读 · 0 评论 -
ElementUI实现Upload文件上传服务器交互
<!-- :data为上传后台额外的参数 --> <!-- action为服务器链接 --> <!-- getupload、getdel为上传成功和删除的钩子 --><el-upload accept="image/*" :data="upload" action="http://uploadFile" :file-list=...原创 2020-01-06 15:12:37 · 2630 阅读 · 6 评论 -
ElementUI实现表格分页功能
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2019-11-11 16:58:26 · 955 阅读 · 0 评论 -
Vant+px2rem搭建移动端项目
第一步 安装px转rem的插件npm i lib-flexible postcss-px2rem --s在根目录添加postcss.config.js文件module.exports = { plugins: { autoprefixer: {}, "postcss-px2rem": { remUnit: 75, // 设计图为750 * height r...原创 2020-04-29 16:49:16 · 1054 阅读 · 0 评论 -
Vant引入CDN实现图片懒加载
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="https:/原创 2020-05-27 09:50:03 · 1489 阅读 · 5 评论 -
Vant实现预览富文本图片
npm install weixin-js-sdk <div class="rich" v-html="synopsis" @click="getpreview($event)"></div><script>import wx from "weixin-js-sdk"; getpreview(e) { if (e.target.tagNa...原创 2019-11-25 11:29:00 · 3110 阅读 · 0 评论 -
Vant实现省市区三级联动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalab...原创 2020-04-17 17:10:07 · 3173 阅读 · 5 评论 -
VantUI封装自定义Tabbar路由跳转
效果图点击不同的图标切换不同路由，并且切换自定义图片因为这是个底部栏，需要把它封装成组件，我这里有三个底部栏地址，就需要被引到三个地方组件tabbar.vue<template> <van-tabbar v-model="active" active-color="red"> <van-tabbar-item v-for="(item,inde...原创 2019-08-30 15:47:29 · 16825 阅读 · 17 评论 -
VantUI实现list列表分页显示
<template> <van-list v-model="loading" :finished="finished" loading-text="正在加载中..." finished-text="暂无评论" @load="getsummarylist" > <div class=...原创 2019-11-19 17:47:43 · 7998 阅读 · 6 评论 -
Vant使用IndexBar索引栏
数据类型是二维数组<template> <div> <van-index-bar :index-list="indexList"> <div v-for="(item,index) in peopleList" :key="index"> <van-index-anchor :index="item.index" /> <div class="cell" v-for="(row,in.原创 2021-01-15 14:30:17 · 3582 阅读 · 0 评论 -
Axios调用后台接口
//get请求 axios.get('http://php.com', { params: { } }) .then(function (res) { //成功的回调 }) .catch(function (error) { //失败的回调 ...原创 2019-11-20 16:33:04 · 343 阅读 · 0 评论 -
lib-flexible引入到Vue做移动端rem布局
第一步 在项目中安装lib-flexiblenpm install lib-flexible --save第二步 在main.js中引入lib-flexibleimport 'lib-flexible/flexible.js'第三步 去index.html里把meta name="viewport标签注释掉"<!-- <meta name="viewport" con...原创 2019-07-30 09:57:07 · 1098 阅读 · 0 评论 -
引用lib-flexible导致第三方Ui库缩小
我是引用vant组件根目录下找到package.json添加"postcss": { "plugins": { "autoprefixer": {}, "postcss-px2rem-exclude":{ "remUnit": 37.5, "exclude":"/node_modules|floder_name/i" ...原创 2019-09-10 13:49:17 · 1122 阅读 · 0 评论 -
VueRouter实现路由嵌套单页面展示
放两张效果图在这里点击政治现实政治的页面，历史同理，而且域名路径发生了变化，但是却在同一个页面首先先建两个文件，child.vue和son.vue再配置路由import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)export default new Router({ mode: 'history',...原创 2019-08-24 14:27:15 · 1419 阅读 · 0 评论 -
VueRouter路径切换过渡动画
实现简单的页面切换淡入淡出效果<template> <div id="app"> <transition name="fade" mode="out-in"> <router-view></router-view> </transition> </div></templ...原创 2019-08-23 17:30:49 · 445 阅读 · 0 评论 -
VueRouter路由懒加载
官方回答:当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。这是配置的路由懒加载import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)export default new Route...原创 2019-08-17 15:47:49 · 262 阅读 · 0 评论 -
VueRouter实现多种页面跳转
router-link这种跳转方式类似于传统的a 标签实现跳转 <router-link to="./shop">Go Shop</router-link>this.$router.push用的较多的是使用方法进行跳转然后实现页面之间的传参<div @click="gohome">我要去home</div><script>...原创 2019-08-12 09:45:06 · 2518 阅读 · 0 评论 -
Axios封装请求后端接口
在src中新建一个axios文件夹，建一个request.js文件import axios from 'axios';import $qs from 'qs';axios.defaults.baseURL ='https://msg.csdn.net/v1/web/message/view/';//源地址export default { post(url,data={}){ ...原创 2019-08-22 17:38:54 · 389 阅读 · 0 评论 -
Vuex的简单入门
在Vue项目中安装Vuexnpm install vuex --save在src目录下新建个store文件夹，里面新建index.js在index.js文件夹中创建Vuex实例import Vue from 'vue'import Vuex from 'vuex'//使用VuexVue.use(Vuex);//创建Vuex实例const store=new Vuex.Sto...原创 2019-08-22 09:38:10 · 287 阅读 · 0 评论 -
vue引入echarts实现数据可视化
安装npm install echarts -Smain.js全局引入import echarts from 'echarts'Vue.prototype.$echarts = echarts<template> <div class="box"> <div id="polyLineChart" :style="{width: '300px', height: '300px'}"></div> </div></原创 2020-07-07 16:43:51 · 1729 阅读 · 0 评论 -
Vue引入highCharts实现数据可视化
效果图文档Api地址安装npm install highcharts-vue在main.js进行全局配置import HighchartsVue from 'highcharts-vue'Vue.use(HighchartsVue)<highcharts :options="chartOptions"></highcharts><script>export default { data() { return { chartO原创 2020-05-27 16:50:45 · 620 阅读 · 0 评论 -
vue-lazyload实现图片懒加载
文档链接安装npm i vue-lazyload -Smain.js全局引入import VueLazyLoad from 'vue-lazyload'Vue.use(VueLazyLoad, { preLoad: 1.3, error: '', //错误图占位 loading: '',//加载图占位 attempt: 1}) <img v-lazy="item.imgurl" alt /> <div v-lazy:background-image=原创 2020-09-01 11:16:54 · 369 阅读 · 0 评论 -
vue-ripple-directive点击水波纹
安装npm install vue-ripple-directive --savemain.js引入import Ripple from 'vue-ripple-directive'Vue.directive('ripple', Ripple);Ripple.color = 'rgba(0, 0, 0, 0.2)'; <div class="rippleBtn" v-ripple>水波纹按钮</div>原创 2020-07-10 16:29:43 · 1413 阅读 · 0 评论 -
浏览器在线预览offce,vue-pdf预览pdf文件
在office官方自带的链接后添加自己的文档链接，浏览器就可以自动解析预览支持 word 、ppt、excel，不支持pdf格式文件 "https://view.officeapps.live.com/op/view.aspx?src=" + http://word;我们引入vue-pdf来在线预览pdf文件文档地址npm install --save vue-pdf<tem...原创 2020-04-03 16:59:24 · 3311 阅读 · 0 评论 -
vue-orgchart做组织架构图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...原创 2019-11-05 15:43:24 · 8925 阅读 · 9 评论 -
vue-json-excel导出excle表格
文档地址名称类型描述默认值dataArray要导出的数据。fieldsObject您要导出的JSON对象中的字段。如果未提供，则将导出JSON中的所有属性。export-fields (exportFields)Object用于解决其他使用变量字段的组件的问题，例如vee-validate。exportFields的工作原理类似于字段typestringMIME类型[xls，csv]xlsnamestring要导出的文件名。d.原创 2020-10-12 15:15:58 · 535 阅读 · 0 评论 -
vue-cropper裁剪图片
文档地址安装npm install vue-cropper组件引入import { VueCropper } from "vue-cropper"; components: { VueCropper, },完整代码<template> <div class="box"> <div class="crop"> <vueCropper ref="cropper" :img="opt原创 2020-10-09 17:37:32 · 420 阅读 · 0 评论 -
vuedraggable实现列表拖动排序
文档地址安装npm i -S vuedraggable页面进行导入import draggable from "vuedraggable";完整代码效果<template> <div class="box"> <draggable v-model="list" chosenClass="active" animation="500" @end="dragEnd"> <div class="row" v-for="(item,.原创 2020-09-17 10:03:44 · 467 阅读 · 0 评论 -
vue-drawer-layout实现手势滑出菜单栏
文档链接地址安装npm install vue-drawer-layout --savemain.js导入import DrawerLayout from 'vue-drawer-layout'Vue.use(DrawerLayout)完整代码<template> <div class="box"> <vue-drawer-layout :drawer-width="230" ref="drawerLayout" @mask-click="clo.原创 2020-09-17 13:44:54 · 586 阅读 · 0 评论 -
vue-waterfall-easy实现瀑布流布局
文档地址安装npm install vue-waterfall-easy --save-dev页面引入import vueWaterfallEasy from "vue-waterfall-easy";components: { vueWaterfallEasy,},完整代码<template> <div class="box"> <div class="waterfall"> <vue-waterfall-easy.原创 2020-10-27 16:09:11 · 958 阅读 · 1 评论