
Vue
小天使娜娜
90后前端妹纸,全栈开发
展开
-
前端js实现表格数据的上移下移
vue项目需求中需要前端实现表格行数据的上移下移,效果如下实现思路:主要使用前端对数组的操作方法splice()代码: tableData: [{ name: '1', id: '1' }, { name: '2', id: '2' }, { name: '3', ...原创 2019-09-12 16:44:03 · 2948 阅读 · 2 评论 -
Vue项目前端性能优化
一、vue-router路由懒加载懒加载是当路由被访问的时候才加载对应组件,而不是在首页就全部加载,以此来提高首页反应速度。方法和原理 require-ensure 说明: require.ensure在需要的时候才下载依赖的模块,当参数指定的模块都下载下来了(下载下来的模块还没执行),便执行参数指定的回调函数。require.ensure会创建一个chunk,且可以指定该chunk...原创 2019-03-27 16:50:39 · 18723 阅读 · 6 评论 -
前端路由
一、什么是路由? 路由是根据不同的 url 地址展示不同的内容或页面;二、什么是前端路由? 前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做(传统的项目是服务端根据 url 的不同,返回不同的页面实现的);三、什么是后端路由? 通过用户请求的url导航到具体的html页面;每跳转到不同的url,都重新访问服务端,然后服务端返回页面,页面也可以是服务端获取数据,...原创 2019-03-26 20:24:50 · 384 阅读 · 0 评论 -
Vue项目中的前端加密详解
在项目中我们常用到的两种加密方式:sha 256加密 RSA加密在项目中的使用方法总结如下:一、sha256加密npm安装sha256库安装完成3.可以去项目配置文件中package.json中查看4.在模块中使用,引入sha256库,对需要加密的字符进行加密传输二、 RSA加密npm安装RSA库2.安装完成3. 可以去项目配置文件...原创 2019-03-14 17:48:16 · 19784 阅读 · 1 评论 -
Vue不是内部或外部命令如何解决
最近想重新建个项目,遇到vue命令无法使用的情况解决方法:配置环境变量1.在我的电脑中搜索vue.cmd,找到它的路径2.右键计算机,属性——高级系统设置——环境变量,将 vue.cmd的路径加入环境变量3.重启命令窗口,执行正常,新项目创建成功。...原创 2018-06-29 10:53:06 · 23913 阅读 · 6 评论 -
完美解决Webpack多页面热加载缓慢问题
Webpack多页面热加载缓慢问题分析与解决一、问题引入使用webpack + vue多入口模式后,随着项目模块越来越多,整个项目的入口多达30多个,热更新变得缓慢,保存一次等待热加载的时间多达2-3分钟,这也意味着,改一下代码保存后要等2分多钟才能看到效果,非常影响开发效率。二、问题分析我们的代码无问题,而是html-webpack-plugin插件存在性能问题...原创 2018-12-22 14:20:32 · 9432 阅读 · 4 评论 -
使用sinopia搭建npm私有仓库
sinopia 的优点: 配置简单,对环境依赖少(仅 node 就够了) 支持 windows 系统下运行 不需要数据库,sinopia内置一个数据库了 是比较主流的方案 1.安装sinopia包2.配置npm3.启动sinopia,自动生成的工作目录如下(通过第一个warn可以看到具体路径):4.打开这个文件,config.yaml默认...原创 2018-12-21 18:51:44 · 1189 阅读 · 0 评论 -
vue项目配置多入口多出口——方法二
问题引入:在vue项目中,我们通常使用vue-cli脚手架生成项目,生成的是一个单页面的工程,main.js是整个项目唯一的入口,整个项目都在一个index.html外壳中。但是,有时候,这种默认结构不能满足项目需要大项目使用单页面负载过重 多页面利于模块独立部署所以,我们需要将项目配置成多入口多出口模式配置方法:修改脚手架生成的目录结构如下:其中view文件夹中放置...原创 2018-12-19 20:27:35 · 5827 阅读 · 9 评论 -
vue项目配置多入口多出口——方法一
问题引入:在vue项目中,我们通常使用vue-cli脚手架生成项目,生成的是一个单页面的工程,main.js是整个项目唯一的入口,整个项目都在一个index.html文件中。但是,有时候,这种默认结构不能满足项目需要大项目使用单页面负载过重 多页面利于模块独立部署所以,我们需要将项目配置成多入口多出口有两种配置方法:先介绍一种比较笨但是好理解的方法修改脚手架生成的目录结...原创 2018-11-21 21:25:22 · 14812 阅读 · 3 评论 -
Vue数据传递的五种方法
组件(Component)是 Vue.js 最强大的功能。组件可以封装可重用的代码,通过传入对象的不同,实现组件的复用,但组件传值就成为一个需要解决的问题。1.父组件向子组件传值组件实例的作用域是孤立的。这意味着不能在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据,我们需要通过子组件的props选项。子组件:子组件需要从父组件获取 logo 的值,就需要使用 p...原创 2018-11-02 16:35:23 · 20037 阅读 · 2 评论 -
使用node proxyTable跨域请求如何通过登录验证
问题引入:在前后端分离开发中,node 的 proxyTable可以帮助我们解决跨域请求的问题但是,在需要登录的系统中,后台一般会设置登录拦截,跨域请求需要通过登录拦截后,才能请求成功那么,如何通过登录拦截?解决:在proxyTable中携带cookie信息1.在config - index.js文件中,设置如下: 将Cookie携带在headers中,即...原创 2018-11-01 18:12:59 · 469 阅读 · 0 评论 -
Vue项目 前后端分离模式解决开发环境的跨域问题
在前后端分离的web开发中,我们与后台联调时,会遇到跨域的问题。比如:开发地址是 localhost:8080,需要访问 localhost:9000 上的接口。不同域名之间的访问,需要跨域才能正确请求。跨域的方法很多,在 Vue-cli 创建的项目中,可以直接利用 Node.js 代理服务器,实现跨域请求。解决方法:安装axios 在main.js中全局配置一个 baseU...原创 2018-11-01 17:51:08 · 3052 阅读 · 0 评论 -
vue项目使用axios如何防止get请求缓存返回304
最直接的解决方式:修改axios源码在node_modules文件夹找到这个文件找到get请求的地方,修改url所有的get请求都会带上时间戳,不会再返回304当然,如果你只想单独处理某个请求,直接给它加个随机数就好了...原创 2018-07-26 10:09:50 · 15012 阅读 · 0 评论 -
通过 iframe引用的vue文件之间的方法互调
假设有两个文件general.vue(这是一个vue多入口生成的实例,会被打包为一个单独的general.html)generalPage.vue(这个文件通过iframe引入general.html)那么,如何在general.vue里触发generalPage.vue中的方法vueFun?方法如下:1.在general.vue中通过parent.vueFun(params)...原创 2018-07-17 10:13:17 · 7001 阅读 · 0 评论 -
Vue-set解决数组变化不触发视图更新问题
Vue是通过Object.defineProperty()来实现双向数据绑定的。把一个普通 JavaScript 对象传给 Vue 实例的data选项,Vue 将遍历此对象所有的属性,并使用Object.defineProperty把这些属性全部转为 getter/setter。每个组件实例都有相应的watcher实例对象,它会在组件渲染的过程中把属性记录为依赖,之后当依赖项的...原创 2019-09-12 16:57:05 · 3682 阅读 · 0 评论