vue3初始-创建和配置路由vue-cli3

首先，下载vue3

1. 首先需要安装vue-cli 或者将vue-cli升级到4.3.1
2. 命令行 在Windows下输入npm install -g @vue/cli 注意如果你的电脑是Mac 那么需要输入的命令行为
   sudo npm install -g @vue/cli，否则会提示没有权限， 接下来会让你输入电脑密码，输入成功后开始安装
3. 安装成功后可以看到此时的vue-cli脚手架的版本已经是4.5.7

4. 输入命令行vue create demo_cli4 新建项目
5. 此时会有两个选项，我们选择第二个自定义项目，回车可以看到有很多选项需要选择，通过上下箭头和空格选中需要的，一般来说选中下面这些就可以了
   
6. 接下来会选择ESLint配置，这里选择标准配置

7. 接下来选择lint提示方式，这里选择保存时

8. 然后选择配置文件保存在哪里，当然是在package.json文件里
   
   下载vue-router,一定要注意版本！

npminstall vue-router@/next --save

打开项目里的router文件夹下的index.js文件，发现vue 3.0
的路由是通过引入的createRouter来创建Vue Router实例，配置方法基本与2.0相似
一切准备就绪，让我们开始使用Vue Router！

简而言之，Vue Router的Vue3版本的主要区别在于我们必须导入新方法才能使代码正常工作。其中最重要的是createRouter 和createWebHistory。

在我们的 router/index.js 文件中，让我们导入这两个方法以及前面的两个视图。
接下来，我们要做的是使用createWebHistory方法创建一个routerHistory对象。
在此之前，我们可以只输入 mode: history 来从哈希模式切换到 history 模式，但是现在我们使用 history: createWebHistory() 来实现这一点。

接下来，我们实际上可以使用 createRouter 创建路由器，它接受一个对象，我们希望传递 routerHistory 变量以及两个路由的数组。
最后，让我们将路由导出。

import{ createRouter, createWebHistory}from'vue-router'const routes=[{
    path:'/',
    name:'index',
    component:()=>import('../App.vue'),
    children:[{
        path:'home',
        name:'Home',
        component:()=>import('../views/home.vue')}]}]const routerHistory=createWebHistory()const router=createRouter({
  history: routerHistory,
  routes})exportdefault router

在main.js里面直接引入了路由

import{ createApp}from'vue'import Appfrom'./App.vue'import routerfrom'./router'createApp(App).use(router).mount('#app')

在APP.VUE写入

<router-view/>

成功啦