vue
关注
分享
扫一扫
文章平均质量分 54
vue
zhooson
记录日常开发问题及方法，如有错误，欢迎指点
展开
-
好“哇塞”全栈博客系统，看看是怎么实现的吧？
只说重点，不说废话和解释，自己去看代码， 不贴大量的图片的，下面的demo链接都可以看。1. 开发环境介绍node 10.24.02. 体验demo前端博客：demo (支持移动端访问).admin系统： 游客模式访问. 账号：test 密码：0000微信小程序搜索：10个肉包子3. 功能文章分类登录 注册验证码（手机／邮箱）ip限流评论回复（敏感词校验）4. 技术栈PC博客： vue全家桶PC后台管理系统：react全家桶+antd小程序端： mpvue.原创 2021-09-09 10:50:22 · 282 阅读 · 0 评论 -
git commit 代码提交规范
创建vue新项目vue create hello安装代码格式化工具 文档yarn add --dev --exact prettier 创建的 json 配置的文件(根据自己需求去配置参数)echo {}> .prettierrc.json提交代码自动格式化代码 文档npx mrm lint-staged 查看packgae.json代码，发现多了部分代码 "husky": { "hooks": { "pre-commit": "li.原创 2021-02-02 19:17:44 · 231 阅读 · 0 评论 -
手把手教你 vue3 写个简单的购物车DEMO
先上效果图：demo传送门github 地址代码：export default defineComponent({ name: "APP", setup(props, context) { const { shop_list, added: cartProducts } = state; let data = reactive({ shop_list, cartProducts, }); // 添加购物车 const ad原创 2020-11-10 10:24:35 · 1882 阅读 · 0 评论 -
js 实现大屏数字滚动效果
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Vue学习</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.8/vue.min.js"></script> <style> .box { .原创 2020-06-19 17:19:28 · 2101 阅读 · 0 评论 -
基于Vue实现拖拽效果之数组拖拽排序
拖拽的核心是：dragstart， dragenter, dragend 的方法动画采用 transition-group 的方法<!DOCTYPE html><html lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-s.原创 2020-06-11 11:41:02 · 2983 阅读 · 5 评论 -
基于Vue实现拖拽效果之拖拽指令
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script src="https://cdn.bootcd.原创 2020-06-11 10:55:06 · 1360 阅读 · 0 评论 -
基于Vue实现拖拽效果之临界限制
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script src="https://cdn.bootcd.原创 2020-06-11 10:43:29 · 1853 阅读 · 0 评论 -
vue push路由报错
报错信息如下：原因： 因为push的同一个路由的引起的。方案：新一个realodTime的参数import merge from "webpack-merge"; this.$router.push({ query: merge(this.$route.query, { cid: result[0].value, reloadTime: +new Date() }) });...原创 2020-05-25 18:55:58 · 498 阅读 · 0 评论 -
vue 动态修改路由参数
import merge from 'webpack-merge'； 修改原有参数 this.$router.push({ query:merge(this.$route.query,{'id':'1'})}) 新增参数：this.$router.push({ query:merge(this.$route.query,{'name':'张三'})}) 替换所有参数： this.$router.push({ query:merge({},{'tes原创 2020-05-25 13:12:48 · 2050 阅读 · 0 评论 -
vue 实现 tooltips的效果
移动端 tootips的截图移动端 gif演示移动端的 tooltips：1. 移动端ios没有hover事件，需要用touchstart的来代替，采用的方案 添加 ontouchstart 的事件2. 自定义的上下左右的 不同的位置具体代码：tooltips 封装好的组件<style lang="scss" scoped>// $bg: rgba(#3078e7...原创 2020-04-26 20:39:00 · 1934 阅读 · 0 评论 -
vue打包上线项目报错webpackJsonp is not defined
见： 添加链接描述原创 2020-03-31 20:18:20 · 3302 阅读 · 2 评论 -
vuex mutation action同级调用
flex属性：display:flex flex-direction: row | row-reverse | column | column-reverse; flex-wrap: nowrap | wrap | wrap-reverse; justify-content: flex-start | flex-end | center | space-betw...原创 2020-02-29 23:24:08 · 2009 阅读 · 0 评论 -
vue h5 上传图片角度旋转问题
场景还原： 手机上传人脸照片，但是发现图片是旋转了90度，这个奇葩的问题。解决方法如下。index.html 引入： <script src="https://cdn.jsdelivr.net/npm/exif-js"></script> <template> <div class="file dc"> <input...原创 2020-03-31 15:21:26 · 1320 阅读 · 0 评论 -
如何实现echarts双Y轴左右刻度线一致
关键代码需要计算双Y轴的最大值 最小值interval， splitNumber min: 0, splitNumber: 5, interval: (YLeftMax - 0) / 5,<template> <div class="trend"> <div id="homeEchart" style="width:300px;hei...原创 2020-01-29 17:22:12 · 3363 阅读 · 0 评论 -
左滑删除（vue）
代码：<template> <div class="container"> <div class="page-title">滑动组件</div> <ul> <li class="list-item " v-for="(item,index) in list " data-type="0">...原创 2019-11-18 13:34:08 · 330 阅读 · 1 评论 -
vue2.5打包出来的背景图的路径问题
解决办法为：只需要在build/utils.js文件中添加如下一行代码即可。原创 2018-12-12 13:58:31 · 357 阅读 · 2 评论 -
如何让关闭网页上 sockjs-node/info的接口
如果你的项目没有用到 sockjs，vuecli3 运行 npm run serve 之后 network 里面一直调研一个接口： http://192.168.0.101:8001/sockjs-node/info?t=1560737261281找到/node_modules/sockjs-client/dist/sockjs.js找到代码的 1605行 try { // sel...原创 2019-06-17 10:10:43 · 7621 阅读 · 1 评论 -
You are using the runtime-only build of Vue where the template compiler is not available. Either pre
这种报错原因是 vue有两种形式的代码 compiler（模板）模式和runtime模式（运行时），vue模块的package.json的main字段默认为runtime模式， 指向了"dist/vue.runtime.common.js"位置。compiler模式的：new Vue({ el: '#app', template: '<App/>', compon...原创 2019-05-17 10:05:21 · 396 阅读 · 0 评论 -
echarts系列-----1
本篇讲解最简单的echarts实现方法，具体见代码，并标注注释（例子 文档事例都是有的，传送门原创 2019-05-15 10:15:08 · 209 阅读 · 0 评论 -
vue的列表加载过渡动画
效果实现的方法就是sass for loop方法（参考文章：http://thesassway.com/intermediate/if-for-each-while）只要的重点就是 sass的写法html ： :class="`animation-${index+1}`"css ： $grid-columns: 10; @for $i from 1 through $gr...原创 2019-05-05 13:50:36 · 1862 阅读 · 1 评论 -
table固定表头 上下左右滑动
<style lang="scss">.my-table { font-size: 16px; // width: 1000px; height: 200px; overflow: hidden; border: 1px solid #ccc; position: relative; margin-top: 50px; margin-left: 20...原创 2019-04-26 20:52:53 · 2818 阅读 · 0 评论 -
自己动手撸一个日历,可以选择日期范围
代码就不展示了，移步github https://github.com/liuxingzhijian1320/vue-calendar代码稍微改造一下 也可以小程序中实现原创 2019-01-23 11:19:15 · 830 阅读 · 0 评论 -
自己动手撸一个日历(vue-calendar)
代码就不展示了，移步github https://github.com/liuxingzhijian1320/vue-calendar代码稍微改造一下 也可以小程序中实现原创 2019-01-14 13:24:25 · 948 阅读 · 0 评论 -
vue history 404
当设置了 mode: ‘history’ 第一个页面是出来的，但是重新刷新就是空白页面解决办法：在服务器找到当前项目路径执行 pwd 然后复制路径A打开nginx.cof的文件，代码事例 root /webproject/myblog3/admin; index index.html index.htm; try_files $uri $uri/ /index.html;...原创 2019-06-26 14:15:01 · 422 阅读 · 0 评论 -
elementUI select multiple 默认选中
需求 后端返回几个id，select 默认选中后端返回的格式 tag: ‘1,2,3,4’ // 这些是id这个options数据格式let tagslist = [ { name:'vue', id:1, }, { name:'node', id:2, }, { name:'react', id:3, },...原创 2019-07-19 22:25:47 · 7975 阅读 · 0 评论 -
Vue 实现登录拦截（一）
Vue 实现登录拦截（一）原创 2017-08-18 13:40:02 · 10840 阅读 · 4 评论 -
ElementUi自定义的header
表头显示俩行文字(单个)(见图片) // template <el-table-column prop="test" :render-header="renderHeader"></el-table-column> // methods renderHeader(h) { return [ h("p", {}, ...原创 2019-10-08 22:42:08 · 3027 阅读 · 0 评论 -
koa2 vue mysql 自己撸个博客网站（分享源码）
前端地址：http://www.zhooson.cn前端BLOG功能介绍：首页 （思维导图（树状图））文章 （文章列表，个人分类，热门文章，文章详情，文章目录结构）留言（登录，留言）作品 （历年来的项目地址）关于（关于项目介绍）登录 （普通登录，Github登录）Admin 后台系统功能介绍首页分类管理（CURD）留言管理（CURD，通过，拒绝，回复）文章列表：CU...原创 2019-09-23 10:40:26 · 766 阅读 · 0 评论 -
nuxt线上打包发布
差了很多资料，吧自己的经验总结一下：创建项目vue init nuxt-community/starter-template <project-name> 进行搭建的！打包执行nuxt build 或者 npm run build打包后，发现没有dist文件， 这是这个基础模版配置的，我么也不需要dist文件选择那个文件文件上传到服务器上去？？？？ps: 这里避...原创 2019-09-20 13:50:42 · 9056 阅读 · 3 评论 -
nuxtjs踩坑之旅
创建项目自行查看文档https://zh.nuxtjs.org/guide/installation1. 配置sass编译安装npm包yarn add @nuxtjs/style-resources node-sass sass-loadernuxt.config.js文件添加代码 modules: [ '@nuxtjs/style-resources' ...原创 2019-09-11 23:30:14 · 2676 阅读 · 0 评论 -
vue router 报错： Uncaught (in promise) NavigationDuplicated {_name:""NavigationDuplicated"... 的解决方法
重复点击同一个的路由的发生如下报错我使用vue-router 的版本是 3.0.3解决办法方法1yarn remove vue-routeryarn add vue-router@3.0版本引起的原因，退回版本即可。方法2:（main.js）import Router from 'vue-router'const originalPush = Router.prot...原创 2019-09-05 17:26:02 · 2306 阅读 · 3 评论 -
js 通过H2，H3生成文章目录结构
markdown写的文章，没有生成目录结构功能，自己手动写个，DOM节点如下：本文章只是针对H2，H3的标签的事例（h1～h6只能有个2个标签即可）获取节点 let childrens = document.getElementsByClassName("v-show-content")[0].children, treeArray = [];过滤H2 H3的标签...原创 2019-08-30 16:38:38 · 1683 阅读 · 0 评论 -
koa2 vue mysql 自己撸个博客网站（介绍文章）
一值有个想法自己动手撸个博客网站，也尝试过使用hexo，wordpress搭建过博客，但是它们都是开箱即用的模式，遂自己动手写个前后端整体的项目，刚刚上线的上线这个版本的比较粗糙，也没有做ssr功能，后期打算使用nuxt来重构前端blog页面。先抛出几张图片介绍admin后台系统登录页面文章页面（删除，新增，编辑，上下架，评论列表）标签分类留言板块b...原创 2019-08-27 14:34:36 · 320 阅读 · 0 评论 -
vue 项目实现发 邮件 的功能
新版本vue-cli 生成已经木有server的文件，需要我们手动来创建一个server.js 在更目录下（和index.html同级）server.js （下面的相关参数已经隐藏起来，请用自己的邮箱测试，谢谢）var path = require('path')var express = require('express')var webpack = require('webpac......原创 2018-11-15 17:37:38 · 30640 阅读 · 21 评论 -
vue-cli3 的 [Vue warn]: You are using the runtime-only build of Vue where the template compiler 的问题解决
最近使用vue-cli3的脚手架生成项目，发现从配置完后vue-router的出现一个错误，[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functi...原创 2018-11-04 15:18:15 · 3655 阅读 · 1 评论 -
tab选项卡自动定位中间
tab选项卡自动定位中间原创 2017-10-11 15:47:26 · 4281 阅读 · 3 评论 -
vue 兄弟组件之间的通讯
vue 兄弟组件之间的通讯原创 2017-10-19 16:16:23 · 893 阅读 · 0 评论 -
vue 设置多个反向代理以及easy-mock的简单的使用方法
vue 设置多个反向代理以及easy-mock的简单的使用方法原创 2017-10-06 22:39:47 · 5993 阅读 · 0 评论 -
vue 列表滑动加载数据
vue 列表滑动加载数据原创 2017-09-25 11:35:09 · 5763 阅读 · 0 评论 -
vue 微信分享的实现
vue 微信分享的实现原创 2017-08-22 18:21:33 · 5009 阅读 · 0 评论