- 博客(33)
- 收藏
- 关注
RSS订阅原创 Nuxt3使用
打包输出.output，里面是没用index.html，因为这个是服务端渲染原理，就相当于是一个node.js的后端项目，而.output/server/index.mjs是我们要启动的文件，用过node.js开发的童鞋肯定知道的，这个地方就是相当于node.js启动的app.js或者index.js，所以需要我们使用node把项目启动。假设我们在.env或者.env.local配置了NUXT_PUBLIC_BASE_URL = xxxx，NUXT_PUBLIC_APPID=xxx的两个环境变量。
2023-11-21 10:57:39
913
原创 记录两个不同的域名使用同一个微应用遇到的坑（micro-app)
由于公司的项目越来越多，很多的系统，也有很多相似的模块，为了解决重复造轮子，降低开发维护成本，故将这些抽出来单独作为微应用。经过调研，发现某东出品的比较吻合。
2023-06-28 17:01:25
1190
原创 vue + ElementUi 使用多语言（包含element-ui切换多语言）
1.安装vue-i18n（切记：vue2x的版本，一定要安装8.9.0以下的版本）npm install vue-i18n@8.9.0 --save2.在src中，新建lang文件--src + lang + index.js + en_us.js + zh_cn.js3.index.jsimport Vue from 'vue'import Element from 'element-ui'import VueI18n from 'vue-i18n'import loca
2022-04-06 18:50:19
2818
2
原创 记录Vant中 scrollToField的使用
我们在使用vant-ui的form表单时，期望校验错误时能及时滚动到第一个错误的位置，这样便可提升用户体验，在v2.8.3版本后，Vant-ui提供了这样一个API:scrollToField，如下代码<template> //1. 需要在在van-form上添加ref属性，方便后面调用 //2. 每个组件，比如 van-field需要添加name属性，必须要英文 <van-form ref="form" @submit="onSubmit" @onFailed="onFail
2022-03-28 18:58:09
3581
5
原创 关于Ant Design＜React＞中的tree组件默认选中事件
在Ant Design中的Tree组件，如果数据是前端写死的，使用里面的默认展开，默认选中事件，直接调用文档的API即可，如果数据是从后端获取的，那么就需要作一些改动。import { getDep } from '@/api/api'import { useState, useEffect } from 'react'import { Tree } from 'antd'const Dep = () => { const [loading, setLoading] = useState&
2021-11-13 14:06:30
2060
原创 关于umi dva的使用
1.配置，在config.js中开启配置 dva: { immer: true, // 表示是否启用 immer 以方便修改 reducer hmr: true, // 表示是否启用 dva model 的热更新 },2.约定式的 model 组织方式符合以下规则的文件会被认为是 model 文件，·src/models 下的文件·src/pages 下，子目录中 models 目录下的文件·src/pages 下，所有 model.ts文件(不区分任何字母大小写)比如
2021-11-11 12:20:03
2255
原创 关于UMI中 useModel的使用（踩坑记录）
最近用React + UMI +qiankun的框架撸了一个后台管理系统，主应用使用的qiankun做的微前端，子运用使用的是UMI搭建的React 项目，涉及到主应用与子运用的通信问题。1.主应用用的qiankun中的registerMicroApps进行的传值，代码如下：registerMicroApps([ { name: 'react app', // app name registered entry: '//localhost:8080', container:
2021-11-05 15:03:36
17329
1
原创 node后端项目开发
本篇文章将记录node的实际应用。1.首先我们在项目中安装好以下插件:①.express：路由②.sequelize ：连接数据库、操作SQL③.lodash：对数据，对象操作（功能很强大，推荐使用）④.pg(PostgreSQL数据库）：（也可使用其他数据库，像：Oracle、PostgreSQL、MongoDB等）⑤.cross-env：用来区分环境⑥.nodemon：保存实时刷新⑦；.pm2：Node 应用进程管理器⑧.log4js：记录日志npm install express
2021-10-21 18:42:00
3068
原创 关于Element Popconfirm 气泡确认框问题
最近在用到elementUi（版本2.13.2）中的Popconfirm气泡确认框，在官方文点击确认按钮的回调事件中使用onConfirm事件，但是一直未执行到此方法经过查阅源码，得知如下：后来改用 <el-popconfirm title="确定移除吗？" @confirm='confirm()'> <el-button slot="reference" >移除</el-button
2021-09-30 14:34:44
1654
1
原创 node后端服务搭建
1.首先全局安装node;执行npm -v；npm -v2.初始化项目：npm init，你会看到有一个package.json文件；npm init3.执行npm install ；npm install4.下载express,body-parser,mysql;npm install express body-parser mysql--save或者cnpm install express --save5.与package.json 目录并行新建一个index.js或者其他
2021-02-06 14:27:09
1251
2
原创 Vue 3.0安装
vue3.0 beta 已经出来了，很多小伙伴已经迫不及待的想去体验下，接下来我们就先安装吧；1.vue3.0的脚手架vue-cli 需要node.js 8.9以上的版本，小伙伴可自行查看自己的node版本；node -v我的使用的是v12.16.22.安装vue-cli;cnpm install @vue-cli -g3.检查下当前的vue的脚手架版本vue --version我这边的是vue/cli 4.5.84.初始化vue3.0项目vue create vue 03然后
2020-10-31 10:12:23
1824
原创 Vue 实现骨架屏（skeleton）
Vue实现骨架屏的步骤：1.安装骨架屏插件：npm install vue-skeleton-webpack-plugin2.由于骨架屏插件依赖服务端渲染，再安装vue-server-renderernpm install vue-server-renderer3.在src>components新建skeleton目录，里面创建index.vue跟entry.skeleton....
2020-03-26 10:59:37
9860
3
原创 解决ElementUi树结构默认选中的事件（最完美的解决方案）
最近做一个后台管理系统，使用了ElementUi的el-tree组件，并且带有选中效果的，当对数据进行修改操作时，需要将原有的选中数据渲染到树结构中，data以及default-checked-keys的数据都是从后台获取的数据，所以在进行修改操作时，并没有按照预期的能把选中的效果体现出来，后来一想才发现，原来渲染el-tree前，就得拿到default-checked-keys的选中数据，否则默...
2020-03-19 14:36:16
13170
6
原创 H5 meta属性使用大全
最近在做微信公众号，由于是一个活动页面，所以我采用的原始方法jq，功能都比较简单，但是再做到微信分享的时候，调用wx.config时，一直报“Invalid signature ”无效的签名，这个问题足足困扰了我好多天，遇到这种问题，通常可以从以下几个方向去解决；1.由于微信授权是有时效性的，所以对于前后端分离项目来说，通常是由后台去跟微信交互，采用缓存的方式，2小时交互一次；...
2020-01-16 14:35:58
202
原创 js for、foreach、for in、for of 的区别
在开发中，我们经常会对数组或者对象进行遍历，常用的有for、foreach、for in、for of 等方法，那么今天我们来讨论下这些方法的用法；1.for循环：for循环经常用在数组中，用法也很简单for(let i=0,len=array.length;i<len;++i){ console.log(array[i])}这样便可遍历数组的中的每一项，可通过break或者...
2019-10-25 23:06:16
362
1
原创 移动端适配问题
做过移动端的小伙伴们都知道，移动端的适配是一个比较难解决的事。首先我们先来了解下移动端的物理像素、逻辑像素、像素比的概念。1.物理像素：通常是指浏览器的分辨率，也可理解为屏幕的宽度*高度。开发PC端的话，css中的1px就等于一个物理像素；2.逻辑像素：这个概念主要针对移动端，移动端开发的话，1px就是一个逻辑像素；3.像素比（dpr）：物理像素/逻辑像素。在移动端可以通过window.de...
2019-08-25 10:43:11
199
原创 JS数据类型判断
1.在js语言中，包含7种数据类型：null，undefined，string，boolean，number，object,symbol。2.这些数据类型，我们通常可以用typeof去判断数据类型，但是js中有一个历史遗留的大bug，那就是typeof null=Object，为什么会有这么一个重大的bug呢？3.原因：所有的数据都是以二进制的形式存在内存中，而以000开头的数据会系统被判断是...
2019-08-21 08:53:10
315
原创 Vue如何最简单的实现tab功能
我们在开发中，尤其是在移动端，像tab这种需求肯定是经常遇到，那么怎么简单的实现这么一个功能呢？很多童鞋肯定会说着很简单，当点击的或者所在的页面图片换成点击效果的图片，然后每个部分复制一份，这样是可以实现，但是很麻烦。下面我介绍一种简单的实现一种更简单的方法<template> <ul class="nav"> <li v-for="(item,...
2019-08-20 23:27:53
566
原创 前端性能优化
作为一名前端开发，掌握一些前端性能优化是非常有必要的，下面我来列举下我个人比较常用的方法。1.减少http请求（占前端性能优化的80%）。http请求是非常耗资源的，因为每次http请求都需要经过三次握手，这无疑是增加了许多的请求时间。①图片方面A将项目中用到的小图标合成一张精灵图（雪碧图）。如果可以，使用icofont，这些将会大大的减少一个http请求。B如果是稍微比较大的图片，我们可...
2019-08-20 23:07:33
122
原创 vue封装的组件如何在调用时绑定click事件
我们在开发中会封装许多的通用的组件，那么如何封装好一个组件时，在调用的时候绑定click事件呢？1.child组件<template> <div class="child" @click="$emit'childClick',123) /> //说明：第一个参数：childClick ，是事件名，在调用的时候需要用到，第二个参数123，是你在调用的时候传...
2019-08-13 21:29:25
3892
2
原创 js闭包的理解
JavaScript中闭包无处不在，只是我们能不能去识别它。当函数可以记住并能访问所在的语法作用域时，就产生了闭包。我们来看下面这个例子1. function fun(){ var a=1; function foo(){ console.log(num) 1 } foo(){ } ...
2019-08-13 21:13:10
168
原创 vue 从webpack 3X升级到 webpack 4.X全过程
当前项目我是采用的webpack3.6 应用的是vue-cli安装的项目，由于webpack4官方尚未出脚手架，所以我们升级到webpack4的话需要手动升级。我是按照如下步骤去升级的。备注：我用的npm的版本是6.4.1；你们可以在终端执行npm -v 查看当前npm版本。1.首先升级webpack（先卸载之前的webpack）npm uninstall webpack卸载完完后 再...
2019-08-10 14:04:50
3047
3
原创 js神奇的“+”运算
众所周知，js是一门弱语言，不像Java一样，定义一个变量时得先申明这个变量的类型，通常我们在使用‘+’运算时，仅仅是对数字相加或者拼成字符串，但是也有一些意外，比如：1.先来个简单的： true+true打印出来是2，原因是js在执行的时候会把true转成数字1，false转成0；2.再来个变态的：[3,4]+[5,6]=?如果知道原理的童鞋很快会告诉我答案是：3,45,6，为什...
2019-07-07 19:41:28
749
原创 Vue组件通信
vue组件的关系分为3种：1.父子组件2.兄弟组件3.嵌套多层的组件A父子组件父组件：用:age的方式把age传给子组件，用v-on的方式租接收子组件传来的参数<template> <div class="father"> <Child :age='age' v-on:addAge='addAge'/> <...
2019-06-26 21:59:09
175
原创 双飞翼布局（圣杯布局）
实现一个两边固定宽度，例如（各200px），中间根据浏览器的视口大小自适应，这种布局称为双飞翼布局或者圣杯布局，某宝的布局就是如此。1.采用float实现，兼容性最好，代码如下：<!DOCTYPE html><html> <meta charset="utf-8"> <head> <style> ...
2019-06-19 20:24:15
197
原创 webpack4搭建vue项目（完整版本）
最近研究了下webpack4，顺便用webpack 4搭建了一个vue项目，搭建过程如下：1.安装node，然后使用npm init （初始化项目）；npm init2.npm i webpack vue vue-loader，同级创建src（建app.vue及index.js文件）、config（建webpack.config.base.js、webpack.config.dev.js、...
2019-06-14 20:16:56
8143
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人