LonewoIf的博客

Vue 强制刷新(重新渲染)的方式

HappyPackHappyPack的工作原理：在Webpack和Loader之间多加了一层，改成了Webpack并不是直接去和某个Loader进行工作，而是Webpack test到了需要编译的某个类型的资源模块后，将该资源的处理任务交给了HappyPack，由HappyPack在内部线程池中进行任务调度，分配一个线程调用处理该类型资源的Loader来处理这个资源，完成后上报处理结果，最后HappyPack把处理结果返回给Webpack，最后由Webpack输出到目的路径。通过这一系列操作，将原本都在一

1、引入html-webpack-pluginnpm i html-webpack-plugin -D2、在webpack.prod.conf.js的plugin中新增配置const date = new Date();const timestamp = date.getTime(); // 时间戳new HtmlWebpackPlugin({ filename: config.build.index, template: 'index.html', inject: true,

成对出现：provide和inject是成对出现的。作用：用于父组件向子孙组件传递数据。使用方法：provide在父组件中返回要传给下级的数据，inject在需要使用这个数据的子辈组件或者孙辈等下级组件中注入数据。使用场景：由于vue有$parent属性可以让子组件访问父组件。但孙组件想要访问祖先组件就比较困难。通过provide/inject可以轻松实现跨级访问父组件的数据。类型：provide：Object | () => Objectinject：Array<string&gt

如果直接在main.js中引入会出现以下错误：解决办法：第一步：cnpm install sass-resources-loader --save-dev第二步：修改build中的utils.js修改为：scss: generateLoaders('sass').concat( { loader: 'sass-resources-loader', options: { ...

其原因在于Vue-router在3.1之后把$router.push()方法改为了Promise。所以假如没有回调函数，错误信息就会交给全局的路由错误处理，因此就会报上述的错误。vue-router先报了一个Uncaught (in promise)的错误(因为push没加回调)，然后再点击路由的时候才会触发NavigationDuplicated的错误(路由出现的错误，全局错误处理打印了出...

1、修改 webpack .prod.conf.js 文件const version = new Date().getTime();output: { path: config.build.assetsRoot, filename: utils.assetsPath('js/[name].[chunkhash:8].' + version + '.js'), chunkFilename:...

首先看 vue 官网上给出的 vue-cli 在浏览器中的兼容性，图中表示是兼容 IE 9的，但是在IE9中打开项目会发现一片空白。解决办法如下：第一步、安装 babel-polyfillnpm install --save babel-polyfill第二步、在 main.js 中的最前面引入 babel-polyfillimport 'babel-polyfill';第四步、...

一、router-link 标签实现新窗口打开：<router-link> 不支持 target="_blank" 属性，如果需要打开一个新窗口必须要用<a>标签<router-link tag="a" target="_blank" :to="{name:'chatOnline',params:{id:1}}">在线沟通</router-link...

1、router.push()：导航到不同的 url，向 history 栈添加一个新的记录。（=== window.history.pushState）声明式编程式<router-link :to="">router.push()// 字符串router.push('home')// 对象router.push({ path: 'home' })...

报错信息：You are binding v-model directly to a v-for iteration alias. This will not be able to modify the v-for source array because writing to the alias is like modifying a function local variable.// 错误...

一、首先在 main.js 中给 Vue.protorype 注册一个全局方法，然后创建一个 StorageEvent 方法，当我在执行sessionStorage.setItem(k, val) 的时候，初始化事件并派发事件。/** * @description * @author (Set the text for this tag by adding docthis.authorNam...

vue 计算属性如何传参html 代码// html 中v-for="(row, i) in calculateList(scope.row.navDish, item)" :key="i"js 代码// 计算属性computed: { calculateList() { return (params1, params2) => { return params1.f...

一、问题用 vue 写的项目，用 vuex 来做全局的状态管理， 发现当刷新网页后，保存在 vuex 实例 store 里的数据会丢失。因为 store 里的数据是保存在运行内存中的，当页面刷新时，页面会重新加载 vue 实例，store 里面的数据就会被重新赋值。二、解决思路将 state 里的数据保存一份到本地存储localStorage、sessionStorage、cookie中。...

一、vue 项目中安装 sass 并使用第一步：打开终端 cd 到项目目录，安装 sass 依赖包：npm install sass-loader --save-devnpm install node-sass --sava-dev第二步：在 build 文件夹下的 webpack.base.conf.js 文件中的 rules 里面添加配置：{ test: /\.scss$/, ...

问题描述：在 vue 项目 less/scss/css 中使用 -webkit-box-orient: vertical; 属性， 项目打包编译以后 -webkit-box-orient: vertical; 后消失。产生原因：autoprefixer 自动移除老式过时的代码。解决方案：方法1、添加注释关闭 autoprefixer,但是若果有清除注释的插件，请将该插件设为 false，否则...

问题描述：使用 vue-cli 打包项目后，尝试使用打开 dist 目录下的 index.html，页面空白。解决办法：打开 config 文件夹里的 index.js，修改 build 里 assetsPublicPath: ‘/’，为 assetsPublicPath: ‘./’，再次执行 npm run build 能够正确显示。代码如下：build: { index: path.r...

第一步：安装 generate-asset-webpack-plugin 插件：npm install --save-dev generate-asset-webpack-plugin第二步：配置 webpack.prod.conf.js 文件：// 让打包的时候输出可配置的文件let GenerateAssetPlugin = require('generate-asset-webp...

js-xlsx是一个简单的JavaScript插件，能够读取和写入Excel表格，功能强大，但是上手难度稍大，这里列举一些常用的用法，具体用法请参考 js-xlsx。安装 js-xlsx：npm install js-xlsx --save一、导入Excel在 main.js 添加以下代码：import XLSX from 'xlsx';let reader = new File...

在使用 vs code 编辑器里是 eslint 插件时一直有以下报错：大致的意思就是不建议 v-if 和 v-for 一起使用，后来去官网查了一下也是这样建议的。vue 官网：https://cn.vuejs.org/v2/guide/conditional.html#v-if-与-v-for-一起使用根据 eslint 指出的方法进行改进：第一种：将 v-if 和 v-for 分别放...

在实际开发过程中使用 computed 有时候需要动态传入参数，例如使用 v-for 进行列表渲染时：// 计算属性传参，方法里写成 return function (params1, params2) {} 形式（可以传入多个参数，也可以使用 es6 箭头函数）calculateList() { return (params1, params2) =&gt; { return para...

一、vue 路由跳转方式1、声明式跳转（标签跳转）:router-link api:// 1.to { string | Location } 表示目标路由的链接。当被点击后，内部会立刻把 to 的值传到 router.push()，所以这个值可以是一个字符串或者是描述目标位置的对象。&lt;!-- 字符串 --&gt;&lt;router-link to="orderDetail"&g...

vue 组件之间的传值方式有：1、父组件传给子组件2、子组件传给父组件3、非父子组件之间传值父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息，如下图所示：1、父组件向子组件传值：父组件：&lt;template&gt; &lt;div&gt; &lt;input type="text" v-...

1、使用 vue-router 懒加载解决首次加载时资源过多导致的速度缓慢问题当你的 SPA（单页应用程序）变得很复杂时，打包构建后的 js 包会变得非常大，以至于严重影响页面的加载时间。vue-router 支持 webpack 内置的异步模块加载系统。所以，那些使用较少的路由组件不必打包进 bundles 里，只要在路由被访问时按需加载。懒加载路由写法：{ path: "/base/u...

在 Vue 项目中，引入到工程中的所有 js、css 文件，编译时都会被打包进 vendor.js，若是引入的库众多，那么vendor.js文件体积将会相当的大，影响首开的体验。解决方案：将引用的外部 js、css 文件剥离出来，不编译到 vendor.js 中，而是用资源的形式引用，这样浏览器可以使用多个线程异步将 vendor.js、外部的 js 等加载下来，达到首次打开加速的目的。推荐外...

一、当前应用渲染模式在前后端分离大规模应用之前，用户请求网页，都是后端先调用数据库，获得数据之后，将数据和页面元素进行拼装，组合成完整的 html 页面，再直接返回给浏览器，以便用户浏览。由于近几年前后端分离的理念被大规模应用，前后端进行了拆分，并且单页应用得到了广泛应用（Angular、React、Vue 前端三大框架）。二、前后端拆分核心理念前后端拆分，后端专注于数据接口服务，前端专注...

问题描述：开发移动端项目时可能需要在手机上调试或者查看页面解决方案：windows电脑打开终端输入 ipconfig 可以查看电脑的IP地址；mac电脑打开终端输入 ifconfig 可以查看电脑ip；但是每天 ip 发生变化这样就很麻烦，每天都需要重新获取，所以提供以下解决方案来获取 电脑 ip，借助 node 里的 os 模块；在 config 文件里的 index.js 里面加上...