nrm的安装与使用 简介查看当前使用的 npm 源npm get registry设置 npm 源地址npm config set registry <url>以上是我们平常通常用来查看和切换 npm 源的方法,每次切换源的时候都比较麻烦,而 nrm 能够做到方便快捷的切换。nrm 是 npm 的镜像源管理工具,用于切换 npm 源安装npm install nrm -g基本使用查看可选源,带 * 表示当前源nrm ls查看当前源nrm current切换源(registry
nvm的安装与使用 简介node版本管理工具,可以用来安装或切换不同版本的node.js安装1、如果已经下载了node,想通过nvm来切换其它版本npm i nvm -g2、如果没有下载node,可以通过以下链接下载(安装路径不可有空格或中文)https://github.com/coreybutler/nvm-windows/releases基本命令nvm version 查看当前的版本nvm list 查看本地已经安装的所有node版本nvm list available 查看网络可以安装的node
js数组常用方法 定义一个数组,接下来操作的数组都以这个为例const arr = [3, 10, 18, 20];forEach遍历数组中的每一项,跟 for 循环的作用是一样的arr.forEach(item => { console.log(item);});// 依次输出:3、10、18、20some依次遍历数组中的元素,若有满足条件的则返回 true,剩余的不会执行。若无满足条件的则返回 falseconst result = arr.some(item => { return
Echarts — 基本使用 版本:vue@3.0.5 + echarts@5.1.2本文将介绍如何使用 echarts 绘制一个省级地图(以江西省为例)一、安装 echartsnpm i echarts --save-dev二、引入import * as echarts from "echarts";import jiangxi from '../assets/jiangxi.json';三、初始化<div id="main" style="width: 700px; height: 700px; mar.
Vue.js — 路由导航守卫 前言本文介绍的是全局前置守卫 router.beforeEach ,它常用作登录拦截,该函数会在每次路由跳转前执行,在此期间做一个登录判断,只有登录过后才具有访问路由的权限全局前置守卫的回调接受三个参数to :即将要进入的目标from :当前导航正要离开的路由next :决定能够访问到的路由(该函数必须被调用一次)实现// 定义一个任何时候都可以访问的路由数组集合const anyRoutes = ['/login', 'register', '/home', '/index'];r
JavaScript — resize事件监听窗口变化 前言resize 事件是在浏览器窗口大小发生变化时触发,利用该事件可以跟踪窗口大小的变化来动态调整页面的元素显示。接下来利用 resize 事件实现一个小案例:监听浏览器窗口变化,实时获取该窗口的宽度和高度。实现首先写一个获取窗口宽高的方法const getWindowInfo = () => { const windowInfo = { width: window.innerWidth, hight: window.innerHeight } console.log(wind
vue + ant-design + xlsx 实现导出表格数据 一、安装 xlsxnpm i xlsx --save-dev二、渲染 Table 表格< 1 > 使用 ant-design-vue 写一个基本的表格<template> <div class="container"> <a-button type="primary" @click="exportData" > 导出 </a-button> <a-table :data-source="ta
HTTP — 请求参数格式 传参的三种形式一、Query String Parameters二、Form Data三、Request Payload一、Query String Parameters常用在 get 请求方式,会以 url 的形式传递。例如:?name=job&age=18二、Form Data常用在 post 请求方式,提交 form 表单数据的时候Content-type描述application/x-www-form-urlencoded表单默认的提交数据的格式mul
CSS布局 — 左侧固定,右侧自适应 前言用 css 实现一种后台管理系统常用的布局方式:左侧菜单栏固定,右侧自适应。效果如下:首先写一个公共的 HTML 结构<div class="container"> <div class="left"></div> <div class="right"></div></div>一、浮动布局.container { width: 1000px; height: 500px; border: 1px solid
程序员常用开发工具 一、Vscode一款好用的代码编辑器https://code.visualstudio.com/Download二、Typoramarkdown 编辑器https://www.typora.io/三、Node.jsNode.js 是一个基于 Chrome V8 引擎 的 JavaScript 运行时环境。https://nodejs.org/zh-cn/download/四、Git代码提交工具https://git-scm.com/downloads五、PxCook一款切
Vue.js — 自定义组件的双向绑定 首先写一个简单的 radio 组件要实现自定义组件的双向绑定,原理就是父组件将值传递给子组件,子组件监听值的变更然后把值响应出来。在子组件中监听值的变化,然后触发父组件中的自定义事件,变更的值会当做这个自定义组件的返回值<template> <label class="radio" v-for="item in options" :key="item" @click="toggle(item)" >
Vue.js — ant-design数组表单验证 一、前言常见的表单验证是对 对象中 单个字段的验证,那如何对数组中的每一项做到验证呢,效果如下:二、实现首先需要准备好 form 数据和 rules 验证规则form: { member: [ { name: "", sex: "", age: "" } ],},rules: { name: { required: true, message: "请输入姓名" }, sex: { required: true, message: "请选择性别"
JavaScript — 递归处理数据 介绍两种常用的递归处理数据的方法首先定义一组树形列表数据规定:树的最后一级 member 为空的即为成员(也可添加一个 type 标识来判断是否为成员)const memberList = [{ name: '研发部', member: [{ name: '前端', member: [{ name: '张三', age: 1.
JavaScript — 原生js实现上传图片控件 一、修改原生 input 样式html 结构<div class="card"> <input id="upload" type="file" accept=".jpg" /> <div class="view"> <!-- 上传成功后 --> <div id="imgContainer" class="img-container"> <img id="img" /&
Vue.js — i18n使用 注意:本文使用的是 vue@3 + vue-i18n@9 的写法一、安装npm install vue-i18n@9 --save二、新建 i18n 文件文件目录结构如下:在 index.js 下创建 i18n 实例import { createI18n } from 'vue-i18n/index';import zh from './lang/zh';import en from './lang/en';const i18n = createI18n({ // 设置地.
JavaScript — MutationObserver接口 介绍MutationObserver 接口提供了监视对 DOM 树所做更改的能力。MutationObserver(),创建并返回一个新的 MutationObserver 它会在指定的DOM发生变化时被调用。使用写一个简单的例子,监听页面上 input 的显示与隐藏<body> <input id="input" /> <button id="hide">隐藏</button> <button id="show">
Vue.js — ant-design使用 一、ant-design-vue 安装npm install ant-design-vue@next --save二、全部加载直接在 main.js 中引入组件和样式import antd from "ant-design-vue";import "ant-design-vue/dist/antd.css"const app = createApp(App);app.use(antd);然后再任意组件中就可以直接使用<template> <a-button
git基本操作 创建仓库初始化一个文件为本地仓库git init从现有的仓库中拷贝项目git clone 地址提交流程git pull将远程主机 origin 的 master 分支拉取过来,与本地的 brantest 分支合并。git pull origin master:brantest如果远程分支是与当前分支合并,则冒号后面的部分可以省略。git pull origin master将修改提交至暂存区提交修改文件和新增文件(不包括删除文件)git add .提交已经被add的文件(修改文件
JavaScript — json文件的读取与写入 应用场景网站配置的导入与导出。当一个网站在测试服开发完成后上线到正式服,为了避免重复配置数据,采取代码的方式来减少一些不必要的人工操作。后台接口接收的是 json 格式而不是文件格式的时候,前端可以采用文件的形式来保存这些数据,在导入导出的时候做一下文件与数据之间的转换。导出 —— 数据写入文件保存导入 —— 文件上传,然后读取数据代码实现首先需要一个 上传文件的 input 框 和 两个按钮<body> <input type="file" accept=".j
JavaScript — promise基本使用 Promise 简介Promise 对象用于表示一个异步操作的最终完成 (或失败)及其结果值。它能够把异步操作最终的成功返回值或者失败原因和相应的处理程序关联起来,这样使得异步方法可以像同步方法那样返回值:异步方法并不会立即返回最终的值,而是会返回一个 promise,以便在未来某个时候把值交给使用者。Promise 常见的几种用法首先定义几个 Promise 对象const p1 = new Promise((resolve, reject) => { setTimeout(reso