Vue3.0

【vue3.0】9.0 某东到家（九）——axios发送登录mock请求、请求函数的封装

后端接口可以写到自己搭建的fastmock网站上。fastmock官方网站image.png在向后台请求数据之前需要在终端安装axios插件：>npminstallaxios--save修改src\views\login\Login.vue://路由跳转方法import{useRouter}from'vue-router'importaxiosfrom'axios'exportdefault{na
bobokaka·2021-10-15 20:05

【vue3.0】8.0 某东到家（八）——路由守卫实现登录校检功能、注册页面的实现

限制只有登录才能访问首页，而不登录只能打开登录界面。这就用到路由守卫功能。修改路由配置文件``：import{createRouter,createWebHistory}from'vue-router'constroutes=[{path:'/',name:'Home',component:()=>import(/*webpackChunkName:"home"*/'../views/home/H
bobokaka·2021-10-15 20:03

【vue3.0】7.0 某东到家（七）——登录页面开发

有这么一个设定先登录才能看到首页面。将项目src/App.vue修改：importLoginfrom'@/views/login/Login'exportdefault{name:'App',components:{Login}}新建src\views\login\Login.vue:登陆立即登陆忘记密码exportdefault{}.wrapper{position:absolute;left:
bobokaka·2021-10-15 20:58

【vue3.0】6.0 某东到家（六）——vue精简代码、css约束、vue工具使用

src\views\home\Docker.vue{{item.title}}exportdefault{name:'Docker',setup(){constdockerList=[{active:'docker__item--active',icon:'custom-iconcustom-icon-home',title:'首页'},{icon:'custom-iconcustom-icon-
bobokaka·2021-10-15 20:55

vue3.0 自定义事件

一、自定义事件实现验证抛出事件我们写一个自定义事件、该事件旨在创建一个活动。假设我们的邮箱和密码是必填项。我们通过自定义事件在验证完邮箱和密码之后将form表单数据传递给父组件。页面效果如下：我们最终想要的效果是想要在数据验证通过在父组件中调用submitData方法，从而进行提交。现在我们把焦点聚焦在custom-form组件中。以下是custom-form组件的详细实现代码：-立即创建取消im
·2021-10-15 13:48

【vue3.0】4.0 某东到家（四）——搜索栏、广告位横幅和分类菜单

目前src/App.vue代码如下：西安交通大学兴庆校区梧桐苑食堂北侧小院子放台阶上首页购物车订单我的@import'./style/viriables';@import'./style/mixins';.wrapper{position:absolute;left:0;top:0;bottom:0.5rem;right:0;padding:00.18rem;}.position{//文字显示省略
bobokaka·2021-10-14 23:35

【vue3.0】3.0 某东到家（三）——首页顶部布局位置栏的实现

首先安排一个大的布局。修改app.vue：首页购物车订单我的.wrapper{position:absolute;left:0;top:0;bottom:0.5rem;right:0;background:#1fa4fc;}.docker{display:flex;//自适应均赠,弹性盒子position:absolute;//绝对定位box-sizing:border-box;//这个会以bod
bobokaka·2021-10-14 23:32

【vue3.0】2.0 某东到家（二）——CSS样式和图标：flex + iconfont

底部图标开发使用https://www.iconfont.cn/首先注册一个账号，然后在图标管理中点击我的项目：image.png新建项目image.pngimage.png搜索图标，找到心仪的图标后悬停，加入购物车：image.pngimage.png然后加入项目，导出到本地：image.pngimage.pngimage.png解压缩，可以看到很多文件：image.png最重要的demo.cs
bobokaka·2021-10-14 23:30

【vue3.0】1.0 某东到家(一)——实战项目项目开发

新建项目win+R>cmd>cdF:\workspace\vue_workspace\moudong_go_home_workspace>vuecreatemoudong_go_homeimage.png必备插件：image.png启动命令：npmrunservevscode必备插件eslint:编码语法规范vetur：识别vue语法，高亮vue代码生成目录的项目结构node_modules:第三
bobokaka·2021-10-14 23:27

全面总结Vue3.0的多种侦听方式

目录侦听器一、wacthEffect二、watch1.1第一种方式侦听1.2第二种方式侦听1.3侦听多个数据源总结侦听器虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么Vue通过watch选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。一、wacthEffect立即执行,没有immediate侦听，wat
·2021-10-13 08:26

简单聊聊vue3.0 sfc中setup的变化

目录前言标准的sfc写法script-setup变量暴露组件挂载props自定义事件总结前言在vue中，sfc(单文件组件)指的是文件后缀名为.vue的特殊文件格式，它允许将Vue组件中的模板、逻辑与样式封装在单个文件中。以下是一个基本的sfcexport default {  data() {    return {      greeting: 'Hello World!'    }  }} 
·2021-10-13 08:56

vue3.0中的watch侦听器实例详解

目录前言侦听器和计算属性的区别vue3如何使用watch呢？基本使用监听多个响应式数据侦听reactive定义的响应式数据监听reactive定义的响应式数据的某一个属性配置选项用法总结前言虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么Vue通过watch选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
·2021-10-09 13:14

Vue3.0的多种侦听方式

目录一、wacthEffect二、watch1.1第一种方式侦听1.2第二种方式侦听1.3侦听多个数据源一、wacthEffect立即执行,没有immediate侦听，watchEffect是立即执行的，没有immediate,不需要传递侦听的内容,自动会感知代码依赖,不需要传参,只需要传一个回调函数不能获取之前的值如果需要停用侦听器,可以回调这个侦听器函数conststop=watchEffec
前端老实人·2021-10-08 18:16

vue3.0手动封装分页组件的方法

本文实例为大家分享了vue3.0手动封装分页组件的具体代码，供大家参考，具体内容如下1.父组件引入src/views/goods/components/goods-comment.vue//调接口import
·2021-09-26 12:28

vue3.0实现复选框组件的封装

本文实例为大家分享了vue3.0实现复选框组件封装的具体代码，供大家参考，具体内容如下大致步骤：实现组件本身的选中与不选中效果实现组件的v-model指令改造成@vueuse/core的函数写法import
·2021-09-25 14:39

vue3.0实现下拉菜单的封装

vue3.0出来已经有段时间的了，也与必要开始研究它了！
·2021-09-25 14:39

为什么Vue3.0 不再使用defineProperty实现数据监听

其实这个问题很多文章都有写，也是面试的高频题目，这里仅仅是记录下自己的理解。Proxy和Object.defineproperty的区别Object.defineProperty只能劫持对象的属性，对于嵌套的对象还需要进行深度的遍历；而Proxy是直接代理整个对象Object.defineProperty对新增的属性需要手动的Observe(使用$set);Proxy可以拦截到对象新增的属性，数组
·2021-09-24 17:53

Vue3封装 Message消息提示实例函数详解

$message=function(){}vue3.0使用app.config.globalProperties挂载原型方法app.config.globalProperties.
·2021-09-24 11:56

Vue3封装 Message消息提示实例函数

$message=function(){}vue3.0使用app.config.globalProperties挂载原型方法app.config.globalProperties.
run-Ameng·2021-09-23 22:13

一文带你了解vue3.0响应式

目录使用案例reactiveAPI相关的流程reactivecreateReactiveObject创建响应式对象mutableHandlers处理函数get函数get函数的的调用时机track收集依赖set函数trigger分发依赖get和副作用渲染函数关联副作用渲染函数的执行过滤结尾我们知道Vue2.0是利用Ojbect.defineProperty对对象的已有属性值的读取和修改进行劫持，但是
·2021-09-15 16:28

Vue3.0 + Vite2.0 + Ts4.0搭建一款简约版本的移动端博客

vue3-vite2-blog-h5一款简约版本的移动端博客。前端项目主要是采用Vue3最新语法糖和Vant3.0来搭建的；采用Tsx来渲染公共组件；采用Vite2.0来构建、打包。后端项目主要采用Node框架Koa2以及MongoDB数据库来设计的。PC端博客线上预览地址：http://www.rasblog.comPC端博客仓库地址：https://github.com/Sujb-sus/vu
·2021-09-13 22:17

Vue3.0 + Vite2.0 + Ts4.0搭建一款简约版本的移动端博客

vue3-vite2-blog-h5一款简约版本的移动端博客。前端项目主要是采用Vue3最新语法糖和Vant3.0来搭建的；采用Tsx来渲染公共组件；采用Vite2.0来构建、打包。后端项目主要采用Node框架Koa2以及MongoDB数据库来设计的。PC端博客线上预览地址：http://www.rasblog.comPC端博客仓库地址：https://github.com/Sujb-sus/vu
苏s哈·2021-09-13 22:35

vue2.0/3.0中provide和inject的用法示例

2、provide/inject使用方式具体用法：vue3.0用法总结1、provide/inject有什么用？
·2021-09-13 19:22

vue3.0 watch侦听器详解

侦听器虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么Vue通过watch选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。侦听器和计算属性的区别计算属性里不可以做异步操作，侦听器可以做异步操作，相当于计算属性的升级版vue3如何使用watch呢？基本使用watch侦听器页面普通侦听数据:{{num}}点击
Youyzq·2021-09-12 17:34

vue3+vite+ts搭建一个完整的项目（包括vue-router，vuex，ElementPlus等插件）

文章目录一，介绍二，搭建项目三，安装vue-router4.0四，安装vuex五，安装Elementplus一，介绍Vite（法语单词，“快”的意思）是一种新型的前端构建工具最初是配合Vue3.0一起使用的
番茄wky·2021-09-10 16:39

Vue3.0的优化总结

1.源码优化：a.使用monorepo来管理源码Vue.js2.x的源码托管在src目录，然后依据功能拆分出了compiler（模板编译的相关代码）、core（与平台无关的通用运行时代码）、platforms（平台专有代码）、server（服务端渲染的相关代码）、sfc（.vue单文件解析相关代码）、shared（共享工具代码）等目录。Vue.js3.0，整个源码是通过monorepo的方式维护的
·2021-09-09 13:58

vue3.0 使用高德地图获取经纬度信息

本来是打算使用微信地图来完成这个的。但是主管让必须使用高德地图来完成。这个移动端web可能真的没有高德地图大。引入一个比自己大的，也实属无奈。记录一下。还是更建议使用微信jssdk完成。我这里没有加载地图的实体。因为用不到。只获取当前的经纬度就行了。第一步importAMapLoaderfrom'@amap/amap-jsapi-loader';这是高德地图推荐的npm方式。第二步importAM
·2021-09-09 11:45

vue3.0+echarts实现立体柱图

前言：vue3.0实现echarts立体柱图实现效果：实现步骤：1、安装echartscnpmi--saveecharts2、页面定义容器3、js中引入echartsimport*asechartsfrom'echarts
·2021-09-03 14:19

vue3.0与leaflet的搭建和简易demo

hint：node=>14.17.5npm=>6.14.14选择安装leaflet版本'^1.7.1'以实现散点图的业务为驱动Map的承载Div初始化地图并且实现了几个简易功能点:根据数个点位生成polygon并加载随机点位加载svg标记点加载标记点后重新设置标记点大小颜色再次重绘import'leaflet/dist/leaflet.css'importLfrom'leaflet'import{
·2021-09-02 19:09

【VUE3】vue3.0项目配置

vue3+vite+TS+vue-router+vuex+less+组合式API+多语言vue-i18nvue3安装安装最新稳定版$npminstallvue@next用vite创建项目vite不需要单独安装npminitvite-appmy_projectcdmy_projectnpminstallnpmrundev//浏览器中打开localhost:3000，即可看到启动的项目TypeScri
大Q本Q·2021-09-02 11:43

vue3.0配置vue-i18n

项目安装vue-i18n需要安装最新版的vue-i18nnpminstallvue-i18n@next--save或者用yarnyarnaddvue-i18n@next--save安装完成之后，可以看一下package.json文件；看是否是最新版的vue-i18n，我安装的是9.1.7。在项目src文件夹中新建lang文件夹新建lang文件夹，在lang文件夹中新建三个js文件:zh-CN.js
·2021-09-01 10:03

❤❤全网最全-----VUE3.0最火爆的编辑器《TinyMCE》❤❤

《tinymce》一个非常适用于vue的编辑器、它在gitHub上的星星就要突破一万大关︿(￣︶￣)︿首先我们的技术选型是Vite2.0以上+Vue3.0使用的是JS来引入TinyMcetinymce的安装和使用
oil欧哟·2021-08-31 09:09

Vue3.0实现原生高度可自定义菜单组件vue3-menus

vue3-menusVue3.0自定义右键菜单Vue3.0原生实现完全自定义右键菜单组件,零依赖，可根据可视区域自动调节显示位置，可支持插槽完全重写每一项菜单在线演示完整菜单功能演示复制粘贴演示快速安装
·2021-08-29 20:44

element plus设置中文语言方法

前言在vue3.0使用elementplus的时候发现表格组件内的语言默认为英语，到官网看了一下，发现确实如此，按照官网的方法修改了一下发现有一种是没用效果，下面上有效的方法解决方法import{ElConfigProvider
oil欧哟·2021-08-28 16:53

揭开Vue3.0 setup函数的神秘面纱

在Vue3.0的使用中我们可以不使用data、props、methods、computed等Option函数，可以只下在setup函数中进行编写代码逻辑。
chonglingliu·2021-08-26 09:56

如何搭建一个完整的Vue3.0+ts的项目步骤

相信9月18日尤大大的关于Vue3.0的发表演讲大家一定有所关注,现在Vue3.0也已经进入RC阶段（最终产品的候选版本，如果没有问题则可发布成为正式版本）。
·2021-08-25 13:24

vue3报错：hrow er； // Unhandled ‘error‘ event；node_modules\vite\node_modules\esbuild\esbuild.exe ENOENT

1、启动vue3.0时报以下错误，则缺少esbuild.exe所致，所以我们需要在以下目录安装2、打开报错文件的目录，在cmd里输入node.
IT牛男_Edward·2021-08-24 11:05

vue3.0 Form表单中使用 ref 清空表单

1.需要在form中定义一个ref。2.在setup里面将定义好的ref设置为响应式数据。3.return中返回当前ref。4.在method中通过value取到当前ref。话不多少，直接上代码：重置setup(){constmanageRef=ref(null)conststate=reactive({listParam:{searchKey:"",mainFollower:""}})const
旧时日月明·2021-08-24 11:35

vue3.0+vant3.0快速搭建项目的实现

目录一、项目的搭建二、vue3体验+vant引入2020年09月18日，vue.js3.0正式发布，去网上看了看关于3.0的教程都不够完整，但其实vuecli最新版已经支持了vue3.0项目的快速搭建，
·2021-08-22 15:09

vue3.0第一部分：webpack的学习

第一部分：webpack的学习前端工程化的四个现代化模块化/组件化/规范化/自动化目前主流化的前端工程化解决方案1.webpack(www.webpackjs.com)2.parcel(zh.parceljs.org/)webpack是前端工程化的具体解决方案主要功能:前端模块化开发支持，代码压缩混淆，处理浏览器JS兼容性，性能优化等好处：让程序员把工作重心放到具体功能实现上，提高开发效率和项目可
土豆先生灬·2021-08-16 22:14

黑马最新前端项目【小兔鲜儿】！！！

项目采用前后端分离模式，前台使用了VUE3.0技术栈构建，自己封装的UI组件库，接入了QQ登录，支付宝支付业务，以及前端SKU解决方案，本地线上购物车解决方案。
我想去吃ya·2021-08-13 20:31

vue3+TypeScript+vite+ElementPlus项目创建及后续优化

vite-ts-elementplus--templatevue-ts初始化：项目初始化后默认无router和vuex，需npm安装：npmivue-router@nextvuex@next-S注意：vue3.0
向阳而生，静待余生·2021-08-13 10:11

记录下用vite创建vue3.0 + ts + element-plus项目

创建项目npminitvite@latestoryarncreatevite然后按步骤操作：1、项目名称2、选择框架3、选择语言，我选的是ts4、这就创建成功啦5、运行项目，进入你的项目所在的位置，运行以下命令cdvite-projectyarnyarndev用浏览器打开链接http://localhost:3000/项目运行成功了，是不是很简单，哈哈哈~~~安装element-plusnpmin
草莓_z·2021-08-12 15:44

h5页面(vue) 与jsBridge交互

框架:vue3.0混合开发需求:根据后台接口是否返回1401来刷新token,token刷新后重新调上一个接口封装jsBridgefunctionsetupWebViewJavascriptBridge
1994陈·2021-08-11 15:59

Vue0.11版本源码阅读系列一：实例化时做了什么

各位，你们没有看错，现在是2021年，vue3.0都已经出来很长一段时间了，而本系列将要带各位阅读的是0.11版本，也就是vue最早的正式版本，发布时间大概是六七年前，那时，嗯，太久远，都忘了我那时候在干什么
·2021-08-11 00:22

vue3.0+ts+Element集成的后台管理模板（全网最简洁,目前是持续更新中的）

2、对于新接触vue3.0的码友特别友好。3、拥有（现成）独立权限管理（动态路由）。4、可自定义主题功能，自定义国际化。5、常用的表格、图表、地图、图标等...。6、灵活、容易上手。千万别错过！
·2021-08-06 12:40

2、Vue3.x 项目工程环境搭建中遇到的问题记录

表单遇到ref响应式丢失了的问题image.png二、el-input等ref绑定dom使用1、dom设置ref.png2、声明ref.png3、使用.png4、setup中别忘记return.png三、Vue3.0
天策上将记录学习的地方·2021-08-06 08:51

Vue3和Electron实现桌面端应用详解

VueCLIPluginElectronBuilder优化功能启动全屏显示修改菜单栏编辑器打开markdonw文件的内容markdonw的内容存入文件打包为了方便记录一些个人随笔，我最近用Laravel和Vue3.0
·2021-08-03 15:20

vue3.0-ts-Element集成的后台管理模板（全网最简洁,并且最容易上手模板）

2、对于新接触vue3.0的码友特别友好。3、拥有（现成）独立权限管理（动态路由）。4、可自定义主题功能，自定义国际化。5、常用的表格、图表、地图、图标等...。6、灵活、容易上手。千万别错过！
·2021-08-03 12:41

vue3.0-ts-Element集成的后台管理模板（全网最简洁模板）

2、对于新接触vue3.0的码友特别友好。3、拥有（现成）独立权限管理（动态路由）。4、可自定义主题功能，自定义国际化。5、常用的表格、图表、地图、图标等...。6、灵活、容易上手。千万别错过！
·2021-07-29 18:04
上一页 29 30 31 32 33 34 35 36 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他