分类：Vue3.0

2022
04-30

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

vue3.0+vant3.0快速搭建项目的实现 目录一、项目的搭建二、vue3体验+vant引入2020年09月18日，vue.js3.0正式发布，去网上看了看关于3.0的教程都不够完整，但其实vuecli最新版已经支持了vue3.0项目的快速搭建，这篇文章将带你了解一下vue3.0有哪些新的改变以及如何快速搭建vue3.0项目。一、项目的搭建1.首先，nodejs的安装不用我多说了吧，nodejs官网地址。2.既然vuecli最新版已经可以快速搭建3.0了，那怎么升级到最新版呢？vue-cli官网地址，不知道vue-cli版本的执... 继续阅读 >
2021
11-16

Vue3.0 自己实现放大镜效果案例讲解

Vue3.0 自己实现放大镜效果案例讲解 需要实现的效果是:固定放大两倍,鼠标进入到左侧图片区域的时候,遮罩层显示,离开时,遮罩层隐藏。 css中的cursorhttps://www.runoob.com/cssref/pr-class-cursor.html 鼠标跟随效果如何实现:(子绝父相)绝对定位+ 修改top,left控制移动 在@vueuse中，有一个工具方法：useMouseInElement<template><divref="target"><h1>Helloworld</h1></div></template><script>import{ref}from'vue'import... 继续阅读 >
2021
11-09

Vue3.0 手写放大镜效果

Vue3.0 手写放大镜效果 需要实现的效果是:固定放大两倍,鼠标进入到左侧图片区域的时候,遮罩层显示,离开时,遮罩层隐藏。 css中的cursor 鼠标跟随效果如何实现:(子绝父相)绝对定位+ 修改top,left控制移动 在@vueuse中，有一个工具方法：useMouseInElement<template><divref="target"><h1>Helloworld</h1></div></template><script>import{ref}from'vue'import{useMouseInElement}from'@vueuse/core'export... 继续阅读 >
2021
09-24

vue3.0+vite2实现动态异步组件懒加载

目录创建一个vite项目创建组件创建一个vite项目性能决定成败;vite确实快；cmd命令行(默认你已经安装了node&npm)，执行npminit@vitejs/appvue-study?--templatevue；cd至vue-study，npminstall(安装依赖);npmrundev（启动项目）；创建组件新建一个目录为pages，pages下面再新建一个目录contents，contens下面可以新建具体的组件目录页面，此时目录结构为App.vue<template><p@click="onChangeContents('./pages/conte... 继续阅读 >
2021
09-18

vite+vue3.0+ts+element-plus快速搭建项目的实现

vite+vue3.0+ts+element-plus快速搭建项目的实现 目录vite作用使用的环境搭建项目配置vite.config.tstsconfig.jsonApp.vueViewsroutermain.tsvite出了2.x版本，抱着学一学的心态决定出个简单的项目，结合element-plus，以及将会成为每位前端必会的typescript，实现了如下内容。vite是一个由原生ESM驱动的Web开发构建工具。在开发环境下基于浏览器原生ESimports开发，在生产环境下基于Rollup打包。vite作用快速的冷启动：不需要等待打包操作；即时的热模块... 继续阅读 >
2021
03-05

vue3.0 项目搭建和使用流程

最近在重构一个老项目，领导要求使用新的技术栈。好吧，是时候秀一波我新学的vue3.0了。不多bb，开始我的表演。。。(以下只是我自己个人的理解和使用习惯，仅供参考哦）一：项目搭建1.可以自己配置vite，但是为了节省时间，我就使用脚手架直接搭建。(有兴趣可以研究一下vite，还是很香的)2.项目生成：iTerm下：vuecreatemyproject之后根据自己的要求选择不同的配置选择我们需要的3.x之后按照要求配置一下router，已经pack.jso... 继续阅读 >
2021
03-05

vue3.0中使用element的完整步骤

前言：      在vue3.0中使用element框架，因为element是支持vue2.0的，他推出的支持vue3.0的版本叫 element-plus官网入口：点我进入一、个人遇到的问题与解决办法：遇到的问题：我直接用cnpm i element-plus -S装的版本，不知道为啥，一直报错图1，版本型号图2，我的代码中使用图3解决办法：我把package.json中的element-plus的版本更换成  下面这句话，解决... 继续阅读 >
2021
02-23

详解Vue3.0 + TypeScript + Vite初体验

详解Vue3.0 + TypeScript + Vite初体验 项目创建npm:$npminitvite-app<project-name>$cd<project-name>$npminstall$npmrundevoryarn:$yarncreatevite-app<project-name>$cd<project-name>$yarn$yarndev项目结构main.js在个人想法上，我觉得createApp()是vue应用的实例，createApp支持链式调用App.vue：这是兼容vue2.0的语法，下面是vue3.0rfc写法（还处于实验性阶段）。rfc官方说明setupdatasetup是结合了vue2.0的created生命周期函数和data还有me... 继续阅读 >
2021
02-21

vue3.0 自适应不同分辨率电脑的操作

首先我们需要要安装一些依赖npmilib-flexible-computer-S//根节点会根据页面视口变化而变化font-size大小npmipx2rem-loader-D//自动将px转换为remnpmipostcss-px2rem//将代码中px自动转化成对应的rem的一个插件这里要和大家说的就是lib-flexible-computer这个npm装的依赖，想必大家为了做pc的适配搜索了很多方法他们大多数都是安装的下面这个依赖npmilib-flexible-S安装这个依赖，做适配的话只能做到屏幕540一下的，pc... 继续阅读 >
2020
12-27

vue3.0自定义指令（drectives)知识点总结

在大多数情况下，你都可以操作数据来修改视图，或者反之。但是还是避免不了偶尔要操作原生DOM，这时候，你就能用到自定义指令。举个例子，你想让页面的文本框自动聚焦，在没有学习自定义指令的时候，我们可能会这么做。constapp=Vue.createApp({mounted(){this.$refs.input.focus();},template:`<inputtype="text"ref="input"/>`,});在mounted钩子函数里，通过$refs获取需要聚焦的DOM元素，然后调用focus方法... 继续阅读 >
2020
12-02

vue3.0中setup使用(两种用法)

一、setup函数的特性以及作用可以确定的是Vue3.0是兼容Vue2.x版本的也就是说我们再日常工作中可以在Vue3中使用Vue2.x的相关语法但是当你真正开始使用Vue3写项目时你会发现他比Vue2.x方便的多Vue3的一大特性函数----setup1、setup函数是处于生命周期函数beforeCreate和Created两个钩子函数之间的函数也就说在setup函数中是无法使用data和methods中的数据和方法的2、setup函数是Com... 继续阅读 >
2020
12-02

vue3.0+vue-router+element-plus初实践

vue3.0+vue-router+element-plus初实践 Vue3中文文档Vue3.0对比Vue2.x优势框架内部做了大量的性能优化，包括：虚拟dom，编译模板，Proxy的新数据监听，更小的打包文件等。新增的组合式API（即CompositionAPI），更适合大型项目的编写方式。对TypeScript支持更好，去掉this操作，更强大的类型推导。初始化项目安装@vue/clinpminstall@vue/cli-g或yarnglobaladd@vue/cli创建项目vuecreate项目名可以选择Vue3的配置进行项目初始化初始化完成后，安装vue-r... 继续阅读 >
2020
10-30

vue3.0搭配.net core实现文件上传组件

在开发Web应用程序中，文件上传是经常用到的一个功能。在Jquery时代，做上传功能，一般找jQuery插件就够了，很少有人去探究上传文件插件到底是怎么做的。简单列一下我们要做的技术点和功能点使用技术客户端使用vue.js3.0，并使用vue3新增的功能:CompositionAPI,服务器使用asp.netcore功能点标签美化文件预览文件上传服务器接收文件文件选择美化在标准的html文件选择标签，是十分不美观的。大概就是下图的样子但是我... 继续阅读 >
2020
10-28

详解vue3.0 的 Composition API 的一种使用方法

网上讨论的文章已经很多了，这里举一个简单的例子来讨论一下CompositionAPI的用法，具体问题才好具体讨论嘛。假如我们要做一个论坛的讨论列表和分页，以前是把需要的数据都放在data里面，事件都放在methods里面，代码少的话还好分辨，如果代码多了，看着就头疼了。现在vue3.0可以按照业务关系分成多个管理类来管理这些代码。比如帖子列表+发帖功能，我们先做一个模板：（简单表示一下，不做美化处理了）<template><div>论坛... 继续阅读 >
2020
10-28

vue3.0 的 Composition API 的使用示例

网上讨论的文章已经很多了，这里举一个简单的例子来讨论一下CompositionAPI的用法，具体问题才好具体讨论嘛。假如我们要做一个论坛的讨论列表和分页，以前是把需要的数据都放在data里面，事件都放在methods里面，代码少的话还好分辨，如果代码多了，看着就头疼了。现在vue3.0可以按照业务关系分成多个管理类来管理这些代码。比如帖子列表+发帖功能，我们先做一个模板：（简单表示一下，不做美化处理了）<template><div>论坛... 继续阅读 >
2020
10-18

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

如何搭建一个完整的Vue3.0+ts的项目步骤 相信9月18日尤大大的关于Vue3.0的发表演讲大家一定有所关注,现在Vue3.0也已经进入RC阶段（最终产品的候选版本，如果没有问题则可发布成为正式版本）。所以Vue3.0的学习是我们必然的趋势，今天，主要分享一下Vue3.0的详细搭建过程，希望可以为初入Vue3的小伙伴有所帮助。我们现在开始进入今天的主题啦~~一、安装1.安装nodejs此处提供nodejs下载地址：https://nodejs.org/zh-cn/download/大家根据自己电脑的配置选择适配的LTS（... 继续阅读 >