第一步构建项目

方式一： @vue/cli

1. 全局安装vue-cli: npm i @vue/cli -g npm i @vue/cli -g

2.创建项目： vue create 项目名称， 接着根据提示选择项目技术栈

vue create vue3-demo

方式二： vite

vite: vite是新的构建工具，具体以后再介绍。

1. npm init vite@latest 项目名称 npm init vite@latest vue3-demo

第二步配置路由

/route/index.js

const { createRouter, createWebHistory } from 'vue-router'
const routes = [
    {
        path: '/',
        redirect: '/index'
    },
    {
        path: '/index',
        name: 'home',
        component: () => import('../views/index.vue')
    },
    ...
]
const router = createRouter({
    history: createWebHistory(),
    routes
})
router.beforeEach((to, form, next) => {
    ...
})
export default router

注意：

1. 如果路由模式是hash，则需要将createWebHistory换成createWebHashHistory
2. 导入.vue组件不能省略后缀

main.js

const { createApp } from 'vue'
import App from './App.vue'
import router from './route'
const app = createApp(App)
app.use(router).mount('#app)