Get Started With Vue3

创建项目

bash

vue create my-project-name

安装路由

安装组件

bash

npm install vue-router@4

配置路由规则、路由模式

main.ts

typescript

import { createRouter, createWebHistory } from 'vue-router'
import Home from './components/Home.vue'

// 配置路由规则
const routes = [
    { path: '/', component: Home },
]
// 创建router，使用HTML5 history模式，并且基路径'base'
const router = createRouter({
    history: createWebHistory('base'),
    routes: routes
})
// 使用router
createApp(App).use(router).mount('#app')

设置路由视图

App.vue

typescript

<template>
  <!-- 路由视图 -->
  <router-view></router-view>
</template>

<script lang="ts">
import { Vue } from 'vue-class-component'

export default class App extends Vue {}
</script>