安装Vite:
yarn global add create-vite-app@1.18.0
创建项目:
cva 项目名
安装vue-router:
yarn add vue-router@4.0.0-beta.3
初始化vue-router:
import {createWebHashHistory,createRouter} from 'vue-router'
新建history对象:
const history = createWebHashHistory()
新建router对象:
const router = createRouter({ history:history, routes:[ {path:'/',component:HelloWorld} ] })
引用ts:
将main.js
改成main.ts
(index.html
里的也要的修改一下喔)
在src下添加shims-vue.d.ts
用于让ts识别.vue文件:
declare module '*.vue'{
import {ComponentOptions} from 'vue'
const componentOptions:ComponentOptions
export default componentOptions
}
挂载到app上:
const app = createApp(App)
app.use(router)
app.mount('#app')
在App.vue里添加<router-view/>
:
<template>
<router-view />
</template>
<script>
export default {
name: "App",
};
</script>