骑着蜗牛去放羊~-CSDN博客

原创 Vue3 + vite + ts + qiankun.js的实际应用

Vue3 + ts + vite + pinia 与qiankun.js微前端的正确打开方式，附加一套完整的后端管理系统架构

2023-05-25 10:56:36 968 3

原创 Git提交指定的文件

Git提交指定的文件提交步骤:git提交指定文件，如果此时修改了其他代码，可先提交指定代码，然后忽略不想提交的代码，最后push之后，恢复之前忽略的代码1 git status 查看修改的所有内容2 git add ’ ’ 文件名添加需要提交的文件名git status打印出来的文件名, 一个点是提交全部3 git stash -u -k 忽略其他文件4 git commit -m “修改的内容”5 git pull origin 拉取远程库代码6 git push origin

2022-05-16 10:10:38 2845

原创 Vue首屏加载等待动画

vue实现首屏加载等待动画避免首次加载白屏尴尬的俩种实现方式1.第一种效果代码index.html中添加以下代码<style type="text/css"> .first-loading-wrp { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 90vh; min-he

2021-09-09 15:11:06 2692 2

原创 React路由封装（类似vue）

vue写多了，使用react-route反而有点不适应了，今天我们就封装一个类似于vue的react-route安装npm install react-router-dom新建route文件在根目录新建route --> index 与 route--->routesroutes文件存放内容为所有的路由信息import Login from "../views/login/login";import Home from "../views/home/home";// 动态

2021-08-30 16:57:54 885

原创 vue自动化部署阿里云oss打包上传

1.引入阿里云 webpack-aliyun-ossyarn add webpack-aliyun-oss -D2.根目录新建oss.config.js并配置如下module.exports = { region: '你的oss服务器区域', accessKeyId: '你的accessKeyId', accessKeySecret: '你的accessKeySecret', bucket: '你的bucket' }3.vue.config.js中配置打包设

2021-08-26 11:17:33 1624

原创 Vue3.0总线程bus.js使用（mitt）

vue 3.0 移除了 on，on，on，off 和 once方法，once 方法，once方法，emit 仍然是现有 API 的一部分，因为它用于触发由父组件以声明方式附加的事件处理程序.那么我们该如何处理简单的兄弟组件间的数据传输呢！官方推荐使用的第三方库：mitt1.引入npm install --save mitt2.创建bus.js并写入一下代码（建议存放在与main同一目录）import mitt from "mitt";const bus = {};const emitter

2021-05-06 16:23:10 1658 1

原创最简单的WebScoket长连接

1.新建websocket.js文件let webSock = null;// 成功接收主题let messageCallback = null;// 失败接收主题let errorCallback = null;// 给后台推送数据let params = null;// 初始化function initWebSocket(url) { if (typeof WebSocket === "undefined") { window.vm.$Message.error("

2021-04-21 11:38:12 532

原创中高级前端必须注意的移动端 H5 坑位指南

移动端开发在前端里像神一样地存在，不是说它多难而是说它坑位实在太多了，怎样填都填不完。Android和iOS各显神通，Android的系统版本和屏幕分辨率多得难以一招兼容，iOS的顽固标准和未知特性多得难以快速掌握。媒体查询常用样式表 <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> // 竖放加载 <link rel="stylesheet" media

2021-04-16 17:02:34 163

原创最简单的vue 跨域处理 proxy

跨域问题来源于JavaScript的同源策略,即只有协议+主机名+端口号(如存在)相同,则允许相互访问。也就是说JavaScript只能访问和操作自己域下的资源,不能访问和操作其他域下的资源，主要是安全问题。1.首先在项目的根目录下建一个vue.config.js2.具体配置如下devServer: { open: true, disableHostCheck: true, host: "127.0.0.1", port: 8888, https: false

2021-04-16 15:32:39 242

原创 Vue拖拽自定义顺序之draggable

Draggable为基于Sortable.js的vue组件，用以实现拖拽功能。具体说明，请参考：https://www.npmjs.com/package/vuedraggablevuedraggable特性：1.支持触摸设备2.支持拖拽和选择文本3.支持智能滚动4.支持不同列表之间的拖拽5.不以jQuery为基础6.和视图模型同步刷新7.和vue2的国度动画兼容8.支持撤销操作9.当需要完全控制时，可以抛出所有变化10.可以和现有的UI组件兼容使用npm install vue

2021-04-06 09:47:59 794

原创最好理解的Vue-keepAlive按需缓存

Vue项目开发中我们经常会有某些场景例如列表进入详情缓存列表页面，列表返回首页清除缓存等需求。那我们如何实现该需求呢。vue有内置的缓存组件keepAlive，使用keepAlive + include就可以帮我们非常完美的实现该需求。1.在Vuex中配置需要缓存的数组以及处理方法export default new Vuex.Store({ state: { keepAlive: [], }, //getters和组件的computed 类似，方便直接生成一些可以直接用的数据。当

2021-03-31 09:38:51 485

原创纯前端打包工具Parcel

零配置构建Parcel最近发现一个更快更好玩的打包工具，一通操作发现这个东东貌似用于小型的纯前端更加舒服Parcel是一款0配置的打包工具,而且直接使用即可,打包速度快,提供了傻瓜式的使用体验,在相同的项目中使用parcel速度会快很多,因为parcel内部使用的是多线程打包，安装yarn global add parcel-bundler创建一个 package.json 文件，yarn init -y示例的目录结构和代码配置启动打包package.json 简单配置{ "na

2021-03-29 17:03:25 516

原创 textarea高度随内容撑大

当textarea里的内容超过一行后，会出现滚动条并隐藏前一行的内容，特别是在移动端使用到textarea多行文本输入的话，这样显示其实是很不友好的。所以要做一个可根据内容改变高度的textarea的组件。由于项目是使用的vue写的所以就用vue举例了。1.首先创建一个setTextarea.js用于存放设置高度的方法setTextarea.jslet hiddenTextarea;const HIDDEN_STYLE = ` height:0 !important; visibility

2021-03-17 11:40:16 2105

原创 Vue自定义svg字体图标

1.安装svg-sprite-loadernpm install svg-sprite-loader --save-devcnpm install svg-sprite-loader --save-dev2.在src目录下新建icon文件（1.）新建index.js文件用来注册全局组件 import Vue from "vue"; import SvgIcon from "@/components/SvgIcon"; // register globally Vue.component

2021-01-27 15:24:22 577

原创 Vue 组件之间传值

子组件部分<template> <div class="child"> <div> <p>子元素接收父元素值为： {{ msg }}</p> <span @click="setUserName">子元素向父元素传值</span> </div> </div></template> <script>export de

2021-01-18 17:00:47 150

原创 vue中使用mock数据

Mock.js 是一个模拟数据生成器，利用它，可以拦截ajax请求，直接模拟返回数据，这样前后端只要约定好数据格式，前端就不需要依赖后端的接口，可以直接使用模拟的数据了。网上介绍mock的教程也较多，不过大多数看的比较模糊。其实使用起来非常简单，这里介绍在Vue工程中使用Mockjs，并且实现开发和生产配置化。1.安装npm install mockjs2.封装mock数据根目录新建一个mock文件夹在该文件夹下新建index.js// 在这里可以做一些通用的配置const Mock =

2021-01-07 14:18:38 1052

原创详解微信小程序网络请求接口封装

为实现定制要求和方便调用，对微信小程序的网络请求接口进行了封装在根目录新建api文件夹并新建httpRequest.js与config.js文件1.设置请求域名// 设置请求域名let ENV = __wxConfig.envVersionlet httpUrl = '',if (ENV == 'develop') { // 测试版开发环境域名 httpUrl = 'https://*******.com/api';} else if (ENV == 'trial') { // /

2021-01-06 15:14:00 1376 1

原创微信小程序点击图片放大

在平时开发微信小程序图片列表中经常有图片点击放大查看的需求，今天我们就看看小程序是如何实现的呢1.传参<block wx:for="{{ImageArr}}" wx:key="index">//previewImg：点击的方法 // data-imgUrl：点击图片传递一个imgUrl的参数，该参数就是当前图片的地址// data-arr arr参数就是当前循环的图片集合 <image src="{{item.ImageUrl}}" class="img" bind

2021-01-06 10:44:16 3888

原创微信小程序引入vant

开发小程序过程中由于不想写样式便想着是否可以像vue一样引入vant呢，话不多说直接上代码。首先需要做一些准备工作，开启小程序的npm功能。1.npm包构建（1）打开小程序开发工具点击详情，选择使用npm模式（2）点击微信开发者工具菜单栏的工具，选择构建npm当显示以下表示npm构建成功，构建完成就可以使用npm包了如果你的主目录中锁了个node_modules，说明npm包构建成功了。接下来我们引入vantUI2.引入Vant-UI# 通过 npm 安装npm i @vant/wea

2021-01-05 11:48:18 1100

原创全局公用过滤器filter

今天给大家带来一个比较实用的东东filter，没错就是过滤器。我们在vue中经常使用的一个东东，今天就给大家介绍一个简单的封装filter首先在src下新建一个plugins文件，在plugins文件下面新建一个filters.js1.过滤方法// 在该js文件中放入项目所需的所有的过滤方法并且抛出// 转换时间戳const formatDate = function (value) { const date = new Date(value); const y = date.getFul

2021-01-05 10:46:26 403

原创 axios接口拦截封装

在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。如果还对axios不了解的，可以移步axios文档。安装npm install axios; // 安装axios引入一般我会在项目的src目录中，新建一个api文件夹，然后在里面新建一个httpRequest.js和一个api.js文件。httpRequest.js文件用来封装我们的axios，api.js用来统一管理我们的接口。// 在httpRequ

2021-01-04 10:59:21 171

转载 Vue自定义指令封装

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

2020-12-29 21:46:32 2092 1

风口浪尖的猪吖