- 博客(53)
- 收藏
- 关注
RSS订阅
原创 vue3-路由配置
vue-router 怎么用? 1.下载 npm install vue-router@4 2.创建router文件夹 并添加index.js import { createRouter, createWebHistory ,createWebHashHistory } from 'vue-router' // 两种方式 //1.createWebHashHistory --- hash //2.createWebHistory --history const routerHist.
2021-11-16 19:37:16
848
原创 vue3-vuex的使用
vue3中vuex是怎么配置呢? 1.下载npm install vuex@next 2.创建store文件夹并添加index.jsimport {createStore} from "vuex"; const store = createStore({ state() { return { storeCount: 1 } }, getters: { double(state) { .
2021-11-16 19:30:22
671
原创 uniapp 页面跳转 详细（如何传递对象）页面之间如何传值$emit, $on 时机。还有对应的新写法
1. 常用方式uni.navigateTo({ url:'/pages/index/test', //建议这么写})//或者<navigator url="./test" animation-type="pop-in">挑战2</navigator>2.情况1. 在当前页面跳转到test页面的时候 我希望传递一些参数 uni.navigateTo({ url:`/pages/index/test?id={this.id}&name=${this.name}`
2021-10-24 20:19:48
12710
6
原创 vue3 数据定义方式 reactive系列详解
// 上一篇主要写了关于父子组件传值 // setup的定义方式 ，这一篇主要讲解定义数据的方式 // reactive, ref 这两个不在陈述,定义格式请看上篇 // readonly 定义一个只读的**对象**， 也只接受对象 // 这类似Obj.freeze() 来冻结数据 <template> <div> <div>{{ data.count }}</div> ...
2021-09-29 16:12:47
2324
原创 vue3.0 数据定义，父子组件传值，setup的写法，ref等
vue3.0 **提供两种setup的入口方式，现在的话没有this**1.export default{ setup(){} }2.<script setup>// 建议使用第二种，因为定义更简便// 数据定义和方法使用 两种格式---------------------------------分割----------------------------------------<template> <div class='content'&g
2021-09-27 13:45:54
1196
1
原创 同时将scss全局变量注入、Tailwind样式使用、自己插件配置到vite
经过这些 你既 使用自定义的变量 Tailwind提供的便利class 还有自己控制pxToViewport的插件（你可以自己处理css）上述的操作会为postcss 新增一个插件、不过这样会导致Tailwind和autoprefixer等插件失效。上述不能的原因是因为require是common.js的语法、现在是esmModlue。来到vite的配置中也就是vite.config.js或者.ts。
2024-11-29 10:21:18
751
原创 vue3-vite-ts axios添加声明文件，axios封装
1.yarn add axios 2.创建一个http的目录,添加http.ts文件import axios from "axios";import {AxiosRequestConfig, AxiosResponse} from "axios";这里是pinia的仓库，这里有个问题import {userStore} from "../store";这里这么写完就会pinia会报错，应该在拦截器中写//const stotre = userStore();import {message}.
2022-05-30 15:44:51
1510
原创 vue3 v-memo
<template> <div> <input type="text" v-model="tips"> <div v-memo="shouUpdate"> <p v-for="(item,index) of arr" :key="index"> {{ tips }}-{{ animalType[tips] }} </p> </div> </div&
2022-05-23 10:27:58
669
原创 vite自动按需导入ant-desgin-vue 自动导入hook的配置
import {defineConfig} from 'vite'import vue from '@vitejs/plugin-vue'//支持jsximport vueJsx from '@vitejs/plugin-vue-jsx';// 自动导入vue中hook reactive ref等import AutoImport from "unplugin-auto-import/vite"//自动导入ui-组件 比如说ant-design-vue element-plus等import
2022-05-20 11:30:37
1231
原创 uniapp 从0到1 h5地图引入定位服务，获取两个经纬度之间的距离或多个经纬度之间的距离，跨域配置
uniapp h5地图必须选择腾讯地图，这是uniapp规定的1.引入定位服务首先来到腾讯地图开放平台，申请一个key这是可以多选的，但必须勾选webservice api，如果你报这个问题了，就是没勾选接下来就可以用定位功能 如果需要具体信息，只能为app端,因为H5只有经纬度 https://uniapp.dcloud.io/api/location/location.html#getlocation uni.getLocation({ type
2022-04-13 08:30:18
2011
3
原创 vue3 v-model方式修改父组件内部得值，自定义修饰符
vue中数据数据流向vue中数据流向是单向的，也就是说我们不能直接修改props中的值所以我们都会<template> <div> <Renderer :data='data' @updateValue='updateValue'/> </div></template><script setup> 我这里使用unplugin-auto-import所以不必导入ref import Re
2022-04-06 10:20:53
2579
原创 uniapp-地图-不同端的使用-高德maker问题-经纬度转换详细地址
app端地图使用=>高德地图(官方文档推荐使用nvue不使用vue)h5端小程序使用=>腾讯地图支付宝使用=>高德地图在manifest.json配置h5端配置一定要注意不同端使用不同的地图否则没法渲染解释一下为啥非要nvue，app端如果使用vue <template> //app的是高德 <map @tap='mapClick'></map> </template> <script> expor
2022-03-28 21:14:36
986
原创 vue3响应式的简单实现（vue设计与实现-霍春阳）
这一篇主要讲解VUE3的响应式，这个系列会随着博主的不断学习一直更新1.首先vue3是通过proxy实现的响应式，先来简单描述proxylet obj = new Proxy(你要代理的对象，{ get(target,key){ target是当前对象,key是键 return target[key] }, set(target,key,newValue){ target[key]= newValue }})2.编写开始首先我们需要存储所有需要触发的effect桶，也就是集合，
2022-03-20 15:44:10
1831
原创 前端Blob对象,文件下载，图片预览，文件下载插件推荐
简介：blob是存放二进制大对象的容器,包括large object 创建一个bold对象let str = '123456';//这样你就拥有一个blod对象const blob = new Blob([str],{ type: 'text/plain'})//如果拿到blod中存储的内容 blob.text().then(result => console.log(result)) //这是文本类型的奥~~2.模拟后台给你发送.html文件a标签添加download是h5
2022-03-16 15:33:09
1113
原创 前端对文件进行分片
前端夏老师------<!DOCTYPE html><html><head> <title><%= title %></title> <link rel='stylesheet' href='/stylesheets/style.css' /></head><body> <input type="file" id='input'> <button id.
2022-03-12 17:10:14
2174
原创 解决js精度丢失问(big.js)
yarn add big.js <template> <div>4563</div></template><script>import Big from "big.js";export default { data() { return { testValue: [ { value: 0.1, }, { val...
2022-03-03 14:20:13
534
原创 vscode合集(强烈推荐)
只提供文字版，没有截图 Auto close Tag (自动帮你闭合标签) Tabnine AI autocomplete (智能代码提示,不好用来喷我) Auto Rename Tag (改一个标签，另一个也被更改) Bracket pair Colorizer(间距) Chinese(中文包) code runner(运行node.js) code spell checker(拼写检查) Identical sublime Text (这是主题) Live Sass Compile.
2022-02-25 21:23:15
204
原创 vue解决单页面seo
yarn add prerender-spa-plugin yarn add vue-meta-info - 来到vue.config.js const path = require('path'); const PrerenderSPAPlugin = require('prerender-spa-plugin') module.exports = { configureWebpack: { plugins: [ new Prerender...
2022-02-25 21:11:05
685
原创 vue3使用Pinia
- pinia简介- Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态- Pinia 适用于 Vue 2 和 Vue 3 ，并且不需要你使用组合API- 为什么使用pinia?- Pinia 修改数据更方便- Pinia 仓库数据具有缓存- Pinia 只包含 state getters action 更小巧- Pinia 编译速度更快- Pinia 对ts的支持更也友好- Pinia 和vuex是同一团队- Pinia 支持vue2和vue3一. 使
2022-02-17 16:57:19
1735
原创 vue@3 TypeError: Cannot read property ‘references‘ of null
这么做会会报上面那个错误 只需要将两个script标签换一个位置就可以了
2021-12-20 08:27:28
523
原创 vue3 插槽使用
vue3 遗弃了 slot 的方式vue3方式具名插槽 <template> <div class="content"> <slot name="label"></slot> </div></template>//这是插槽的组件<SlotComponent>现在插槽必须使用 template 渲染 v-slot 这里必须这么写 <template v-slot:label>
2021-12-10 13:40:22
1988
原创 vue3 获取$attrs 跨组件通信 provide - inject 兄弟组件eventBus
vue3 获取$attrs的方式 <Attrs title="this is title" :data="attrsData"/> <script setup> import Attrs from "./components/Attrs/Attrs" let attrsData = reactive( [ { id: 1, name: 'gq' } ] ) </script&g.
2021-12-07 10:42:15
2365
原创 vue3 样式穿透
vue2.x <<< .a /deep/ .a vue3 &:(.swiper-pagination-bullet-active){ width: 20px; height: 20px; background: #fff; }
2021-12-03 20:30:08
5218
原创 vue3获取组件元素
<template> <Rate :value="score" theme="green" @update-rate="update" ref="rate" /></template><script setup>import {onMounted,ref} from "vue";import Rate from "./Rate"onMounted(()=>{ //这里就可以获取组件元素，你可以更改当前元素的style consol
2021-11-29 09:21:20
1908
原创 vue3 配置轮播图 swiper6
本人用的是"swiper": "^6.3.0", 现在轮播图配置更加友好 <template> <swiper :autoplay="swiper_options.autoplay" :loop="swiper_options.loop" :speed="swiper_options.speed" :pagination="swiper_options.pagination" > <swiper-slide v-for..
2021-11-21 14:17:03
892
2
原创 vue3.0 ref 和reactive 制空数组的方式 (两者是有差异的)
1.采用 reactive 制空数组 let goodList = reactive([ { id: 1, title: '苹果' }, { id: 2, title: '鸭梨' } ]) 正常想法 goodList = [] //但是这样是不行的 正确 goodList.length = 0; //--------------------------..
2021-11-11 19:24:13
3510
原创 uniapp 安卓 ios 截屏 保存到相册
//有一部分是借鉴 saveImageToPhotos() { // 当前当前设备是ios还是安卓 let type = uni.getSystemInfoSync().platform; let height = type === 'android' ? '85' : '58'; let top = type === 'android' ? '15' : '15'; //获取当前页面信息 let pages = getCurrentPages..
2021-10-29 15:29:38
981
5
原创 uniapp 小程序分包
在uniapp配置的 pages 对于小程序中的主包，因为小程序的主包的大小限制为2M， 所以需要进行分包设置// 分包开始”subPackages“：[ root": "pagesSub/invoice", // 分包之后的根路径 "pages":[ { "path": "face/face", //子路径 "style": { "navigationBarTitleText": "人脸核身", // 页面标题
2021-09-18 10:19:19
371
原创 uniapp 获取当前页面实例
用uniapp获取当前页面实例的时候不能直接使用this而是使用// 获取当前页面的实例let pages = getCurrentPages();//这句话 获取的才是当前页面实例let currentPage = pages[pages.length-1]
2021-09-09 14:10:53
8052
原创 uniapp图片保存到相册
你需要知道当前用户是否授权 你保存相册的权限2.你直接吧代码copy吧。 写不动了 savePoster()｛ let _this= this; uni.getSetting({ success(res) { if (res.authSetting['scope.writePhotosAlbum']) { // 如果开启直接保存 _this.saveImageToPhotosAlbum(_this.goodUrl); ..
2021-09-02 18:06:46
320
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人