极速上手VUE3项目搭建以及配置

　　本篇文章专门写给刚刚想要学习vue3。x的同学，大神请绕行。
　　现在越来越多的公司和程序员选择了vue，差不多80的项目都是使用vue进行开发的。vue团队也在不断地改进框架，API做得非常好用。Vue3发布主要目标：下一代web开发方式，更快，更轻，易维护，更多的原生支持（来自官网）。
　　这篇文章，主要介绍如何创建Vue3。0项目，实例化以及路由配置。对比Vue2快速学习，让你快速上手Vue3。一、Vue3Vite创建项目
　　1。1、在你的H盘内，创建learnvite文件夹。
　　1。2、打开命令工具，输入H：，回车进入H盘内。
　　1。3、输入：cdlearnvue3，回车进入learnvue3文件夹内。
　　1。4、使用npm命令：npminitvite
　　1。5、输入项目名称test。
　　1。6、选择创建一个vue的项目。
　　1。7、项目创建完成之后，根据命令提示，进入项目，安装依赖，就可以启动项目了。
　　二、实例化的改变
　　vue2实例化main。js代码：importVimportAppfrom。App。Vue。config。productionTnewVue（｛render：hh（App）｝）。mount（app）；
　　vue3实例化main。js代码：import｛createApp｝fromvueimportAppfrom。App。vueconstappcreateApp（App）app。mount（app）
　　正如你现在看到的，Vue2和Vue3实例化完全不一样。Vue2使用的是Vue对象来创建一个Vue实例，对Vue对象的任何更改都有可能会影响到每一个Vue实例和组件。但是对于Vue3，使用的是createApp来定义某个Vue应用程序的范围，使代码更容易理解，这样就不容易受到第三方插件的干扰。三、Vue3如何使用路由
　　能看懂该文章的，也不需要我介绍为啥使用路由了，废话不多说，我们直接看如何使用？
　　3。1、安装vuerouternpminstallvuerouter
　　3。2、创建router文件夹，新建index。jsimport｛createRouter，createWebHistory｝fromvuerouterconstrouterHistorycreateWebHistory（）importHomefrom。。viewhomeindex。vue2。定义一些路由每个路由都需要映射到一个组件。constroutes〔｛path：，name：Home，component：Home，｝，〕constroutercreateRouter（｛history：routerHistory，routes｝）导出路由exportdefaultrouter
　　然而vue2的路由配置importVimportVueRVue。use（VueRouter）；importHomefrom。。viewhomeindex。vueconstroutes〔｛path：，name：Home，component：Home，｝，〕；constrouternewVueRouter（｛mode：history，base：process。env。BASEURL，routes｝）；
　　之所以给你放置一个vue2的路由配置文件是为了加深你的理解和记忆。
　　3。3、在main。js中引入路由import｛createApp｝fromvueimportAppfrom。App。vueimportrouterfrom。routerconstappcreateApp（App）app。use（router）app。mount（app）
　　3。4、在App。vue文件中加入routerview
　　这一步不添加的话，我们看不见页面被加载出来。
　　3。5、路由模式import｛createRouter，createWebHistory，createWebHashHistory｝fromvueroutercreateWebHistoryhistory模式createWebHashHistoryhash模式constroutercreateRouter（｛history：createWebHashHistory（），模式设置routes，linkActiveClass：activeclass，自定义当前导航菜单类名linkExactActiveClass：initclass｝）
　　除了这些基本配置之外，还有路由全局守卫、路由独享守卫、组件内守卫与之前都是一样的没有区别。四、fragment根
　　之前的vue2中，组件只有一个根元素，令人兴奋的在vue3中补充了Fragment。也就是vue3中组件可以拥有多个根，它看起来就像一个普通的DOM，但是它是虚拟的DOM，根本不会在dom树中呈现。
　　写组件的时候，再也不用给外层包一层ptemplatehelloworldtemplate
　　在vue2中，如果你敢这么写，会立即报错，但是vue3可以这么写。