方法一：配置 webpack ProvidePlugin 全局引入假设要使用到 jquery，那么可以通过配置 webpack 的 ProvidePlugin 的插件来全局引入： https://webpack.js.org/plugins/provide-plugin/new webpack.ProvidePlugin({$: jquery,jQuery: jquery }) 方法二：包装成插件在 Vue 中调用 use 方法安装另外一种比较靠谱的方法是将第三方模块打包成插件，如我需要全局使用 echarts，那么在 src 目录下新建一个 lib，并创建名为 echarts.js 的文...
本文实例讲述了Vue.extend实现挂载到实例上的方法。分享给大家供大家参考，具体如下： 这里主要是做个笔记 根据官网的说法，Vue.extend：是使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。 官网的用法是： <div id="mount-point"></div> // 创建构造器 var Profile = Vue.extend({template: <p>{{firstName}} {{lastName}} aka {{alias}}</p>,data: function () {return {firstName: Walter,lastName: Whi...
前阵子将项目搬上Vue的时候偶遇一个突发问题 当对象添加或删除成员时页面无法实时更新渲染，但是数组是正常的 目测是ob没有监听到对象的成员有变化 查看一些大家的求助回答是说ob监听的是数组length的变动 对象默认没有length 新增成员时不会自增length 所以监听不到对象的变化 最近大脑过于疲惫 懒得看文档了。。。 不多废话 解决方式直接上代码 在实例内部可以用$set和$delete this.$set(this.age,age,18); this.$delete(this.ag...
本文我们将学习如何制作一个vue插件，并将其分发到npm上，能够让其他人安装使用.插件大大地提高了开发者的开发效率。我们的大多数项目都依赖于它们，因为它们能够以极快的速度发布新功能。 正如官方Vue.js文档中所述，插件的范围没有限制。通常我们想实现的功能有下面5种: 添加全局方法或者属性 (如: vue-custom-element)添加全局资源：指令/过滤器/过渡等 (如：vue-touch)通过全局 mixin 方法添加一些组件选项 (如：vue-router)添...
本文旨在给大家提供一种构建一个完整 UI 库脚手架的思路：包括如何快速并优雅地构建UI库的主页、如何托管主页、如何编写脚本提升自己的开发效率、如何生成 CHANGELOG 等 前言 主流的开源 UI 库代码结构主要分为三大部分： 组件库本身的代码：这部分代码会发布到 npm 上预览示例和查看文档的网站代码：类似 Vant、ElementUI 这类网站。配置文件和脚本文件：用于打包和发布等等编写此博文的灵感 UI 框架库（ vue-cards ）,PS:此 UI框...
前言 slot可以在子组件中开启插槽，在父组件引用该组建时，可以定义这个插槽内要展现的功能或模块，下面话不多说了，来一起看看详细的介绍吧1.单个slot子组件中在相应位置写slot标签，父组件在引用子组件时，在子组件标签内写要插入插槽的元素；还可以设置slot在父组件没有设置插槽时，子组件的插槽默认显示内容；父组件.vue<template><div class="home"><child-componment><p>这是父组件的slot替代内容！</p></child-componment><...
第一步 安装安装crypto-js第二步 创建在js文件目录下创建一个js文件secret/*** 对页面上输入的密码进行加密传输给后台进行验证，对返回的数据进行解密，在页面展示*/ let CryptoJS = require(crypto-js); // 引入AES源码js export default { /* * 对密码进行加密，传输给后台进行验证 * @param {String} word 需要加密的密码 * @param {String} keyStr 对密码加密的秘钥 * @return {String} 加密的密文 * */ encrypt(word,...
微信分享时 分享链接携带参数可能不是固定的 需要在分享的前一刻才知道 这里就是动态设置分享链接的基本写法 代码不是那么详尽 但大致流程如下 1.安装引用jssdk npm install --save weixin-js-sdk const wx=require(weixin-js-sdk)2.通过config接口注入配置信息 const jsApiList = [onMenuShareQQ, onMenuShareAppMessage, onMenuShareTimeline, updateAppMessageShareData, updateTimelineShareData]methods中的方法getUrl () {if...
一般我们都是在main.js中引入vue，然后在vue文件中直接使用this（this指向的是vue实例），但是在实际开发中，我们往往会引入外部的js文件使用this，这个this就会指向window，并不是我们期待的vue实例，那么就需要重新引入vue文件（import Vue from vue）,这样很麻烦。在目前项目中我使用的方法是mian.js导出vue实例，然后在需要使用的js中引入。 步骤一：main.js导出vue实例 var vue = new Vue({el: #app,router,components: { App...
fetch的由来和定义 fetch的由来 众所周知，传统 Ajax （指 XMLHttpRequest）是最早出现的发送异步请求技术，其核心是使用XMLHttpRequest对象。但是它也存在一些令人头疼的问题：XHR 是一个设计粗糙的 API，不符合关注分离的原则；配置和调用方式非常混乱，而且基于事件的异步模型写起来也没有现代的 Promise，generator/yield，async/await 友好。而Fetch 的出现就是为了解决 XHR 存在的问题。 fetch的定义和使用 MDN中的描述...
1.第一步，这是目录结构2.接下来是build/webpack.dev.conf.js文件需要配置的内容代码： //vue配置请求本地json数据 const express = require(express) const app = express() const appData = require(../static/major_info.json)//加载本地json文件 const majorlist = appData.contents;//获取本地对应数据 const apiRoutes = express.Router() app.use(/api,apiRoutes) 代码： before (app) {app.get(/api/majorlist,(req, res) ...
本文针对的是Vue小白，不喜勿喷，谢谢 出现该问题的标志如下控制台warning（Resource interpreted as Stylesheet but transferred with MIME type text/html）出现的原因及解决办法 第一种可能出现原因就是引入的静态文件在src文件夹内，这种的解决办法就是把资源引入静态资源的目录static 第二种可能出现的原因就是有单独的静态资源目录但是名字不叫static，这种的解决办法更改配置文件，把对应的几个配置文件内的static更改为你自...
不需要依赖第三方组件的vue日期移动端组件 小轮子 轻量可复用: https://github.com/BeckReed/datepicker-for-vue 2.用法：参见 src/view/demo.vue 文件的用法，简单易懂 <div><h3>三列(年月日)日期弹窗示例--带标题)</h3><button class="blue-btn" @click="togglePicker2">显示三列带标题日期弹框Demo2</button><v-date-picker :type="1" :isShow="isShow2" @confirm="confirmDemo2" @cancel="cancelDemo2" v-model="selectedVa...
以前做这种操作就是简单的display：block，但现在用户的要求也越来越高，需要美观和动画感。 现在介绍用一种简单的方式来实现子菜单从上向下展开子菜单。 看下效果图：点开效果：其实原理比较简单，就是通过子菜单的 max-height: 0;和 max-height: 2000px来实现子菜单的显示和关闭。加上css3的 transition: max-height .3s;来实现动画效果。 子菜单的样式：.tree-son-menu{background-color: #FFF;.menu-body {z-index: 20;positio...
文字比较难解释，直接看图应该就懂是要做什么了。需求 工作中遇到的，需求就是超过四行得有个展开按钮，点击展开显示所有内容，不超过四行的话就不需要这个按钮并显示所有内容。 思路首先得判断文本自否超过四行，因为这些一般都是是前端异步请求然后后端发送过来，在组长的指导下，使用了 Vue 中的 nextTick 来监听 DOM 中是数据变化。接下来主要是 css 上的思路，其实上图可以分为两部分，如下图，标号1的部分展示前面三行，标号...