- 博客(213)
- 资源 (17)
- 问答 (1)
- 收藏
- 关注
RSS订阅
原创 从 0 搭建 Vite 3 + Vue 3 Js版 前端工程化项目
前言之前分享过一篇vue3+ts+vite构建工程化项目的文章，针对小的开发团队追求开发速度，不想使用ts想继续使用js，所以就记录一下从0搭建一个vite+vue3+js的前端项目，做记录分享。Vite 3 - 构建工具Vue 3Vue Router - 官方路由管理器Pinia - Vue Store你也可以选择vuexelement-plus - UI组件库Sass - CSS 预处理器Axios - 一个基于 promise 的网络请求库，可以用于浏览器和 node.js。
2023-11-28 18:24:27
1175
原创 vue3 + vite + ts + setup , 第二十一练 vue3 中使用函数式编程，h函数（一）
之前跟大家介绍了两种vue编写风格分别是template模板方式，和JSX方式感觉JSX被大家吐槽的很厉害，其实用习惯还挺好用的今天介绍第三种函数式编程。如果没有prop，那么通常可以将children作为第二个参数传入。如果会产生歧义，可以将。函数是一个用于创建VNode的实用程序。也许可以更准确地将其命名为。作为第二个参数传入，将children作为第三个参数传入。，但由于频繁使用和简洁，它被称为。...
2022-07-27 23:17:13
1045
原创 vue3 + vite + ts + setup , 第十九练 vue3 中使用vue-router(三)，动态路由
vue3.x使用[email protected] 动态路由，动态路由设置权限
2022-07-24 16:43:37
1200
原创 vue3 + vite + ts + setup , 第十八练 vue3 中使用vue-router(二)，前置守卫、后置守卫、路由元信息、过渡动效、滚动行为
vue3.x+ts+vite 使用[email protected]，路由过渡动画，路由切换滚动等
2022-07-24 14:56:12
963
原创 vue3 + vite + ts + setup , 第十七练 vue3 中使用vue-router(一)，router跳转传参/嵌套路由/路由重定向/别名
vue3.x中使用vue-router4.x
2022-07-19 23:44:58
1169
原创 vue3 + vite + ts + setup , 第十六练 vue3 中使用pinia (三) 如何做数据持久化处理，持久化插件
pinia和vuex都有一个通病页面刷新状态会丢失vuex通常我们都会使用localStorage等做一个本地存储那么我们在vue3中对pinia做一个持久化插件在main.ts中定义一个方法在pinia中注册在piniaPlugin方法中我们可使用store.$subscribe监听state的变化然后做存储或者。...
2022-07-17 22:17:53
1144
原创 vue3 + vite + ts + setup , 第十五练 vue3 中使用pinia (二) 如何使用getters、actions、 $reset、$subscribe、$onAction
vue3中使用pinia,getter和actions的使用
2022-07-16 17:07:24
3202
原创 vue3 + vite + ts + setup , 第十四练 vue3 中使用pinia (一) 修改state的值，使用storeToRefs解构响应性
vue3.x 如何使用pinia
2022-07-14 23:56:51
1961
1
原创 vue3 + vite + ts + setup , 第十三练 vue3 开发移动端，开发页面自适应
之前开发移动端常用的rem布局，或使用媒体查询，本文研究一下postcss-px-to-viewport的使用现在有了更好用的vw vhvw 视口的最大宽度，1vw等于视口宽度的百分之一vh 视口的最大高度，1vh等于视口高度的百分之一1、创建vue项目2、安装postcss-px-to-viewport 依赖3、因为vite中已经内联了postcss，所以并不需要额外的创建 postcss.config.js文件只需要在vite.config.ts配置postcss即可vite.config.
2022-07-10 23:52:21
2127
3
原创 vue3 + vite + ts + setup , 第十二练 Vue3 css style 新特性，样式穿透，插槽选择器，全局选择器，在vue3中使用tailwindcss
样式穿透 深度选择器插槽选择器 全局选择器CSS Modules CSS Modules 自定义注入名称与组合式 API 一同使用可以通过 API 在 和 中访问注入的 class。对于使用了自定义注入名称的 块， 接收一个匹配的 attribute 值作为第一个参数： CSS 中的 单文件组件的 标签支持使用 CSS 函数将 CSS 的值链接到动态的组件状态使用示例：创建组件css.vuecssset.vue
2022-07-10 00:16:01
1142
原创 vue3 + vite + ts + setup , 第十一练 Vue3自定义全局函数和变量，vue3 如何使用自定义插件
vue3中如何关在全局函数和变量，vue3.x中如何创建自定义插件并使用
2022-07-05 23:31:03
6040
1
原创 vue3 + vite + ts + setup , 第十练 自定义hooks的使用
Vue3 自定义Hook主要用来处理复用代码逻辑的一些封装这个在vue2 就已经有一个东西是Mixinsmixins就是将这些多个相同的逻辑抽离出来，各个组件只需要引入mixins，就能实现一次写代码，多组件受益的效果。弊端就是 会涉及到覆盖的问题组件的data、methods、filters会覆盖mixins里的同名data、methods、filters。第二点就是 变量来源不明确（隐式传入），不利于阅读，使代码变得难以维护。Vue3 的自定义的hookVue3 的 hook函数 相当于 vue2 的
2022-07-03 23:47:05
644
原创 vue3 + vite + ts + setup , 第九练 自定义指令directive的使用，简单封装一个拖动指令
除了 Vue 内置的一系列指令 (比如 或 ) 之外，Vue 还允许你注册自定义的指令，一个自定义指令被定义为一个包含类似于组件的生命周期钩子的对象。钩子接收指令绑定到的元素。2、在setup 内部使用自定义指令在 中，任何以 开头的驼峰式命名的变量都可以被用作一个自定义指令。在上面的例子中， 即可以在模板中以 的形式使用。在模板中使用注册全局使用3、钩子参数指令的钩子会传递以下几种参数：：指令绑定到的元素。这可以用于直接操作 DOM。：一个对象，包含以下 prope
2022-06-30 22:34:55
3284
原创 vue3 + vite + ts + setup , 第八练 小插曲Vue3自动引入插件unplugin-auto-import的使用；v-model的使用，自定义v-model
Vue3自动引入插件unplugin-auto-import的使用，自定义组件使用v-model,自定义v-model修饰符
2022-06-20 23:52:46
1424
原创 vue3 + vite + ts + setup , 第六练 兄弟组件传值 mitt和手写eventBus 以及获取全局变量多种方法
兄弟组件传值 mitt和手写eventBus 以及获取全局变量多种方法
2022-06-12 22:32:37
1021
原创 vue3 + vite + ts + setup , 第五练 依赖注入（provide/inject）的使用
vue3+ts+vite 依赖注入（provide/inject）的使用
2022-05-28 21:55:57
968
原创 vue3 + vite + ts + setup , 第四练 异步组件的使用，defineAsyncComponent和Suspense的使用
vue3+vite+ts 异步组件的使用，defineAsyncComponent和Suspense的使用
2022-04-23 22:43:45
4108
原创 vue3 + vite + ts + setup , 第三练 setup ts语法糖中如何使用全局组件，递归组件，动态组件
vue3+setup+ts Vue3 使用setup语法糖+ts中如何使用全局组件，如何使用递归组件，setup语法糖组件调用自身的问题如何解决
2022-04-20 01:03:45
3805
3
原创 vue3 + vite + ts + setup , 第二练 setup ts语法糖中实现父子组件传参
vue3 setup+ts语法糖 语法父子组件如何传参
2022-04-18 23:29:44
2237
原创 vue3 + vite + ts + setup , 第一练 如何使用setup ts语法糖
<template> <div v-html="message"> </div> <h1 class="h2-h" v-if="flag">布尔</h1> <button @click="isShowFun">click</button> <p :style="'color:' + ost.pColor"> <span>{{ ost.pNum }}</span&g.
2022-04-18 00:09:35
1210
原创 vue项目中，兼容vue3.0 & 1.0 & 2.0 宫格拖拽排序，特殊五小一大六宫格拖拽
前端时间写了标准宫格拖拽排序的文章 1、 2、4、9、12等等标准宫格拖拽，基于vue-grid-layout 拖拽换位无刷新vue项目中 基于vue-grid-layout开发的拖拽对换位置，九宫格拖拽排序，换位_csl125的博客-CSDN博客_vue九宫格拖拽安装：npm install vue-grid-layout --save&yarn add vue-grid-layout1、使用vue-grid-layout开发的一款拖拽排序，项目拖走其他自动挤进一效果如下：代码...
2022-01-17 19:08:28
1180
原创 vue项目中 五小一大六宫格拖拽排序，6宫格拖拽换位，矩阵拖拽排序
背景：项目中用到1、4、6、9、12、16宫格排序，拖拽换位等场景，项目是监控的视频矩阵，用户矩阵拖拽排序换位，之前已经实现1、4、9、12、16等矩阵式排列的拖拽排序，但是六宫格要求五小一大，之前的基于vue-grid-layout开发的拖拽对换位置已经实现除了五小一大的需求图：五小一大互相可以拖拽换位排序实现方案：基于vue-dragginghttps://github.com/hilongjw/vue-dragging实现六宫格拖拽，该组件也可实现1,4、6、9等需要简单修改即可.
2022-01-12 15:12:40
1399
原创 Vue3.0学习 - 第二十四节，Vue3.x 中 Vue-Router 详解，vue-router路由的使用
Vue3.x 中 Vue-Router 详解，vue-router路由的使用
2021-12-07 18:25:12
2188
原创 Vue3.0学习 - 第二十三节，Vue3.x 中 集成Typescript 使用Typescript
Vue3.x 中 集成Typescript 使用Typescript
2021-12-07 17:42:50
961
原创 Vue3.0学习 - 第二十二节，Vue3.x 中 watchEffect和watch
watchEffect立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。在响应式地跟踪其依赖项时立即运行一个函数，并在更改依赖项时重新运行它。具体什么意思呢例如：<template> <div> <h1>测试watch</h1> <hr> <h2>{{num}}</h2> <el-input v-model="state.name"&
2021-10-21 23:57:21
313
原创 Vue3.0学习 - 第二十一节，Vue3.x组件自定义事件 以及mitt 实现非父子组件传值
一、父子组件介绍二、Vue3.x组件自定义事件实现子组件给父组件传值注意： Vue官方推荐你始终使用 kebab-case 的事件名。子组件DatePicker.vue<template><button @click="run">通过广播方式实现子组件给父组件传值</button></template><script>export default { // 建议定义所有发出的事件，以便更好地记录组件应该如何工作。
2021-10-14 09:29:21
539
原创 vue3.x&vue-cli3+&vue-cli4.5+项目中使用axios封装http请求
定义接口环境文件，项目打包后会部署的不同的环境，1、环境配置文件：variable.jsconst cookieExpires = 30; //cookie存储时间 单位：天//接口请求环境配置let httpUrl = window.location.host;let httpBaseUrl = "http://www.baidu.com:60000";if (httpUrl.includes("cccxxxx.com")) { // 测试生产环境 httpBaseU
2021-08-05 16:09:31
835
原创 vue项目中 基于vue-grid-layout开发的拖拽对换位置，九宫格拖拽排序，换位
安装：npm install vue-grid-layout --save&yarn add vue-grid-layout1、使用vue-grid-layout开发的一款拖拽排序，项目拖走其他自动挤进一效果如下：代码如下：<template> <grid-layout :layout="layout" :auto-size="false" :col-num="3" :row-height="100"
2021-07-15 00:48:59
2016
3
原创 vue2.x 常用自定义指令，项目常用自定义指令
directives.jsimport Vue from 'vue'/** * 点击元素外 触发事件 * */Vue.directive('clickoutside', { bind(el, binding, vnode) { function documentHandler(e) { // 这里判断点击的元素是否是本身，是本身，则返回 if (el.contains(e.target)) { return false }
2021-07-08 11:24:09
894
1
原创 超实用：Vue 自定义指令合集
在Vue2.0中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通DOM元素进行底层操作，这时候就会用到自定义指令。你可以将一些css样式抽象到指令中，也可以将一些js操作放到指令中去执行。就使用上来说，指令不用像组件一样需要引入和注册，注册后使用非常简洁方便。对于在项目中常用到的指令，在此做了一个合集介绍，附源码可以直接在项目中使用。元素点击范围扩展指令 v-expandClick使用该指令可以隐式的扩展元素的点击范围，由于借用伪元素实现，故不会影响元素在...
2021-07-08 09:23:27
617
原创 Vue3.0学习 - 第二十节，vue3中 自定义组件使用 v-model
自定义事件也可以用于创建支持v-model的自定义输入组件<input v-model="searchText" />等价于：<input :value="searchText" @input="searchText = $event.target.value" />当用在组件上时，v-model则会这样：<custom-input :model-value="searchText" @update:model-value="searchT...
2021-06-27 13:05:42
3869
2
原创 Vue3.0学习 - 第十九节，vue3中如何使用 Teleport
Vue3.x中的组件模板属于该组件，有时候我们想把模板的内容移动到当前组件之外的DOM 中，这个时候就可以使用 Teleport。<teleport to="body">添加到body中 </teleport><teleport to="#app">添加在app中</teleport>使用Teleport实现一个模态对话框的组件创建一个组件 modelButton.vue<template> <telepor
2021-06-24 14:27:05
653
原创 vue3.x中使用深度选择器 /deep/ ＞＞＞
在vue2中使用深度选择器可以使用旧版写法：/deep/ input{ }>>> input{}在vue3.x中的写法新版写法：.user-center { &:deep(.tableheader) { background: #f0f6fc; color: #000; }}.user-center { ::v-deep .tableheader { background: #f0f6fc; col..
2021-06-22 18:53:49
5046
原创 Vue3.0学习 - 第十七节，vue3中如何使用 router、 watch、computed、和路由监听
在vue3.x中使用router和vue2 不一样了在vue2中使用方法：this.$router.push()this.$route.parma
2021-06-16 15:18:27
5199
原创 Vue3.0学习 - 第十六节，Vue3 中router-view警告解决方案vue-router4.0 keep-alive保存当前页面数据的正确写法
在学习vue3发现使用router-view竟然警告了什么鬼？[Vue Router warn]: <router-view> can no longer be used directly inside <transition> or <keep-alive>.Use slot props instead:<router-view v-slot="{ Component }"> <keep-alive> <compon
2021-06-10 23:08:42
6513
14
原创 Vue3.0学习 - 第十五节，Vue3 中如何在css中使用js的变量
vue3中有一个方法，在css中使用js里定义的变量<template> <div class="a-div"> vue3在css中使用js的变量 </div></template><script>export default { data() { return { color: "red", font: { size: "16px",
2021-06-07 23:34:41
2322
4
vue3.x中使用cesium，vue3.x+Cesium
2022-05-04
Chrome-Sync-Helper谷歌登录插件，谷歌登录同步插件
2020-11-30
vuecli4.x+element搭建的基础框架
2020-11-24
网页保存图片并下载到本地 兼容IE浏览器
2019-02-20
基于vue-grid-layout拖拽，6宫格1大5小，如何实现拖拽换位
2021-07-21
TA创建的收藏夹 TA关注的收藏夹
TA关注的人