vue
关注
分享
扫一扫
文章平均质量分 53
kaiking_g
永远不要把钱看作财富，真正的财富是占据生存资料实现永久不劳而获，不要把赚钱看成了最终目标，你嘲笑按揭买房的人是房奴，事实却是富人都在负债买资产，穷人越存钱越穷!
展开
-
vue2 部署到二级目录下的相关配置
vue2 项目部署到二级目录下原创 2023-01-29 20:01:20 · 1199 阅读 · 0 评论 -
vue.mixin混合机制说明
定义一个混合文件 myMixins.js，在多个组件中引入myMixins.js，相当是在组件中扩展混合文件中定义的东西。1.值为对象的选项，如 methods, components，directives 等，选项会被合并为同一个对象，两个对象键名冲突时，取组件对象的键值对，就是以组件的为准。比如：组件和混合都定义了fn1方法，执行的时候，以组件的为准。2.值为函数的选项，如 created, mounted 等，就会被合并调用，混合对象里的钩子函数在组件里的钩子函数之前调用。比如：组件和混合文件都有原创 2022-07-09 10:12:30 · 438 阅读 · 0 评论 -
解决 Error: Cannot find module ‘webpack-cli/bin/config-yargs问题，实际上webpack和webpack-dev-server的版本问题导致
ps:因为某个依赖，然后更新了webpack版本，后来遇到了一些列的问题：1.Error: Cannot find module 'webpack-cli/bin/config-yargs'...2.Cannot find module 'webpack/lib/RuleSet'...折腾了好久，最后发现是webpack版本与webpack-cli, webpack-dev-server的版本兼容问题导致。webpack 3.x 要使用 webpack-dev-server 2.xwebpack原创 2021-12-23 11:29:09 · 601 阅读 · 0 评论 -
解决 element-ui 的 el-table 自动吸顶（支持fixed）
看了很多案例，从简单的角度，position:sticky，似乎是比较理想的选择，可是当el-table设置了fixed后，这里的fixed会失效。最后还是采用了js监听滚动的思路实现。获取表格距离顶部的距离;设置表格距离顶部多少就吸顶---offsetTop1;获取滚动条滚动的距离;当滚动条滚动了 offsetTop1 后，表格就自动吸顶;原创 2021-09-22 14:49:10 · 8685 阅读 · 36 评论 -
bash: vue: command not found 或则 ‘vue‘ 不是内部或外部命令，也不是可运行的程序或批处理文件。
问题：bash: vue: command not found问题：‘vue’ 不是内部或外部命令，也不是可运行的程序或批处理文件。其实这两个问题都是同一个问题原因1：可能没有安装 vue-cli查看npm安装路径prefix在npm中安装全局文件时，npm会把他安装在npm里面配置的prefix路径下，查看prefix的方法是：npm config list可以设置 prefixnpm config set prefix 你的路径全局安装vue-cli（–global：全局安装）原创 2021-08-22 00:49:38 · 8725 阅读 · 2 评论 -
vue细节复习
watchexport defautl{ data(){ return { testA:0, testB:0, } }, watch:{ testA(){ this.testB = this.testA } }, mounted(){ this.testA = 1 console.log(this.testA, this.testB) // 输出 1，0 }}computedexport defautl{ data(){ return {原创 2021-04-10 17:28:53 · 94 阅读 · 0 评论 -
vue，下载方法，兼容ie,edage,谷歌等等
这里使用axios前端http库；/** * 小文件下载方法 * @param url * @param params * @param fileName 下载文件的名称，包括后缀 * @returns {*|Promise<any>} */ function download (url, methods, data, params, config) { params = params || {} const URL = url.ind原创 2020-09-30 15:11:18 · 588 阅读 · 0 评论 -
详解vue修饰符 sync ，结合案例
vue 修饰符sync的功能是：当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定父组件源码// 父组件源码<template> <div class="app-container"> <Test :parent-obj.sync="parentObj" /> </div></template><script>export default { components: {原创 2020-09-03 11:04:11 · 492 阅读 · 1 评论 -
vue2+element-ui项目打包, element-icons.woff 和element-icons.ttf 字体文件路径错误，解决方法
先修改 config/index.js文件，将 assetsPublicPath 的 ‘/’ 改为 ‘./’卸载现有的element-ui，重新安装npm uninstall element-uinpm install element-ui若不行，则继续往下看由下图可知，通过url-loader将 woff2?|eot|ttf|otf 相关文件打包到 fonts/ 目录下；代码{ test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,原创 2020-06-03 14:45:31 · 5640 阅读 · 4 评论 -
element项目实战所遇到问题汇总
el-select 的change，在初始化页面时候，触发很多次？查看change是否写成了 :change，若是，改成 @change即可。原创 2020-03-09 09:31:49 · 898 阅读 · 0 评论 -
vue，打印案例 window.print() 的完美实现
网页效果图：调用window.print()打印的效果：案例git地址原创 2019-12-25 18:47:55 · 8431 阅读 · 9 评论 -
vue 实现video动态播放本地视频
案例地址：https://gitee.com/kaiking_g/vueStudy.git案例效果图：原创 2019-12-19 21:50:52 · 10493 阅读 · 1 评论 -
crypto-js 加密 和 解密
1.html的引进和使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ht...原创 2019-10-23 10:46:01 · 2621 阅读 · 0 评论 -
关于vscode配置vue项目的eslint配置（整理中）
1.vsocde配置：1.1安装eslint插件2.2配置{ "workbench.colorTheme": "Default Light+", "window.menuBarVisibility": "default", "workbench.statusBar.visible": true, "workbench.activityBar.visible"...原创 2019-09-25 10:23:47 · 3075 阅读 · 0 评论 -
h5的video遮挡弹窗问题处理
背景说明：由于现在微信内置浏览器采用腾讯X5内核，X5内核以增强用户体验为名，给video套上了自己的UI并强制全屏与置顶，这个全屏与层级不接受DOM层面的任何约束；举例：<video ref="videoDom" controls > 您的浏览器不支持 video 标签。 <source :src="./demo.mp4" type="video...原创 2021-12-31 09:15:48 · 1816 阅读 · 0 评论 -
vue项目，自动获取本机ip
=注意：安装之前，先保证webpack项目能正常运行！=在 /build 目录下 创建 ip.js//build/IP.jsconst os = require('os')module.exports = { getIp(){ const ifaces = os.networkInterfaces() const ip = '', result = [] fo...原创 2019-06-27 10:31:49 · 5709 阅读 · 0 评论 -
vue 使用 assign 巧妙重置data数据
由于Object.assign()有上述特性，所以我们在Vue中可以这样使用：Vue组件可能会有这样的需求：在某种情况下，需要重置Vue组件的data数据。此时，我们可以通过this.$data获取当前状态下的data，通过this.$options.data()获取该组件初始状态下的data。然后只要使用Object.assign(this.$data, this.$options.data...原创 2019-05-23 18:43:17 · 6823 阅读 · 2 评论 -
vue基础学习笔记(2)
transtion vue动画使用<transition name="fade"> // 如果这里没有起名字，vue默认使用以v开头的类，比如： v-enter,v-leave等 <div v-show="isShow">是否显示</div> <!-- <div v-if="isShow">是否显示</div&...原创 2019-05-30 23:21:44 · 317 阅读 · 0 评论 -
vue 非父子组件通信（bus，总线，发布订阅模式，观察者模式）
bus总线：总的来说，new一个全局的vue组件：Vue.prototype.bus = new Vue()，然后通过 this.bus.$on() 监听和 this.bus.$emit() 触发 两个事件来达到 兄弟组件间的相互通信// 组件的引用<child content="xie" /><child content="cheng" />...原创 2019-05-31 00:47:27 · 251 阅读 · 0 评论 -
vue基础学习笔记(1)
is特性// 定义一个模板Vue.component('row',{ template: '<tr><td>这是单元格</td></tr>'})// 使用<div id="app"> <table> <tbody> <row&...原创 2019-05-29 00:44:20 · 368 阅读 · 0 评论 -
vue 使用 swiper
执行下面之前，得先保证vue项目能正常启动！1.搜索：到github搜素vue-awesome-swiper 插件github地址：https://github.com/关于安装和引入，可以直接参考该插件提供的详细说明：https://github.com/surmon-china/vue-awesome-swiper#install2.安装// 方式一：普通...原创 2019-06-09 22:34:05 · 1344 阅读 · 0 评论 -
vue中，开发环境下使用模拟数据（axios）
1.安装axiosnpm install axios --save2.使用axiosimport axios from 'axios'export default { methods:{ // index.json放在vue项目中 src/static/mock， // 通过配置，此处的地址 /api/index.json === st...原创 2019-06-09 23:24:26 · 235 阅读 · 0 评论 -
vue 引入 scss
在确保vue项目能正常运行的情况下：一、安装依赖包：// sass-loader 依赖于 node-sassnpm install --save-dev sass-loader node-sass二、配置：在vue项目中，找到 build/webpack.base.config.jsmodule.rules = { // ... 插入这个配置 { ...原创 2019-06-03 23:59:10 · 260 阅读 · 0 评论 -
vue 引入并使用 vuex
执行以下操作前保证vue项目能正常运行1.安装npm install --save vuex2.vuex准备// （1）在src目录下，创建一个文件夹，并命名为 store// （2）在store目录下，创建index.js，内容如下：import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export d...原创 2019-06-11 00:13:34 · 1776 阅读 · 0 评论 -
vue 性能优化篇（持续完善）
移动端上的点击事件，默认会延迟300毫秒，为解决该延迟，引进第三方插件 fastClick// 1.安装npm install fastClick --save// 2.引入，在main.js中引入import fastClick from 'fastclick'fastClick.attach(document.body)...原创 2019-06-04 23:35:46 · 518 阅读 · 0 评论 -
vue 引进并使用 iconfont
引入iconfont前，保证vue项目能正常运行，这里讲述开发环境引进和上线部署环境引进一、开发环境（由于开发环境修改频繁，建议采用font-class，这种方式相对方便，每次增减图片，只需替换链接即可）1.复制链接2.在vue项目下，index.html引进<link rel="stylesheet" href="http://at.alicdn....原创 2019-06-05 00:32:29 · 957 阅读 · 0 评论 -
vue中，@import 后面的波浪号~ 代表什么意思
常常会在vue项目中看到这样的情形：@import '../../../../assets/css/varibles.scss'可以简写为以下：@import '~@/assets/css/varibles.scss'这里的~符号。表示后面的值为alias, 然后就会去 build/webpack.base.conf.js的alias配置中找相应的值, 然后拼接成...原创 2019-06-05 00:57:46 · 7561 阅读 · 2 评论 -
vue 经验集（包含开发过程中的注意事项）（持续完善）
全局事件的解绑关于某组件内部定义的全局事件，若在该组件隐藏时不解绑，将会影响到其他组件，比如以下：// 没解绑的情况：切换到其他组件，页面滚动会输出 "scroll"export default { mounted(){ window.addEventListener('scroll', this.handlerScroll) }, methods:{ ...原创 2019-06-11 21:49:44 · 297 阅读 · 0 评论 -
vue 通过递归组件自我调用，实现 多级 tree
思路：通过递归自我调用，实现多级tree<template> <div class="tree-box"> <div v-for="(item, index) of list" :key="index" class="item border-top"> {{item.title}} <div v-if="item....原创 2019-06-11 22:17:15 · 4506 阅读 · 0 评论 -
vue中快速使用svg方法（自动导入）
1.安装插件：npm install svg-sprite-loader --save-dev2.配置svg-sprite-loader：，在目录build 中找到webpack.base.conf// 注释默认配置// {// test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,// loader: 'url-loader',// o...原创 2019-04-30 15:20:13 · 1984 阅读 · 0 评论