vue
王竹根
平凡之路,砥砺前行
展开
-
webpack插件+配置+打包
webpack-dev-serverwebpack打包处理文件模块webpack中的loaderwebpack-loader处理流程webpack打包处理less文件webpack-url-loader-图片转换base64的urlimport样式cssbabel-loader打包处理js高级语法打包处理js高级语法-bable-loader配置babel-loaderbabel-loader使用webpac...原创 2021-11-01 11:46:45 · 356 阅读 · 0 评论 -
npm ERR! cb()缓存问题 Cannot download “https://github.com/sass/node-sass
针对 npm ERR! cb() never called! 问题出现问题的场景:1接手新项目,先是通过cnpm install安装依赖,然后node-sass一直显示下载中,无法完成安装2使用npm+镜像安装npm install --registry=https://registry.npm.taobao.org解决方法:一、首先要以管理员模式打开cmd清除你的npm缓存 :npm cache clean -f二、清除完缓存后,安装最新版本的Node helper:.原创 2020-12-21 19:13:57 · 403 阅读 · 0 评论 -
web积累
z-index/层叠上下文:1.简单理解就是z轴上的位置2.深入理解层叠顺序(实际上,大部分元素的层级都低于z-index=0)3.记住一个重要的结论:定位元素创建新的层叠上下文z-index=50,高于另外一个层叠上下文z-index=10的所有层叠等级 .one —— z-index = 10 .two —— z-index = 10.100 .three —— z-index = 10.150 .four —— z-index = 50原创 2020-12-21 10:41:48 · 109 阅读 · 0 评论 -
Vue中的模块化以及封装-storage数据持久化
效果:1编写封装storage.jsvar storage = { set(key, value) { localStorage.setItem(key, JSON.stringify(value)); }, get(key) { return JSON.parse(localStorage.getItem(key)); }, remove(key)...原创 2019-03-07 12:39:28 · 1130 阅读 · 0 评论 -
vuex
为什么要使用Vuex?父组件下有多A、B子组件, 子组件之间通讯使用vuex变的简单方便。Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 1.vuex解决了组件之间同一状态的共享问题 (解决了不同组件之间的数据共享) 2.组件里面数据的持久化。 如何引入Vuex?下载vuex: cnpm install vuex --save在main....原创 2019-03-19 19:03:39 · 114 阅读 · 0 评论 -
vue-传值
1.动态路由传值Home.vue<ul> <li v-for="(item,key) in list"> <!--<router-link :to="'pcontent?id='+key"> {{item}}&#45;&#45;{{key}}</router-link>--&原创 2019-03-15 14:51:49 · 230 阅读 · 0 评论 -
vue路由嵌套
/*路由的嵌套 1.配置路由 { path: '/user', component: User, children:[ { path: 'useradd', component: UserAdd }, { path: 'userlist', component: Userlist } ] ...原创 2019-03-25 11:51:36 · 147 阅读 · 0 评论 -
mint-ui
mintUI的使用: 1.找官网 2.安装 npm install mint-ui -S -S表示 --save 3.引入mint Ui的css 和 插件 import Mint from 'mint-ui'; Vue.use(Mint); import 'mint-ui/lib/style...原创 2019-03-25 19:15:20 · 797 阅读 · 0 评论 -
vue-scroller
效果:下拉刷新,上拉分页加载更多数据首先在命令行进行npm||cnpm下载cnpm install vue-scroller -D-D:就是 --save -dev然后在你想要用scrolle的那个页面里将咱们刚才下载的东西引入 import Vue from 'vue' import VueScroller from 'vue-scroller' Vue....原创 2019-07-01 15:26:57 · 1660 阅读 · 1 评论 -
vue-swiper轮播图
效果:代码:<!--<link rel="stylesheet" href="icon-font-che/iconfont.css">--><template> <div> <swiper class="swiperMain"> <swiper-slide class="swiper-sli...原创 2019-07-12 11:03:19 · 2435 阅读 · 0 评论 -
初学者可能不知道的vue技巧
1.setTimeout/ setInterval 场景一:this指向改变无法用this访问vue实例 mounted(){ setTimeout( function () { //setInterval同理 console.log(this); //此时this指向Window对象 },1000) ; } 解决方法:使用箭头函数或者...原创 2019-03-04 17:01:46 · 799 阅读 · 2 评论 -
vue父子组件交互
重点:父组件主动获取子组件的数据和方法: alert(this.$refs.header.msg); this.$refs.header.run();子组件主动获取父组件的数据和方法: this.$parent.数据 this.$parent.方法par...原创 2019-03-08 20:20:15 · 261 阅读 · 0 评论 -
vue实现添加删除列表
通过子父类之间的传值进行操作效果:父类://注意引入的位置<template> <div> <input v-model="inputValue"/> <button @click="handleSubmit">提交</button> <ul>原创 2019-03-02 17:25:10 · 910 阅读 · 0 评论 -
vue-WebStorm报错设置
vue 关闭vue项目中烦死人的ESlinthttps://blog.csdn.net/qq_36888550/article/details/798151951 错误expected indentation of 0 spaces but found 2 . vue eslint规则和WebStorm冲突解决:修改IDEA或webstorm配置,File => Sett...原创 2018-11-17 16:50:26 · 1977 阅读 · 0 评论 -
vue实战积累-纯技术
微信js扫一扫,扫条码去掉code_128wx.scanQRCode({ needResult: 0, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果, scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码,默认二者都有 success: function (res) { var result ...原创 2020-06-12 14:31:55 · 573 阅读 · 0 评论 -
vue倒计时
10分钟倒计时<script> export default { name: "Home", data() { return { time: { D: '', h: '', m: '00', s: '00', },}} methods: {/...原创 2018-12-05 13:56:28 · 462 阅读 · 0 评论 -
vue-绑定class实现动态切换按钮背景颜色
动态的绑定class<template> <div class="pay"> <div class="pay-container" v-for="(list,index) in payconfigEntities" v-bind:class="{colorChange:index==dynamic}" dir原创 2018-12-05 14:27:04 · 16841 阅读 · 7 评论 -
vue-移动端适配
1.选用750X1334的iphone6尺寸的设计图纸安装 lib-flexiblecnpm install lib-flexible --saveflexible是一个制作H5适配的开源库在项目入口文件main.js中引入lib-flexibleimport 'lib-flexible/flexible.js'2.安装插件px转remcnpm install px2...原创 2018-12-05 14:42:48 · 271 阅读 · 0 评论 -
vue和sass
Sass是一个将脚本解析成CSS的脚本语言如何在vue中使用sasscnpm install node-sass --save-dev//安装node-sasscnpm install sass-loader --save-dev//安装sass-loadercnpm install style-loader --save-dev//安装style-loader有些...原创 2019-01-18 16:09:58 · 269 阅读 · 0 评论 -
vue按需引入ui库、同时引入两种组件库
按需要引入 Mint UI ,有两种情况: 1. 引入全部组件 如果项目会用到 Mint UI 里较多的组件,最简单的方法就是把它们全部引入。此时需要在入口文件 main.js 中:import Mint from 'mint-ui';Vue.use(Mint);import 'mint-ui/lib/style.css'; 2. 按需引入 如果你只需要...原创 2019-02-15 10:13:39 · 16038 阅读 · 5 评论 -
echarts柱状图
隐藏x,y轴线+饼状图+横向柱状图+两种类型数据<template> <div class="container"> <div style="color:#fff">111</div> <div>隐藏x,y轴</div> <div id="traffi...原创 2019-02-12 09:45:22 · 902 阅读 · 0 评论 -
vue-选择省份城市
1.使用select2.通过watch动态的监听刷新数据布局 <select v-model="Province"> <option v-for="option in arr" :value="option.name"> {{ option.name }} </option> &l原创 2019-02-18 20:38:46 · 5216 阅读 · 0 评论 -
Vue.js devtools插件使用说明
Vue.js devtools插件下载2018-06-03版本 网盘地址:https://pan.baidu.com/s/14PoaihUHQZEJtiHNWUmdjg谷歌插件安装谷歌浏览器中扩展程序,开启开发者模式方法一:在浏览器中打开,更多工具-扩展程序 2、在把刚刚下载的文件拖进打开的页面中。3、安装后页面如下。同时勾选“开发者模式”。此时会出...原创 2018-11-19 11:12:44 · 7314 阅读 · 3 评论