vue
记录学习中遇到的问题,和对基础知识小案例的总结
初辰ge
这个作者很懒,什么都没留下…
展开
-
【vue3-pbstar-books】大学生前端期末作业,有前台、后台以及登录模块,采用vue3、element-plus、ts、pinia、vite、json-server等技术
vue3-pbstar-books 是一个图书主题的 pc 端网站,该项目有前台(首页、全部书籍页、书籍分类页、书籍详情页、关于页和登录页)和后台(图书馆里)两个模块采用 Vue3、Element-Plus、TypeScript、Pinia、Vite 和 json-server 等技术。原创 2024-07-21 21:44:50 · 247 阅读 · 0 评论 -
【vue3-pbstar-big-screen】一款基于vue3、vite、ts的大屏可视化项目
vue3-pbstar-big-screen是一款基于vue3、vite、ts的大屏可视化项目,项目已内置axios、sass,如element、echarts等需要自行安装,本项目主要通过`transform: scale()`缩放核心区域实现屏幕适配效果。原创 2024-05-07 15:25:11 · 445 阅读 · 0 评论 -
封装js方法实现无缝循环滚动效果
因为网上的插件多少都有点奇怪的bug,比如循环一轮之后就卡一下,不是无缝衔接,找了好多也没找到解决办法,于是只能自己写轮子原创 2024-05-07 11:42:48 · 268 阅读 · 0 评论 -
【vue3-pbstar-books】大学生前端期末作业(vue3、element-plus、ts、pinia、vite、json-server)
vue3-pbstar-books是一个图书主题的pc端网站,该项目有首页、全部书籍页、书籍分类页、书籍详情页和关于页五个页面。该方案结合了 Vue3、Element-Plus、TypeScript、Pinia 和 Vite 等先进技术,实现高效的页面布局、状态管理和构建体验。同时,后端采用基于 json-server 提供数据接口服务。原创 2024-04-13 22:26:03 · 2122 阅读 · 3 评论 -
【vue3-pbstar-admin】一款基于vue3和nodejs的简洁后台管理系统
Vue3-pbstar-admin 是一个简洁的后台解决方案,提供了基础的用户体系和页面接口权限配置,方便用户进行自定义开发,避免不必要的代码冗余。该方案结合了 Vue3、Element-Plus、Pinia 和 Vite 等先进技术,实现高效的页面布局、状态管理和构建体验。同时,后端采用基于 Node.js 的 Express 框架和 MySQL 数据库,提供稳定的数据存储和高效的后台服务。原创 2024-01-24 11:29:00 · 1660 阅读 · 0 评论 -
vue实现文字打字机效果(纯代码无需引入npm包)
为了实现文字打字机效果,网上找大多数说的是引入 vue-typed-js 插件,折腾了一通没弄太好,没办法,既然没有轮子那就创造轮子。原创 2023-05-11 17:26:36 · 3012 阅读 · 3 评论 -
vue数据大屏数字跳动效果(简单实用)
基于对vue-count-to插件的二次封装使代码更优雅的实现数据大屏数字跳动效果原创 2023-04-15 22:39:36 · 1555 阅读 · 0 评论 -
axios相应拦截器
【代码】axios相应拦截器。原创 2023-03-07 11:15:33 · 110 阅读 · 0 评论 -
Vue中事件总线$bus的用法及$on、$off和$emit的使用
【代码】Vue中事件总线$bus的用法及$on、$off和$emit的使用。原创 2023-01-19 14:32:10 · 1833 阅读 · 0 评论 -
vue自动实现px转vw,使页面等比缩放适应大小屏幕
为了小屏幕电脑兼容1920px设计稿的页面,所以需要将px单位转换成vw单位。原创 2022-08-30 15:10:21 · 1723 阅读 · 0 评论 -
【Pindex】我用vue做了个“假终端”
pindex 是一个终端风格的浏览器主页,为了学习和工作更便捷,目前有搜索跳转、书签收藏、英文翻译和新闻热搜等功能。原创 2022-08-11 12:15:03 · 1877 阅读 · 2 评论 -
使用electron将vue项目打包成exe桌面应用
Electron相当于一个浏览器的外壳,可以把现有的vue程序嵌入到壳里面,vue项目中添加 electron 模块,使用 npm run electron:serve 进行启动项目,对 electron 进行配置,打包 exe桌面应用。原创 2022-08-05 16:17:00 · 5350 阅读 · 8 评论 -
三行代码 解决vue中设置div contenteditable光标移动到最后
在Vue做项目时,做了一个div[contenteditable=true]的组件作为文本输入框。在非手动输入值后,光标会丢失,经测试以下这段代码可用,直接将光标定位到最后。原创 2022-07-28 12:40:15 · 2063 阅读 · 0 评论 -
纯前端vue图形验证码
转载自:https://blog.csdn.net/zxh7770/article/details/123906741创建VerificationCode.vue组件<template> <span class="s-canvas" @click="changeCode"> <canvas id="s-canvas" :width="contentWidth" :height="contentHe转载 2022-05-31 10:49:26 · 777 阅读 · 2 评论 -
vue封装分页组件并注册为全局组件
在components文件夹中新建paging.vue文件<template> <div class="pagingBox"> <div class="pagItem" @click="pageChange(1)"> {{isEn?'First':'首页'}} </div> <div class="pagItem" @click="pageChange('pre')">原创 2022-05-27 14:25:26 · 189 阅读 · 1 评论 -
vue中封装公共方法并挂载到全局
在src/assets/js下创建公共方法js文件(unit.js)function delUrlData (name) { var url = window.location.href; var urlparts = url.split('?'); if (urlparts.length >= 2) { //参数名前缀 var prefix = encodeURIComponent(name) + '='; var pars原创 2022-05-25 10:28:14 · 581 阅读 · 0 评论 -
elementui的el-cascader使用@vant/area-data数据
html<el-cascader v-model="form.area" placeholder="请选择地区" :options="arealist"></el-cascader>原创 2022-05-25 10:13:04 · 441 阅读 · 0 评论 -
vue全局自定义指令input自动获取焦点指令
在main.js中全局注册自定义指令Vue.directive('myfocus', { inserted: (el, binding) => { if (binding.value == true || binding.value == undefined) { el.focus() } }});使用自定义的自动获取焦点指令// 执行<input v-myfocus v-model="value" />原创 2022-05-07 09:19:21 · 948 阅读 · 0 评论 -
vue3封装axios请求
npm安装axiosnpm install axios创建http.js文件// 引入axiosimport axios from "axios";// 设置请求基准地址axios.defaults.baseURL = "http://api.xxxx.xx/";// 导出封装方法export default { get(url, params) { return new Promise((resolve, reject) => { axios原创 2022-05-03 21:18:45 · 980 阅读 · 2 评论 -
移动端预览(双指缩放移动)富文本编辑器上传的图片
通过使用vue-photo-preview插件,实现移动端图片的预览,全屏等功能。1.安装插件npm install vue-photo-preview --save2.main引入import preview from 'vue-photo-preview'import 'vue-photo-preview/dist/skin.css'Vue.use(preview)3.给dom加点击事件<div v-html="contents" @click="showImg($e原创 2022-04-29 13:49:26 · 720 阅读 · 0 评论 -
vue中修改路由参数和监听路由参数的变化
vue中修改路由参数和监听路由参数的变化不跳转页面修改路由参数 this.$router.push({ query: { keyword: this.keyword } })监听路由参数的变化 watch: { $route: { handler () { console.log(this.$route.query.keyword); }, deep: true } },...原创 2021-11-03 17:11:01 · 401 阅读 · 0 评论 -
Vue3基础知识总结
vue3介绍(vue3 保持了 vue2 的大部分特性,增加了以下新特性:组合式 APITeleport片段触发组件选项来自 @vue/runtime-core 的 createRenderer API 创建自定义渲染器单文件组件组合式 API 语法糖 (``) 实验性单文件组件状态驱动的 CSS 变量 ( 中的 v-bind) 实验性Suspensevue3较比vue2做出了以下改变:打包大小减少 41%初次渲染快 55%,更新快133%内存使用减少 54%更好的 Type原创 2021-06-28 20:17:22 · 2638 阅读 · 4 评论 -
基于 vue-element-admin 的项目总结
一、项目环境搭建1.vue-element-admin的了解和介绍vue-element-admin 是一个后台前端解决方案,它基于 vue 和 element-ui实现。它使用了最新的前端技术栈,内置了 i18 国际化解决方案,动态路由,权限验证,提炼了典型的业务模型,提供了丰富的功能组件,它可以帮助你快速搭建企业级中后台产品原型。2.项目模板启动和目录介绍2.1 git拉取基础项目模板$ git clone https://github.com/PanJiaChen/vue-admin-tem原创 2021-05-21 20:13:49 · 21066 阅读 · 35 评论 -
vue小案例 商品价格数量总价同步变化案例
vue商品价格数量总价同步变化案例效果动图代码展示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&原创 2021-04-05 17:08:10 · 2482 阅读 · 0 评论 -
[vue-router] Duplicate named routes definition: { name: “Home“, path: “/home“ } warn @ vue-router.
报错[vue-router] Duplicate named routes definition: { name: “Home”, path: “/home” }warn @ vue-router.esm.js?8c4f:16如何解决?报错原因: { path: '/', name: 'Home', component: Home }, { path: '/login', name: 'Login', component: Login },原创 2021-03-18 18:01:32 · 2770 阅读 · 1 评论 -
vue电商管理后台前端项目
电商后台项目概述管理员使用的业务服务:PC后台管理端PC后台管理端的功能:管理用户账号(登录,退出,用户管理,权限管理),商品管理(商品分类,分类参数,商品信息,订单),数据统计前端项目是基于Vue的SPA(单页应用程序)项目,前端技术栈:Vue,Vue-Router,Element-UI,Axios,Echarts项目及数据库准备恢复依赖包安装进入 vue-api-server 目录,运行如下命令,进行恢复安装npm install数据库创建及导入新建数据库 shop_admin,找到原创 2021-03-17 09:39:09 · 2069 阅读 · 1 评论 -
Vue基础知识总结
一、初识vueVue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架第一个vue页面通过通过上面的 vue 案例,总结 vue 的使用方法如下:创建dom结构,作为vue实例挂载点,vue实例中的所有数据只能在此dom范围内使用<div id="app"></div>通过 new Vue 创建 vue 实例el 属性指定当前 vue 实例的挂载点data 中是模型数据,这些数据依赖于当前的vue实例,可以在控制台中访问data数原创 2021-03-05 13:52:52 · 1013 阅读 · 1 评论