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

　　本篇文章专门写给刚刚想要学习 vue3.x 的同学，大神请绕行。
　　现在越来越多的公司和程序员选择了 vue ，差不多80%的项目都是使用 vue 进行开发的。vue团队也在不断地改进框架，API做得非常好用。Vue3 发布主要目标：下一代web开发方式，更快，更轻，易维护，更多的原生支持(来自官网)。
　　这篇文章，主要介绍如何创建 Vue3.0 项目，实例化以及路由配置。对比 Vue2 快速学习，让你快速上手 Vue3。一、Vue3+Vite 创建项目
　　1.1、在你的H盘内，创建 learn_vite 文件夹。
　　1.2、打开命令工具，输入 H: ，回车进入 H盘内。
　　1.3、输入：cd learn_vue3，回车进入learn_vue3文件夹内。
　　1.4、使用 npm 命令：npm init vite
　　1.5、输入项目名称 test。
　　1.6、选择创建一个 vue 的项目。
　　1.7、项目创建完成之后，根据命令提示，进入项目，安装依赖，就可以启动项目了。
　　二、实例化的改变
　　vue 2实例化 main.js代码：import Vue from ＂vue＂; import App from ＂./App.vue＂;  Vue.config.productionTip = false; new Vue({   render: h => h(App) }).$mount(＂#app＂);
　　vue 3实例化 main.js代码：import { createApp } from ＂vue＂ import App from ＂./App.vue＂  const app = createApp(App) app.mount(＂#app＂)
　　正如你现在看到的，Vue2和Vue3实例化完全不一样。Vue2使用的是Vue对象来创建一个Vue实例，对Vue对象的任何更改都有可能会影响到每一个Vue实例和组件。但是对于Vue3，使用的是 createApp来定义某个Vue应用程序的范围，使代码更容易理解，这样就不容易受到第三方插件的干扰。三、Vue3 如何使用路由
　　能看懂该文章的，也不需要我介绍为啥使用路由了，废话不多说，我们直接看如何使用？
　　3.1、安装 vue-routernpm install vue-router
　　3.2、创建router文件夹，新建 index.jsimport { createRouter , createWebHistory  } from ＂vue-router＂ const routerHistory = createWebHistory()  import Home from ＂../view/home/index.vue＂ // 2. 定义一些路由 // 每个路由都需要映射到一个组件。 const routes = [  {   path: ＂/＂,   name: ＂Home＂,   component: Home,  },  ] const router = createRouter({   history: routerHistory,   routes }) //导出路由 export default router
　　然而 vue2 的路由配置import Vue from ＂vue＂; import VueRouter from ＂vue-router＂;  Vue.use(VueRouter); import Home from ＂../view/home/index.vue＂ const routes = [  {   path: ＂/＂,   name: ＂Home＂,   component: Home,  }, ]; const router = new VueRouter({   mode: ＂history＂,   base: process.env.BASE_URL,   routes }); export default router;
　　之所以给你放置一个 vue2 的路由配置文件是为了加深你的理解和记忆。
　　3.3、在main.js中引入路由import { createApp } from ＂vue＂ import App from ＂./App.vue＂ import router from ＂./router＂  const app = createApp(App) app.use(router) app.mount(＂#app＂)
　　3.4、在App.vue文件中加入
　　这一步不添加的话，我们看不见页面被加载出来。
　　3.5、路由模式import { createRouter , createWebHistory , createWebHashHistory } from ＂vue-router＂  createWebHistory //history模式 createWebHashHistory // hash模式  const router = createRouter({   history: createWebHashHistory(),//模式设置   routes,   linkActiveClass:＂active-class＂,//自定义当前导航菜单类名   linkExactActiveClass:＂init-class＂ })
　　除了这些基本配置之外，还有路由全局守卫、路由独享守卫、组件内守卫与之前都是一样的没有区别。四、fragment 根
　　之前的 vue2 中，组件只有一个根元素，令人兴奋的在 vue3 中补充了 Fragment 。也就是 vue3 中组件可以拥有多个根，它看起来就像一个普通的 DOM ，但是它是虚拟的 DOM ，根本不会在 dom 树中呈现。
　　写组件的时候，再也不用给外层包一层p
　　在 vue2 中，如果你敢这么写，会立即报错，但是vue3可以这么写。