王继伟2021

开发环境一般是本地开发时所使用的环境，改动很频繁。测试环境较为稳定的版本，一般用于部署测试。这样在启动项目时使用不同命令后通过。3个文件创建完成，在项目中打印。就可以判断当前处于什么环境，生产环境发布到线上的版本。可获取文件配置的内容。...

JS（JavaScript）方法获取屏幕缩放比例与分辨率。

随着前端的快速发展，作为最经典的语言JavaScript也是在不断地升级迭代，越来越多的新特性让我们的代码写起来变得简洁有趣，现在最新出现的5个新特性，大家一定不要错过：有时，我们想知道对象上是否存在某个属性，一般会使用“in”操作符或“obj.hasOwnProperty”，但它们都有各自的缺陷。如果指定的属性位于对象或其原型链中，“in”运算符将返回true。obj.hasOwnProperty 方法会返回一个布尔值，表示对象自身属性中是否具有对应的值（原型链上的属性不会读取）。已经可以

实时监听vuex里面的变量，响应页面内容

在前端项目中，绝对肯定的会涉及到日期时间的格式化的需求，并且很多地方都会用到。格式化日期时间的方法有很多，封装一个函数是一个很好的方法，仔细想来，遇到更多的需求还是有一定的局限性。这个时候安装一个依赖“moment.js”就可以很好的满足日期格式化的各种需求。安装：npm install moment//或者yarn add moment引入：在main.js里面引入// require 方式const moment = require('moment');// i

我们在做项尤其是后台项目。都会涉及到登录。我们一般是用token来设置项目的登录状态。脱坑的有效时长，根据自身的项目需求来设定，而当token过期之后，我们就需要使得整个项目页面自动跳转到登录页面，去让用户重新登录。例如： 我公司的token时效在生产环境设置为一个小时，当token过期，所有接口都直接返回；每次路由跳转都会对token进行判断，设置了一个全局的beforeEach钩子函数，如果token存在就跳到你所需要的页面，否则就直接跳转到登录页面，让用户登录重新存取token：接口返回的信

很多人因为使用的电脑不是管理员账户或者没有管理员权限，导致安装不了字体，不能为所有用户安装字体；或者安装上去，在VSCode（Visual Studio Code）前端编辑器上设置的字体无效，无法显示出来，这样的问题也让我烦恼了很长时间。经过研究，大家可以按照我的方法来解决：1、下载你想要的字体，放在电脑本地目录下即可；2、找到VSCode安装目录下的workbench.desktop.main.css 文件（以我的为例，是在E:\Microsoft VS Code\resources\ap

1. vuex简介vuex是专门用来管理vue.js应用程序中状态的一个插件。他的作用是将应用中的所有状态都放在一起，集中式来管理。需要声明的是，这里所说的状态指的是vue组件中data里面的属性。了解vue的同学应该是明白data是怎么回事的吧，如果不懂的话，建议先学完vue的基础知识再看vuex。2. vuex的组成结构示意图vuex的特点是把数据单独隔离，形成一棵树状图。单独隔离就意味着它有自己的生态系统。输入和输出，其中action作为数据的输入，state作为数据的输出。如下图：

一 、概况FormData接口提供了一种表示表单数据的键值对 name/value 的构造方式，能够将数据通过前端 Ajax 请求发送给后端。FormData的主要用途有两个：异步上传文件。 实现form表单数据的序列化，将数据以键值对 name/value 的形式传到后台，从而减少表单元素的拼接，提高工作效率。二、如何使用（1）创建一个FormData对象// 通过new FormData() 来创建一个对象let formData = new FormData();

ArcoDesign 是由字节跳动 GIP UED 团队和架构前端团队联合推出的企业级设计系统。在打磨了近 3 年之后，通过字节内部大量业务沉淀和验证，我们开源了 ArcoDesign 设计系统。旨在让社区听见更多的声音，为更多中小型企业及个人设计师和开发者提效，创造更多高效美观的“最佳实践”。ArcoDesign 拥有系统的设计规范和资源，依据此规范提供了覆盖 React、Vue、Mobile 的原子组件。基于丰富的原子组件，Arco 提供了除风格配置平台、物料平台的定制化工具外还包括图标平台、品牌

1.如何进行 REM 适配// 下载插件\npm i amfe-flexible\// 在main.js中引入\import 'amfe-flexible'2. REM 适配原理利用媒体查询或 JS 动态检测设配的宽度，不同宽度下设置对应的根元素字体大小，这样所有使用 REM 作单位的元素就跟着变化。2.1 如何把写的 px 转换成 remnpm install postcss-pxtorem@5 -D # -D 是安装到开发依赖，项目上线的时候就没用了# yarn

导读每个IT开发者都希望自己成为大神，尤其是最近几年流行的vue、react、Angular前端三大框架，大大加快了前端开发者的开发速度，几乎是革命性的改变！而vue框架是现在最火热的，也是使用人数最多的框架，全面的掌握它，便能在成为大神的道路上更进一步。以下是我总结的几乎所有的vue的知识：1. Vue的优缺点优点：渐进式，组件化，轻量级，虚拟dom，响应式，单页面路由，数据与视图分开缺点：单页面不利于seo，不支持IE8以下，首屏加载时间长2. Vue是渐进式框架渐进..

Vue插槽slot的基本使用单个插槽 | 匿名插槽//子组件 ： (假设名为：child)<template> <div class= 'child'> </div></template>//父组件：（引用子组件 child）<template> <div class= 'app'> <child> 林三心 </child>

在 Vue，除了核心功能默认内置的指令 ( v-model 和 v-show )，Vue 也允许注册自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行操作。Vue 自定义指令有全局注册和局部注册两种方式。先来看看注册全局指令的方式，通过 Vue.directive( id, [definition] ) 方式注册全局指令。然后在入口文件中进行 Vue.use() 调用。批量注册指令，新建 directives/index.js 文件import copy from

导读在一些时候，我们会在模板中一些数据。会处理过多的逻辑。这个时候就非常的不好看，也难以维护。比如像下面的代码：<div id="app"> {{ message.split('').reverse().join('') }}</div>像这个数据就要做三步的处理。先把数据转换为数组。再将数组翻转，然后再将数组连接起来。这样看起来就会非常的麻烦，当我们处理复杂逻辑时，都应该使用计算属性。尤其是在这种情况下，下面我们来讲一下计算属性的基础用法。基础用法

目录1. 数字操作（1）生成指定范围随机数（2）数字千分位分隔2. 数组操作（1）数组乱序（2）数组扁平化（3）数组中获取随机数3. 字符串操作（1）生成随机字符串（2）字符串首字母大写（3）手机号中间四位变成*（4）驼峰命名转换成短横线命名（5）短横线命名转换成驼峰命名（6）全角转换为半角（7）半角转换为全角4. 格式转化（1）数字转化为大写金额（2）数字转化为中文数字5. 操作存储（1）存储loalStorage（2

最简单的绑定:class="{ 'active': isActive }" 判断是否绑定一个active:class="{'active':isActive==-1}" /*或者*/ :class="{'active':isActive==index}" 绑定并判断多个单纯数组数组对象结合动态判断数组与三元运算符结合判断选择需要的class..

下面是前端vue框架中插入富文本编辑器的使用方法：依赖npm install vue-quill-editor --save引入import { quillEditor } from "vue-quill-editor";import 'quill/dist/quill.core.css';import 'quill/dist/quill.snow.css';import 'quill/dist/quill.bubble.css';Template<quill

1、官网https://element.eleme.cn/#/zh-CN（element-UI官网）点击打开2、安装依赖npm i element-ui –S3、全局引入（一般在main.js文件）import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);...

第一种：明文传参（ URL路径会显示传递的参数）优势：页面刷新参数不会丢失，劣势：参数公开// HTML：跳转<router-link :to="{name:xxx,query:{page:1,code:8899}}"></router-link>// JS跳转this.$router.push({name:`xxx`,query:{page:'1',code:'8989'}})// 接收：this.$route.qu...

构建前端VUE项目之前，必须先确保电脑已经安装node；1、构建项目my-vuevue create my-vue2、配置信息路由模式有两种：hash、historyhash - 即地址栏URL中的 # 符号；如：http://www.abc.com/#/hellohistory —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（这个方法就是面试中常问到的，怎么去除URL中的“#