vue
yangdongnan
思无涯,无止境
展开
-
IDE webstrom 文件模版 .mpx
mpx 小程序框架模版<template> <view></view></template><script> import {createComponent} from '@mpxjs/core' createComponent({ mixins:[]原创 2018-12-12 14:12:45 · 459 阅读 · 0 评论 -
vuex使用 store.js
store.js 状态汇总文件 暴露import Vue from 'vue'import Vuex from 'vuex'import createPersistedState from 'vuex-persistedstate'import actions from './store/actions'import mutations from...原创 2019-03-07 16:38:48 · 992 阅读 · 0 评论 -
webpack中 hash chunkhash contenthash的不同
原文:https://blog.csdn.net/bubbling_coding/article/details/81561362在webpack中有时需要使用hash来做静态资源实现增量更新方案之一,文件名的hash值可以有三种hash生成方式,每一种都有不同应用场景,那么三者有何区别呢?hash、chunkhash、contenthashhash一般是结合CDN缓存来使用,通过webpa...转载 2019-03-07 16:49:17 · 236 阅读 · 0 评论 -
怎么写一个vue-插件? loader加载进度条示例
前文要写一个vue的组件要么根据项目来写要么是自己构造轮子看过很多组件的写法, 无论是你怎么做, 都离不开三个东西 vue实例, dom, 你要实现的逻辑代码地址github https://github.com/nan1010082085/VueComponents/tree/master/loaderloader 组件实现引用import Loader from ...原创 2019-03-20 18:58:19 · 1586 阅读 · 2 评论 -
项目中,用过到的组件,记录一下
https://github.com/nan1010082085/VueComponents原创 2019-03-13 10:53:41 · 153 阅读 · 0 评论 -
Vue中props .sync修饰符的使用示例
前文一般情况下我们由父组件传递给子组件的对象并不想在子组件修改对象时改变父组件对象的原数据。这种情况通常在watcher时是使用深度克隆对象供子组件使用,避免某些在数据改变时渲染bug问题但是有一些特殊的得情况需要更新父组件中的数据。这就是下面要说 .sync修饰符正文我们有两个组件父组件 views2<template> <div> <d...原创 2019-03-13 16:28:22 · 3177 阅读 · 0 评论 -
vue 2.6以上 v-slot的改变为你带来更加明确的代码
转自vue官方文档https://cn.vuejs.org/v2/guide/components-slots.html#作用域插槽前文v-slot 的出现让 slot这个插槽变得更加明确,本人认为这个插槽使用起来更加明确且简单尤其是缩写的出现, << # >>作用域插槽自 2.6.0 起有所更新。已废弃的使用 slot-scope 特性的语法在这里。有时...原创 2019-03-13 18:05:00 · 1683 阅读 · 0 评论 -
vue项目中使用 pinyin转换插件
npm install js-pinyin具体使用的文件中 importimport pinyin from '../../../node_modules/js-pinyin/index'使用console.log(pinyin.getFullChars('管理员')) //GuanLiYuan;console.log(pinyin.getCamelChars('管理员'...原创 2019-03-29 09:40:07 · 8645 阅读 · 5 评论 -
如何在vue项目中配置你自己的启动命令和打包命令
前文在开发中,通常会需要和后台做一些开发调试, 本地开发, 和线上观测这时 如何用一套代码 加上 几个命令来轻松的做到这些?准备首先除vue项目外 我们还需要安装几个额外的包来帮助我们这只是在 vue-cli2 中的配置 当然 vue-cli3 也可以通过如下方法来配置一些环境 npm i cross-env shelljs -Dcross-env 可以帮助我们更好的来使用更好的...原创 2019-03-29 10:05:01 · 4854 阅读 · 0 评论 -
vue cli3 搭建一个通用中台(一)
初始化项目vue create vue-asgisncd vue-asgisnnpm run serve一、 已经初始化项目后, 为了开发方便以及维护, 新增一些文件夹 - store //如果用到vuex 此文件用来维护状态 - router //路由的一些配置 - utils //一些公共方法等 - api //接口api之类二、 项目中针对开发环境与生产环境单独配...原创 2019-04-15 17:10:56 · 1207 阅读 · 0 评论 -
vue 递归组件使用示例
前文我们需要做一个树形组件用来展示一些无限子级的数据时就要用到vue提供的递归组件首页了解一下 vue 中 name属性 为什么 export 有name这个属性name类型:string限制:只有作为组件选项时起作用。详细:允许组件模板递归地调用自身。 注意,组件在全局用 Vue.component() 注册时,全局 ID 自动作为组件的 name。指定 name 选项的另...原创 2019-04-16 17:10:39 · 925 阅读 · 0 评论 -
vue cli3 搭建一个通用中台(二)
前文上一文中已经完成了项目的创建和环境的配置本文将完成以下几点用户登录页面mock数据模拟请求动态路由构建开始先安装我们需要的依赖npm i element-ui axios mockjs vuex-persistedstate vue-particles -S介绍mockjs --> 用来模拟请求element-ui --> 本项目中使用的ui库a...原创 2019-04-22 10:54:00 · 880 阅读 · 1 评论 -
vue render jsx 事件绑定 条件渲染 slots 插槽
前文vue中使用 render写一些展示组件通过实现一个简单的单元 cell 组件, 来了解render jsx 在vue的使用将 h 作为 createElement 的别名是 Vue 生态系统中的一个通用惯例,实际上也是 JSX 所要求的。从 Vue 的 Babel 插件的 3.4.0 版本开始,我们会在以 ES2015 语法声明的含有 JSX 的任何方法和 getter 中...原创 2019-04-26 15:07:10 · 8227 阅读 · 0 评论 -
vue cli3 搭建一个通用中台(完)
前文已经完成这个架子的搭建关于登录本地实现图形码, 当然这个并不安全关于 router路由实现到三级动态路由mock中存有路由数据github 地址 https://github.com/nan1010082085/Vue-Asgin.gitcoding 地址 https://git.dev.tencent.com/nan1010082085/vue-asgin.gi...原创 2019-05-06 21:40:48 · 1088 阅读 · 1 评论 -
vue+ts项目 封装element-ui的messagebox
场景问题: 有一个在项目非常常用的确认弹框, 并且使用element-ui的 messageBox;我们不想在每一业务中大量的复制那么多的代码,解决办法: 封装一个函数调用,尽可能给出操作回调代码代码连接 githubimport {MessageBox} from 'element-ui';Vue.prototype.$msgbox = MessageBox;//msgbox....原创 2019-07-12 18:22:12 · 1246 阅读 · 0 评论 -
vue项目中, pdf解析组件
pdf解析组件github地址 https://github.com/nan1010082085/vue-components/tree/master/pdfmain.js 引入使用import PDF from 'pdf'Vue.components('PDF', PDF)//使用<PDF :visible="visible" :pdfUrl="src"><...原创 2019-03-06 15:51:01 · 449 阅读 · 0 评论 -
vue项目中使用rimraf dev启动时删除dist目录
//适用 vue 2.x vue 3.x已经会在启动时自动删除dist目录webpack.dev.conf.js'use strict'const utils = require('./utils')const webpack = require('webpack')const config = require('../config')const merge = require('w...原创 2019-03-05 22:46:00 · 1672 阅读 · 0 评论 -
IDE webstorm 模版文件 Vue
Vue 模版文件因为长使用less 所以css编译语言定义为 lang=“less”&lt;template&gt;&lt;/template&gt;&lt;style scoped lang="less"&gt;&lt;/style&gt;&lt;script&gt;原创 2018-12-12 14:12:35 · 156 阅读 · 0 评论 -
使用滴滴mpx 开发一个小程序组件
前文准备工具 webstorm idenpm i @mpxjs/col一路回车 先搭建个小程序项目 https://didi.github.io/mpx/小程序中 组件和页面分的很明确, mpx中一样createComponent 创建一个组件createPage 创建一个页面下面是一个上图下文的list组件代码块&amp;amp;amp;lt;template&amp;amp;amp;gt; &amp;amp;amp;lt;v原创 2018-12-12 18:33:37 · 649 阅读 · 2 评论 -
vue-cli3中 vue.config.js 文件 --本地版本@vue/cli ^3.3.0
module.exports = { //部署应用的基本url 可用 process.env.NODE_ENV 环境变量控制 baseUrl: '/', //指定生产环境目录 outputDir: 'dist', //指定生成静态资源的生成目录 assetsDir: 'static', //指定生成的index.html的输出名 indexPath:'index....原创 2018-12-12 19:30:29 · 2796 阅读 · 0 评论 -
vue 移动端 滚动组件 支持touch swipe
分享 vue 移动端 滚动组件 支持touchhttps://github.com/nan1010082085/vue-components/tree/master/swipe原创 2019-01-11 20:59:06 · 389 阅读 · 1 评论 -
wndow.popstate,微信浏览器返回事件, vue mixins
微信浏览器返回键按下跳转路由 window popstate, Vue全中 写入 mixins文件引入main.js 全局引入import popstate from './components/newComponent/popstate'Vue.mixin(popstate)使用使用时 this.init(‘router’)此处router为 留有name属性值ro...原创 2019-01-18 13:21:54 · 2225 阅读 · 2 评论 -
分享 vue中文社区文章 介绍 vue 10中组件之间通信。
介绍 vue 10中组件之间通信。从中你能找到你用过没用过的。微信公众号了链接https://mp.weixin.qq.com/s/0u0D-Ge8RaTjdFPlkHmOvw转载 2019-01-13 12:18:44 · 197 阅读 · 0 评论 -
4级联动 地址组件 移动端
先发一张手机效果图支持每列单独滑动点击名字选中当前地址点击蒙层 close响应 传递当前数据点击确定 confirm响应 传递当前数据目录mixin ==&amp;amp;gt; 混入文件 控制后三列滑动util ==&amp;amp;gt; 工具文件, 克隆传递过来的数据getAddress.js //获取数据文件 需要在父组件混入propsvisible 控制组件显示隐藏province...原创 2019-01-19 16:32:57 · 3296 阅读 · 1 评论 -
vue项目初始化目录, 包含微信jssdk一些配置 @vue/cli版本^3.3.0
github地址 https://github.com/nan1010082085/vue-components/tree/master/%40vue3-catalogsrc 目录下原创 2019-01-25 19:03:44 · 624 阅读 · 0 评论 -
vue 插件 你可能需要的轮子 集合
第一波连接 轮子工厂 vuehttp://www.wheelsfactory.cn/#/home?filter=vue移动端 -- 控制台 vConsolehttps://github.com/Tencent/vConsole/tree/1eef3bee16ead445cec0264a1111e0912bf1265b原创 2019-01-16 11:40:56 · 1393 阅读 · 1 评论 -
Vue-Router, 路由独享的守卫的使用 beforeRouteLeave
一些需求都可以通过阅读文档来解决,简单说下 组件内守卫 使用时next() 方法使用的问题官方文档 https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#全局后置钩子beforeRouteLeavea 页面 b 页面当从a页面 进入 b页面时,b页面做了一些操作, 在b页面判断离开时,//使用组件内...原创 2019-01-22 12:47:15 · 14359 阅读 · 1 评论 -
vue弹出层 +内容手风琴 简单实现
效果草图代码:<!--固定样式弹层--><template> <div class="e-popup"> <div class="e-popup-container"> <!--手风琴--> <div> <div class="e-accordi原创 2019-02-11 11:49:27 · 854 阅读 · 0 评论 -
新版本@vue/cli3.x 无法热更新问题
关于这个问题, 我自己也测试了一些解决方案我是使用 webstorm 开发 也尝试修改了 编辑器的配置项但是毫无作用我尝试了更新 @vue/cli , cli-service vue等东西但是也毫无作用官方github中有此问题 issues地址 :https://github.com/vuejs/vue-cli/issues/3480应用其中回答者给出的解决方案实测使用yarn重...原创 2019-02-28 14:47:39 · 6614 阅读 · 0 评论 -
vue自定义日历组件
代码地址https://github.com/nan1010082085/vue-components/tree/master/CustomCalendar享一下组件目录tip: 组件功能:展示当前年份当前月,支持左右 icon自定义支持自定义当前日提示边框颜色支持自定义某一日选择背景颜色, 边框染色如已经自定义边框颜色则为自定义颜色某一日选中采用圆点模式使用引入 mai...原创 2019-03-01 20:32:22 · 827 阅读 · 0 评论 -
一个关于子网与掩码输入的组件基于elementui
copy链接 github带有掩码的不带掩码的截图可能会被吐槽一下 不过不带掩码的只是没有后面部分prop参数size :'mini' 为不带掩码 ' '空值为带掩码 可选 默认空值defValue:这是一个默认值placeholder:掩码输入框的提示文案组件提供的便利判断了输入长度自动跳转下一个ip输入判断的回退键delete删除到空值在按下自动跳转上...原创 2019-08-27 19:11:18 · 572 阅读 · 0 评论