Vue2.0项目重构到Vue3.0流程

news2024/9/29 17:28:48

1.重构的流程

        1-1新建项目,确定脚手架版本

                首先呢,我们新建项目有两种方法

                第一种:vue-cli : 安装并执行 npm init vue@latest                        

                               选择项目功能时: 除了第一项的项目名字外,其他可以暂时No

                                cd 到自己项目路径里边

                                npm install下载依赖

                                npm run dev :运行项目

                                npm run build: 打包 (生成一个dist文件夹)

                第二种:vite: 使用vite 体验更快速                           

                                npm init vite-app 创建项目(项目名字比如:app,demo什么的)

                                cd 到app项目里边

                                npm install 下载依赖

                                npm run dev 运行项目

                注意:本人非常推荐这次重构项目的时候用第一种创建vue3.0项目的方法,因为第二种创建项目的方法在后续重构的过程中出现的错误比第一种的多,而且出现的错误也非常刁钻,所以这次重构项目不建议使用第二种创建方法。

        1-2重构路由axios,element-plus,sass,sass-loader等项目所需的依赖

                安装路由:npm i axios

                安装vue3.0的elementui:npm install element-plus --save

                安装sass,sass-loader:npm i node-sass@6 sass-loader@10 sass -D 

        1-3迁移登录菜单文件,保证登录功能正常运行

                到这步我们就需要在vite.config.js中配置跨域,来请求数据,显示登录页面的具体效果,只要你配置跨域没问题,你vue2.0项目中的登录文件复制到vue3.0中登录页面是可以正常显示出来的,包括里面的用户正则验证,密码正则验证都能通过。

        1-4处理组件中,下拉列表的问题

                zai在vue2.0项目中submenu是连着写的,在vue3.0项目中需要在b和m之间加一个-就能解决不出现下拉列表的问题。

        1-5逐个页面迁移组件中的属性

                我们需要把vue2.0项目的文件都给迁移到vue3.0项目中,在这里会出现页面不显示的情况,首先需要去路由里面修改路由配置,再去各个页面中看看语法有没有错误的,有错误的给修改一下,页面就能正常显示。

2.步骤中的bug以及解决方式

        1.步骤

                把vue2.0项目的路由复制到vue3.0中会报错,因为两个版本的路由语法是不兼容的。

        2.bug的描述

                两个版本的路由不兼容

        3.解决方案

                

根据如图所示复制过来以后把路由改成vue3.0的写法就可以了。

总结:以上就是本博主Vue2.0项目重构到Vue3.0具体流程,感谢您的观看。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/349051.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

安装SQL Server2017 过程中报KB29119355失败的解决方案

SQLServer 2017脱机版下载地址:http://download.microsoft.com/download/6/4/A/64A05A0F-AB28-4583-BD7F-139D0495E473/SQLServer2017-x64-CHS-Dev.isoMicrosoft SQL Server Management Studio 18管理工具下载https://learn.microsoft.com/zh-cn/sql/ssms/download-…

公民自动化开发平台(CADP)列入Gartner《2022-2024 中型企业技术采用路线图》

近日,全球知名咨询公司 Gartner 发布《2022-2024 中型企业技术采用路线图》(获取方式见文末)。该路线图汇集了全球 400 多家中型企业技术领导者的集体智慧,共囊括 53 项技术,涉及多个核心基础设施领域。其中包括计算和…

Wi-Fi 7全新升级,小米蓄势待发!

目前,Wi-Fi 已经成为人们最常用的无线连接技术。随着智能化时代的发展,终端设备对 Wi-Fi 技术的速率、延迟和稳定性等都提出了更高的要求。此前,电气和电子工程师协会 IEEE 发布了 802.11be 草案,Wi-Fi联盟将其命名为 Wi-Fi 7。小…

labelme脚本使用报错:TypeError: ‘NoneType‘ object is not subscriptable

今天好不容易终于把标注做完了,花了我两天时间,终于做到最后用脚本将json文件转成png图片,结果出现了以下报错。 Traceback (most recent call last):File "E:/pythonconda3/Deeplabv3_plus/datasets/Json2Image.py", line 8, in …

虚拟环境的创建以及labelme的使用教程

本来打算是将这两部分分开的,但写完虚拟环境的创建似乎字数太少了,不过二者有关联,所以就放一起了。简单介绍一下,虚拟环境的创建有win11系统已经Ubuntu系统,labelme教程包括了下载及其使用的全部流程,以及…

MySQL参数优化之innodb_buffer_pool_size

innodb_buffer_pool我们俗称缓冲池, 缓冲池简单来说就是一块内存区域,通过内存的速度来弥补磁盘速度较慢对数据库性能的影响。 写入时,先将数据写入缓冲池种,再定期刷新到磁盘;读取时,将读到的页放到缓冲池…

RPC与HTTP的区别与联系(二)

目录 1.远程调用方式 2.认识RPC 3.认识Http 4.RPC与HTTP选择 5.深入分析 1.远程调用方式 无论是微服务还是分布式服务(都是SOA,都是面向服务编程),都面临着服务间的远程调用。那么服务间的远程调用方式有哪些呢?…

【PR】时间轴窗口

【PR】时间轴窗口时间轴窗口工具按钮—视频轨道切换轨道输出切换同步锁定目标切换轨道锁定轨道对插入和覆盖进行源修补工具按钮—音频轨道静音轨道独奏轨道画外音录制时间轴窗口基础操作添加轨道查看完成视频和音频缩放轨道删除轨道添加关键帧使用软件:Premiere2020…

前端学习第一阶段——第五章 CSS(上)

5-1 CSS基本选择器 01-CSS层叠样式表导读 02-CSS简介 03-体验CSS语法规范 04-CSS代码风格 05-CSS选择器的作用 06-标签选择器 07-类选择器 08-使用类选择器画盒子 09-类选择器特殊使用-多类名 10-id选择器 11-通配符选择器 5-2 CSS样式 12-font-family设置字体系列 13-font-s…

Linux的sysstat(sar)的详细使用

文章目录安装使用内存和存储器页面换入换出统计信息I/O和传输速率统计信息块设备的活动统计信息网络统计信息队列长度和负载平均值统计信息内存利用率统计信息CPU利用率统计信息安装 yum install -y sysstat使用 内存和存储器页面换入换出统计信息 sar -B -f /var/log/sa/sa…

(考研湖科大教书匠计算机网络)第四章网络层-第六节1:路由选择协议概述

获取pdf:密码7281专栏目录首页:【专栏必读】考研湖科大教书匠计算机网络笔记导航 文章目录一:路由选择概述二:因特网采用的路由选择协议(1)特点(2)常见的路由选择协议三:…

CocoaPods使用指南

前言 对于大多数软件开发团队来说,依赖管理工具必不可少,它能针对开源和私有依赖进行安装与管理,从而提升开发效率,降低维护成本。针对不同的语言与平台,其依赖管理工具也各有不同,例如 npm 管理 Javascri…

【LeetCode】剑指 Offer 06. 从尾到头打印链表 p58 -- Java Version

题目链接: https://leetcode.cn/problems/cong-wei-dao-tou-da-yin-lian-biao-lcof/ 1. 题目介绍(06. 从尾到头打印链表) 输入一个链表的头节点,从尾到头反过来返回每个节点的值(用数组返回)。 【测试用例…

信息系统基本知识1

文章目录导论信息信息的定义:信息的特征信息分类系统定义:系统的组成:两种基本模式系统的特征信息系统定义信息系统的概念用户角度系统角度技术角度企业管理角度管理信息系统广义理解狭义理解信息系统工程定义信息系统的结构信息系统的功能信息系统的分类IS中人的作…

【并发编程】【3】Java线程 创建线程与线程运行

并发编程 3.Java线程 本章内容 创建和运行线程 查看线程 线程 API 线程状态 3.1 创建和运行线程 方法一,直接使用 Thread // 创建线程对象 Thread t new Thread() {public void run() {// 要执行的任务} }; // 启动线程 t.start();例如: // 构…

程序员必备的软技能-金字塔原理拆解

前言 日常工作中,常常因为思维、表达方式不对产生不想要的结果: 写了一个小时的周报,领导却不满意?跟团队讲了半天自己的想法,可别人就是没理解?看了很多知识、信息,却一点也没记住&#xff1…

【分享】如何通过集简云将ChatGPT人工智能接入到您的抖音中?

ChatGPT是一款非常强大的人工智能产品,可以有创造性的回复和创作文字,图片,适用于很多办公场景。这篇文章将介绍如何将ChatGPT接入到我们的抖音中。 在集简云中的ChatGPT应用 目前集简云提供了两个ChatGPT应用: OpenAI(ChatGPT)…

OpenCV实战(11)——形态学变换详解

OpenCV实战(11)——形态学变换详解0. 前言1. 腐蚀和膨胀运算1.1 腐蚀和膨胀基础1.2 使用形态学滤波器执行图像腐蚀和膨胀运算2. 开运算和闭运算2.1 使用形态学滤波器执行图像开运算和闭运算3. 形态学变换应用3.1 使用形态学滤波器检测边缘3.2 使用形态学…

跨平台应用开发进阶(五十五):uni-app 实现内容分享

文章目录一、前言二、系统分享组件三、uniShare SDK调用四、拓展阅读一、前言 APP开发过程中,需要实现分享功能。 常用的分享实现方法包括: 系统分享组件;uniShare SDK调用; 二、系统分享组件 uni.shareWithSystem(OBJECT)调…

jvisualvm安装Visual GC插件以及连接远程应用监控jvm【杭州多测师_王sir】【杭州多测师】...

一)jvisualvm工具安装Visual GC插件 1、在本地jdk安装路径找到jvisualvm.exe双击打开 2、选择工具-插件-勾选visual GC 如果显示重试,先点击设置-编辑-选择你本地对应的JDK版本的URL:https://visualvm.github.io/pluginscenters.html 3、点击远程-添加远…