老项目需要升级到vue3吗?
发布网友
发布时间：2024-09-26 10:08
共1个回答
热心网友
时间：2024-11-14 04:52
还没用几天VUE，就到3了，本文旨在记录构建一个实用项目模板昂。
1、自然是将VUE-CLI升级到最新版本此备亏啦（卸载旧的，安装zhui新的）
npmuninstall-gvue-cli
npminstall-g@vue/cli
你要是想看看脚手架的版本，那敲这个
vue--version
2、构建你的项目吧
vuecreatemyproject
进入配置的时候问你愿不愿意，你打YES就好
还有就是，既然想要VUE3的，记得选VUE3就好
到了这儿，一个原始的项目就有啦。
3、在项目目录中，建一个名叫vue.config.js的文件，并且在这个文件里导出一个对象。至于这个对象里森神的选项和配的值，那就又可以写一篇了
4、配置路由（和子路由）
1）安装好路由插件???cnpmivue-router@next-D
2）在src目录下创建?router/index.js?
3）在根目录的main.js里面引入路由??importrouterfrom'./router'
4)??在Vue对象中加入router的配置
importVuefrom'vue'
importVueRouterfrom'vue-router'
importLoginfrom'../views/Login.vue'
Vue.use(VueRouter)
?constroutes=[
?{
??path:'/',
??redirect:'/login'
?},
?{
??path:'/login',
??name:'Login',
??component:Login
?},
?{
??path:'/',
??component:resolve=require(['../views/Index.vue'],resolve),
??redirect:'/home',
??children:[
???{
????path:'home',
????name:'home',
????component:resolve=require(['../views/home/Home.vue'],resolve),
????meta:{title:'首页'}
???},
???{
????path:'/programCard',
????name:'programCard',
????component:resolve=require(['../views/programCard/card.vue'],resolve),
????meta:{title:'路由1'}
???}
??]
?}
]
constrouter=newVueRouter({
?mode:'hash',
?base:process.env.BASE_URL,
?routes
})
exportdefaultrouter
5、安装VUEX并使用
1)安装vuex?cnpmi?vuex@next-D
2）在src目录下创建?store/index.js?
3）在根目录的main.js里面引入?importstorefrom'./store'
4)??在main.js里加入store的配置
6、配置axios
1)??安装vuex?滚辩cnpmi?axios@next-D
2)??在src目录建立api/request.js,并在其中引入axios????importaxios?from'axios'
在request.js中创建axios实例
添加请求*和响应*
再将实例导出export
3)在src目录建立api/index.js,引用axios实例，并统一定义请求函数
7、在src下建立views目录和路由子目录home/Home.vue
8、在assets目录增加css、iconfont、images、js目录，存放资源
9、根目录下建立static\global.js
定义常量constAPI_ROOT='127.0.0.1:8081'
建立对象window.global={
url:{
apiUrl:"http://"+API_ROOT+"/"
}
}
vue3成熟吗
截至2022年4月，VUE3可以说是相对成熟了，但没有VUE2.×成熟。
VUE2.×是一个比较稳定的版本，也是很长一段时间大家在使用的版本，社区生态已经十分完善了，所以，如果我们暂时还不必须去着急升级到VUE3，毕竟等待vue3的生态成熟，还需要一段时间的积累，但是作为前端领拍侍域必不可少的一门技能，当然希望能够提前去接触到，毕竟前端的技术迭代更新就是这么快。
Vue.js的主要特禅高点：
1、贺贺尺易用：
在有HTML，CSS，JavaScript的基础上，快速上手。
Vue.js的API是参考了AngularJS、KnockoutJS、Ractive.js、Rivets.js。
Vue.js的API的对于其他框架的参考不仅是参考，其中也包含了许多Vue.js的独特功能。
2、灵活：
简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。
3、性能：
20kbmin+gzip运行大小、超快虚拟?DOM?、最省心的优化。
以上内容参考：百度百科-Vue.js
项目中要不要用Vue3？目前阶段，Vue3已基本处于稳定，但差银是生态还不是特别完备，所以小项目可以尝试使用，但是之前的老项目不推荐使用虚渗宴Vue3进行重构。黑马程序员官网有成套免费视频哦，有什么不懂的可以直接过去学习。我的喊手回答你满意吗？满意就采纳吧
vue2停止维护会影响使用吗Vue2停止维护意味着不会再有新的功能或修复bug。虽然很多团队仍在使用Vue2，并且它仍然是一个非常稳定和可靠的框架，但是新的项目或新的功能可能会受到影响。对于现有项目，Vue2停手滚神止维护可能需要进行升级，以避免未来可能的问题。Vue3已经发布，它具有更多的新功能和改进，并且有助于解决Vue2中存在的一些性能问题，因此也毕亏可以将现有项目升级到Vue3。但是，升备含级会需要一些时间和资源进行测试和重构。总之，尽管Vue2停止维护不会立即影响您的使用，但可能需要采取相应的措施来保持应用的长期可维护性和可靠性。
vue2.0升级到vue3.0vue-cli3.0的项目目前已经有很多了，近期接触到的项目几乎都是3.0的版本，因此再用2.0就不再合适了。
勇于入坑，是对技术最大的尊重。
首先，我们需要卸载目前电脑上全局安装的vue版本，命令如下：
npmunistallvue-cli-g
npminstall-g@vue/cli
注意哦，如果电脑的npm版本过低，就需要重新安装一下：
npminstall-gnpm?
然后我们安装好了之后，就可以使用?npm-v?和?vue--version去查看版本好了，安装好了之后，我们可以新建一个vue项目
vuecreate项目名
例如：vueceatetbweb
安装的时候，选择这个进行安装就可以啦
然后我们再安装npminstall就可以了芹桐。
如果项目结构变成这样，说明你的项目已经建好了
进入这个项目文件夹，默认的启动项目的命令是：
npmrunserve
vue已经给我们新链世建了一个初始的项目结构，但是这个项目结构还不完善。我们需要新建一下几个目录。新建的目录都是新建在src目录下。
views用户存放我们的页面
store放置vuex程序
api放置所有的接口程序
utils放置工具函数（可有可无）
router放置路由信息
styles放置全棚首肢局样式（可有可无）
components这个已经有了，用来存放我们页面中的组件。我们可以直接把组件新建在components目录下，不过这样不太清晰，我喜欢在components目录下，再为每个页面新建一个文件夹，把每个页面的组件放在对应的文件下
assets这个也已经有了，用来存放我们的资源文件，视频、音频、图片等。
好啦，ok啦。大家快去尝试吧！
vue3.0的项目更加轻量级，正如官方介绍的那样，它更加请便简洁，多了一些人性化的设计。
具体的其它的步骤，推荐查看这篇文章：
vue3.0正式版来了Vuejs于2020年9月19日凌晨发布了代号为OnePiece的3.0版本。以下简称Vue3
跟着官网文档，我们一起来体验下新版的魅力。
Vue3官方文档地址：
首先是测试工具
谷歌插件（需要*）：
火狐插件：
electron桌面应用插件：
出于原型制作或学习目的，您可以将最新版本与以下灶启芦各项配合使用：
使用Vue构建大型应用程序时，建议使用NPM安装方法。它与Webpack或Rollup等模块*器很好地配旁伍对。Vue还提供了用于创作单一文件组件的随附工具。
ue提供隐带了一个官方CLI用于快速搭建单页应用。
对于Vue3，您应该使用VueCLIv4.5，该版本在上npm提供@vue/cli@next。要升级，您需要在@vue/cli全局范围内重新安装最新版本：
然后在Vue项目中运行
在dist/NPM软件包的目录中，您会找到许多不同的Vue.js版本。
全局安装脚手架
查看脚手架版本是否在4.5以上（含4.5）
创建项目
此时终端显示如下图
选择第二项Vue3Preview，等待安装完成。
到此，恭喜你迈入了Vue3.0的时代！
