YourNikee的博客

坐标成都、薪资范围12-15左右真实面试所问。1、如何优化webpack打包速度。代码压缩，使用webpack压缩插件UglifyJS，babel-loader开启缓存，设置cacheDirectorys为true，提取公共代码，借助shelljs拷贝静态文件2、promise实现原理个人理解其实就是通过原型链方法的链式调用，事件执行内容捕获与执行后的状态控制去实现的。网上许多博主对其进行了深究，可以网上翻阅一下。3、事件循环机制js是一门单线程语言，问这个问题其实就考的任务队列执行顺序的

自学vue打包成app的时候，发现了一个问题，普通ui框架无法调用手机硬件的权限，所以我找了一下，发现Dcloud有一个5+specification可以间接实现这个功能，所以我就研究了一下用法。这个比较简单，只是想让其他小伙伴少绕一点弯路。由于本人没学原生和nt，所以不太清楚权限是不是全的。下面说一下用法。其实很简单，就只是找到项目目录下的单原页面：index.html然后使用document.addEventListener触发plusready方法，将需要使用的权限通过定义全局变量的方式定义

最近接到一个需求，需要使用VueQuillEditor富文本编辑器，实现图片上传到oss服务器，并能够自定义图片的大小（拉伸），考虑到系统中使用该组件的地方非常多，所以花了些时间进行了封装。要求全局中不需要对该组件进行单独引用，且再使用时只需要通过v-modle进行双向绑定就可，图片可在富文本中自定义拉伸，缩放，图片上传后直接插入到光标位置。组件使用时：<VueQuill v-model="ruleForm.industry_content"></VueQuill>看起来是

//正数正则if(!/^[+]{0,1}[1-9]\d*$|^[+]{0,1}(0\.\d*[1-9])$|^[+]{0,1}([1-9]\d*\.\d*[1-9])$/.test(value)){ console.log('验证失败，该内容需大于0')}//非0正整数不含'.'if(!/^[0-9]*[1-9][0-9]*$/.test(value)){ console.log('验证失败，请输入正整数')}/.

oss服务流程不作赘述。npm install ali-oss 下载依赖需要拿到以下内容，我是通过后台反的accessKeyId: '',accessKeySecret: ''bucket: '', secure: true,region: 'oss-cn-shanghai',在需要上传的组件页面引入oss<script>const OSS = require('ali-oss')export default { name: 'page1', data(){

利用canvas绘制登录前的验证码Vue<canvas @click="createCode" width="80" height='40' id='myCanvas'/>mounted () {//该方法需要节点加载完成之后进行，所以需放再mounted阶段执行 this.createCode() }, methods:{ //绘制验证码主要方法 createCode(){ let dot = document.getElementById("my

现有需求：时间日期选择器必须限制用户只能选择今日往前推移一年这个区间内的时间既有 <el-date-picker v-model="form[items.select]" style="width:100%" size="mini" type="datetimerange"

实现效果：1、下载npm install mavon-editor -s2、引入在需求的组件页内引入该markdown和他的css样式。<template><div><MavonEditor ref="editor" v-model="doc" @save="saveDoc" @change="updateDoc"></MavonEditor></div></template><script>import

实现的效果只是一个下拉菜单，但是由于后台的数据量非常庞大，单次全部返回会有很长的时间损耗，故而想到了模糊查询加懒加载的形式去实现。下拉触底会触发 loadmore 事件 ，输入内容并回车会执行 searchCompany 事件以下代码复制可用<template> <div id="companySearch"> <el-select v-model="value" class="elSelectCom" placeholder="请选择" siz

一、父子通信：props,$emit。1、props:父组件<template> <div> <div style="border: 1px solid #ddd;padding: 40px 0;"> 这是父组件 <el-button type="primary" @click="changeChildCom()">改变子组件</el-button> &l

如果您登入高德地图并已那到应用key，请跳过 首先 步骤首先注册登陆到高德地图控制台进入控制台选择应用选择创建应用填写应用名称，并选择应用类型，点击确定创建新的应用创建完成后，选择添加然后按照要求填写内容，切记一定要选择web端(JS API),填写完后提交当前应用。添加成功后，在你的引用下方会出现这样一个列表然后打开你的项目npm install vue-amap --save安装地图依赖打开你项目中的mian.js文件将下面复制进去，并替换为你自己应用的ke

公用内容动态改变了全局参数，要求切换后刷新当前组件所有请求，或重新加载当前组件。因为我们在项目中加入了vue-routerapp.vue，就可以通过控制router-view去达到我们需求的效果。同时也要用到 provide/inject，个人列表类似vuex的辅助函数，跨越层级关系引入（注入）你的某个方法。app.Vue<template> <div id="app" v-loading.fullscreen.lock="fullscreenLoading" element

为的目的就是让用户在使用的时候不至于一直看到你的页面等待，优化用户的使用体验。使用的是Element-ui 的全局loading加载，以服务方式调用，使用Vuex，结合全局路由守卫与请求拦截器，实现这个内容。建议使用Vuex新建公用方法去修改状态。在Vuex的js文件中以服务的方式调用，引入 Loading 服务import { Loading } from 'element-ui';并在state（Vuex集中变量存储仓库）中新增一个变量为optionsoptions 参数为 Loadi

可能原因：使用路由懒加载动态引入路由时，没有置换为新版本的引入格式，改为require(`@/views${item.component}`).default//orimport(`@/views${item.component}`).default即可在新建的组件内容中不含template元素，在你新建的元素中加入template元素即可...

最近项目中有使用到Echarts的图表实例，一直查又嫌麻烦，自己总结一些使用上的内容，希望同时也能帮助到你。总体内容**1、Vue项目怎么使用Echarts**2、在使用带有时间轴内容时给时间轴绑定事件3如果不是Vue项目，可通过官网说明进行使用。**安装**```npm install echarts -S```**引入项目/使用**```main.js`````...

最近项目需求需要在后台系统添加一个富文本框的功能，富文本框的功能挺好实现，但是主要是需要实现图片自定义大小上传的功能，网上查阅了许久，众说纷纭，最后还是照着官方的功能说明才解决了这个问题；如果实在有讲不明白的地方，请点击Git地址，将文章最后的两个demo分别新建组件试试就知道了。注：官方的只是默认功能的demo首先是下载npm install vue-quill-editor -s //...

使用element - ui分页组件和table表格，对勾选中的数据进行分页回显（上页选中，点击分页后再次返回页面，勾选中的数据依旧被勾选）先看看效果仅为前端模拟数据处理，希望能给你一些启发这是引入的组件结构<el-table ref="multipleTable" :data="showTableData" tooltip-effect="da...

导出excel表格导出的表格仅为页面上渲染显示的表格数据 即，id=“table” 中渲染显示的数据，切仅为当前页数据<h3>Excel导出表格</h3><!--导出表格数据--> <el-table :data="tableData" stripe id="table" style="widt...

使用Vue-Cropper对上传的图片进行裁剪首先下载安装vue-croppernpm install vue-cropper -smain.js中引入并使用import Vuecropper from 'vue-cropper'Vue.use(Vuecropper)引入element-ui 的uplaod组件这里我对这个组件进行了处理，点击图片框可以进行单独的图片文件选中，取...

取消默认上传行为，覆盖action上传地址，不影响回显在项目进行的时候发现element上传组件有很多限制，所以研究了一下则个方法action是上传组件的必选参数，类型为String，我们可以随意给他一个字符串变量打发了，而通过http-request则可以覆盖默认上传行为，这样我们的问题就解决了；这是组件应用<h3>修改默认上传事件/取消action上传限制</h3...

常用在明文传递不安全的地方，如密码登陆、卡号信息等如果前端使用md5对卡号进行加密，后端也要使用对应解密方法对其进行解密安装md5包npm install js-md5 -s安装成功在Vue原型链上添加md5为公用方法，也可以将其定义在公用方法文件中，需要时调用import md5 from 'js-md5' //引入Vue.prototype.$md5 = md5;//添加...

在src目录下新建common公用方法文件夹用于存放公用方法列表common下新建common.js该示例定义存、取、删cookie方法1main.js中引入该文件，并将其添加到Vue原型链上import common from './common/common'Vue.prototype.$common = common //其中$common就是调用时所使用的方法紧接着定...

Vue-router+路由守卫+路由配置//Vue - router 官方安装npm install vue-router安装成功main.js中录入import router from 'vue-router'Vue.use(router);对所有页面进行拦截配置如果没有，在src目录下新建router文件，文件中新增index.js，如果有，则直接开始配置src目录...

安装与使用element-ui//安装element-uielement-ui官方说明命令行输入npm install element-ui -save安装成功main.js中录入import element from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'Vue.use(element);测试...