- 博客(97)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 vite + vue3 + ts整合jest+vue-test-utils单元测试
jest vue-test-utils vite vue3
2022-07-01 10:25:32
1233
1
原创 pinia的学习
Piniapinia的学习pinia特点安装创建store仓库引入store仓库组件中使用以及修改store数据的方式pinia的持久化pinia的学习Pinia是新一代的状态管理器(搭配vue3食用更香)，也是由vuex的团队开发的，目前也是在推广pinia，有可能取代vuexpinia特点体积小支持typeScript去除了mutations安装npm i pinia -S创建store仓库//src/store/mainStore.jsimport { defineStore
2022-03-03 20:45:00
1129
原创 使用Typora + picGo + Gitee搭建图床笔记
一、使用Gitee创建仓库创建的仓库不能是私有仓库，否则图片上传成功之后可能会显示不了创建token令牌在设置–>私人令牌–>生成新令牌保存一下该令牌，后续要用二、下载typora和picGotypota比较简单；picGo速度可能会不较慢，有需要的话可以使用百度网盘中的链接：https://pan.baidu.com/s/1rQm1y952Kth7KQ76NHdOvw提取码：e0xn三、配置picGo因为目前picGo并没有原生支持Gitee,所以要在插件设置中下载
2022-03-01 21:30:00
182
原创 五、Hoc高阶组件
Hoc应用场景：在React中想要对组件进行逻辑的复用，或者功能的扩充的时候，可以使用到高阶组件给一个组件扩充获取鼠标位置的小功能demo示例:实现一个获取鼠标位置的高阶组件// ./Hoc/Index.jsimport React, { Component } from 'react'import PropTypes from 'prop-types'export default (WrappedComponent) => { class hocComponent e
2022-01-05 09:59:13
617
原创 vscode中前端常用插件
记录一下我vscode中常用的插件1、Chinesevscode汉化，必备2、Auto Reaname Tag自动补全标签3、 Bracket Pair Colorizer给括号匹配上相同的颜色4、Dracula Official主题配色5、GitLens给代码标记上作者、日期等仓库信息6、Live Server页面热更新7、Indenticator给同一级的缩进带上竖线便于辨别8、Image preview在代码中引用地址之后可以预览图片9、Html Snipp.
2021-09-30 10:36:27
134
原创 后端一下给十万条数据前端怎么处理
当后端返回的数据量较大时，如果不经过处理直接展示，页面会有长时间的白屏，虽然可以通过添加Loading来改善用户体验，但是我们还是要尽可能的缩短白屏时间。本次记录一下处理过程后端返回十万条数据// 1、引入expressconst express = require('express')// 2、创建app对象(项目对象)const app = express()//解决跨域const cors = require('cors');app.use(cors()); // 3、处理
2021-09-27 13:46:36
1903
原创 移动端1px边框问题
问题原因目前主流的屏幕DPR=2 （iPhone 678）,或者3 （iPhone 8 Plus）。拿2倍屏来说，设备的物理像素要实现1像素，而DPR=2，所以css 像素只能是 0.5。一般设计稿是按照750来设计的，它上面的1px是以750来参照的，而我们写css样式是以设备375为参照的，所以我们应该写的0.5px就好了啊！ 试过了就知道，iOS 8+系统支持，安卓系统不支持。解决方案以DPR=2为例，使用scale缩放解决.border-all-1px { position: rel
2021-09-16 14:53:21
337
原创 移动端适配问题
移动端适配问题以常用的iphone6/7/8的屏幕,750px的设计稿来说//rem.jsdocument.documentElement.style.fontSize = document.documentElement.clientWidth / 750 * 100 + 'px'window.onresize = function () { document.documentElement.style.fontSize = document.documentEleme
2021-09-16 13:52:44
150
原创 一、使用vscode搭建go语言环境
一、下载golang由于某些原因golang的官网是访问不了的，所以我们需要到国内站点进行下载，根据自己的系统选择版本，我这里选择的是windows64位版本二、安装如果你是直接安装在c盘的话，你可以跳过这一节了，因为golang已经为你设置的环境变量就是在c盘。如果你安装在了D盘，那就需要设置一下环境变量了。你需要在用户环境变量和系统环境变量的path中添加一条你的golang安装路径的bin目录三、hello golang案例编译并运行：go run main.go四、解决依赖安装报错
2021-09-01 17:29:41
634
原创 四、使用代理解决跨域问题
一、在src下新建setupProxy.js文件不要乱起名字，一定要是这个文件名安装http-proxy-middleware插件yarn add http-proxy-middleware//setupProxy.jsconst { createProxyMiddleware} = require('http-proxy-middleware')module.exports = function (app) { app.use('/api1', createProxy
2021-08-31 15:18:13
175
原创 koa2实现文件上传功能
1、安装依赖npm i koa-body -S2 、引入koa-body//app.jsconst Koa = require('koa')const koaBody = require('koa-body')const app = new Koa()app.use(koaBody({ // 启用文件传输 multipart: true, formidable: { // 上传目录, uploadDir: path.join(__dirname, '/pu
2021-08-23 11:23:45
506
原创 一、使用koa脚手架koa-generator快速搭建项目以及连接MongoDB
搭建项目1、安装koa-generatornpm i -g koa-generator创建koa项目koa 项目名进入项目cd 项目名安装依赖npm i启动项目npm run dev这个时候访问http://127.0.0.1:3000地址出现以下内容说明项目启动成功2、连接MongoDB1.在项目根目录下新建db目录，并新建dbmongo.js//dbmongo.jsconst mongoose = require ('mongoose');let url = 'm
2021-08-18 11:25:24
314
原创 小记Vite启动的时候无法通过IP+端口的方式访问
问题使用vite运行项目的时候，控制台会只出现localhost的方式访问项目。这是因为没有将服务暴露在局域网中解决方式1、修改vite的配置文件2、修改npm的package.json文件
2021-08-18 09:20:11
5488
5
原创 vue3中的组件通信
本篇的组件通信不涉及vuex1、父子组件通信props&emitvue3中的defineProps和defineEmits不用引入，可以直接使用父组件<template> <Son tip="fatherData" @clickFather = handleClick></Son></template><script setup> // 导入子组件 import Son from './son.vue' // 接收子
2021-08-16 15:02:29
338
原创 在vite和vue3中使用element plus
首先需要安装vite-plugin-style-importnpm install vite-plugin-style-import -D安装element plusnpm install element-plus --save引入element plus//main.jsimport { createApp } from 'vue'import App from './App.vue'import store from './store/store.js'import router fr
2021-08-16 12:31:56
524
原创 vue-router4.0的食用方法
安装vue-router4.0npm install vue-router@4创建组件在components目录下创建两个文件即可使用vue-router4//router目录下的index.jsimport { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'const routes = [ { path: '/', component: () => import('../comp
2021-08-16 11:29:11
315
原创 vuex4.0的食用方法
vuex4.0的安装npm install vuex@4.0在vite中使用vuex//store.jsimport { createStore} from 'vuex'import createPersistedState from "vuex-persistedstate";const store = createStore({ state: { count: 10 }, mutations: { addStateCount(state, data) {
2021-08-16 09:32:02
277
原创 vue3的生命周期函数
组合式API的生命周期Vue3中的生命周期以及计算属性、数据监听(watch)等都是作为函数引入的。vue2vue3beforeCreatedsetupcreatedsetupbeforeMountedonBeforeMounmountedonMountedbeforeUpdateonBeforeUpdateupdatedonUpdatedbeforeUnmountonBeforeUnmountunmountedonUnmou
2021-08-15 23:19:07
89
原创 Vue3中的ref和reactive
vue3中使用的ref和reactive实现数据的响应式基本数据类型使用ref对象类型使用reactive<template> <div> <p>res is: {{ res }}</p> <p>dataList1 is: {{ dataList1.count }}</p> </div></template><script setup>import { react
2021-08-15 19:56:48
193
原创 使用vite创建Vue项目
vite创建项目Vite 需要 Node.js 版本 >= 12.0.0。这里使用的是npm，使用yarn的方式可以去官网食用执行npm init @vitejs/app命令进行项目的命名和模板的选择，vite不仅仅支持Vue还支持Reactcd 项目名npm installnpm run dev...
2021-08-15 15:21:25
248
原创 常见查找算法
测试数组let arr = [] for(let i =0;i < 500000;i++){ arr.push(i) }exports.arr = arr顺序查找顺序查找就是简单的遍历并比较是否相等let testArr = require('../testArr').arrlet data = 49999function searchData (array, data) { for (let index = 0; index < array.length;
2021-08-05 13:54:52
64
原创 常见排序算法
文章目录测试数据冒泡排序插入排序选择排序快速排序归并排序希尔排序堆排序测试数据//testArr.jslet arr = []// for(let i =0;i < 50000;i++){// arr.push(i)// }for(let i =50000;i > 0;i--){ arr.push(i)}exports.arr = arr冒泡排序let aa = require('./testArr')let arr = aa.arrconsole.tim
2021-08-05 10:59:32
66
原创 css实现文本超出隐藏显示省略号
css实现文本超出隐藏显示省略号1、一行文本overflow:hidden; white-space:nowrap;text-overflow:ellipsis;2、多行文本overflow: hidden;text-overflow: ellipsis;display:-webkit-box; //盒子内元素的排列方式：从上到下垂直排列-webkit-box-orient:vertical; //显示的行数-webkit-line-clamp:2; ...
2021-07-23 15:55:17
86
原创 一、webpack基础概念
webpack核心概念1、Entry设置入口文件，指定webpack以哪个文件为入口起点开始打包，分析构建内部依赖图2、Output输出，指定webpack打包后的资源bundles输出到哪里去，以及如何命名输出文件。3、Loaderloader让webpack能够去处理那些非JavaScript文件webpack自身只能处理JavaScript4、Plugin插件，用于执行范围更广的任务。插件的范围包括从打包优化和压缩，一直到重新定义环境中的变量等。5、Mode模式，指定webp
2021-07-09 11:30:57
61
原创 解决Vue中大量全局组件的引入问题
在开发中我们通常会将高频使用的组件注册成全局组件，这就不可避免的在main.js文件中会有大量的导入和注册语句import com1 from './components/com1'import com2from './components/com2'Vue.component('com1',com1)Vue.component('com2',com2)我们可以使用插件的形式引入在components目录下新建一个highCom.jsexport default { install(V
2021-07-06 20:54:09
1019
原创 五、集中状态管理-Redux
Redux应用场景某个组件的状态，需要共享某个状态需要在任何地方都可以拿到一个组件需要改变全局状态一个组件需要改变另一个组件的状态Redux使用原则能不用就不用Redux三大原则单一数据源整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中。State 是只读的唯一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象。使用纯函数来执行修改为了描述 a
2021-06-25 14:12:16
148
1
原创 三、react的生命周期
旧版生命周期<script type="text/babel"> /* 1.初始化阶段：render() 触发初次渲染 a.constructor() b.componentWillMount() c.render() d.componentDidMount() 2.更新阶段：由组件内部this.setState()或父组件重新render触发 a.shoudComponentU
2021-06-23 09:43:57
116
1
原创 二、受控于非受控组件
受控组件与非受控组件在大多数情况下，推荐使用 受控组件 来处理表单数据。在一个受控组件中，表单数据是由 React 组件来管理的。另一种替代方案是使用非受控组件，这时表单数据将交由 DOM 节点来处理。<script type="text/babel"> // 页面中的所有输入类标签，随着你的输入把内容维护到state中， // 需要的时候直接从state中取值，这就是受控组件。 // 优点：尽量避免使用ref // 非受控组件 /* class L
2021-06-23 09:29:30
250
原创 一、初识React以及三大属性
认识ReactReact是用于构建用户界面的JavaScript库，起源于Facebook的内部项目，因为该公司对市场上所有 JavaScript MVC框架，都不满意，就决定自己写一套，用来架设Instagram的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了.框架用途React主要用于构建UI。你可以在React里传递多种类型的参数，如声明代码，帮助你渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件。框架特点声明式设计：React采
2021-06-23 09:19:50
140
原创 五、movie项目部署
文章目录一、静态资源部署到Nginx将前端资源打包配置`Nginx`文件配置`hosts`文件启动`Nginx`二、使用`pm2`挂载后台服务一、静态资源部署到Nginx将前端资源打包npm run build配置Nginx文件//nginx.confserver { listen 80; server_name movie.com; location / { //文件的路径 root st
2021-06-17 13:41:25
135
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人