---
# System prepended metadata

title: Vue3 + Vite
tags: [Vite, Vue]

---

###### tags: `Vue` `Vite`
# Vue3 + Vite

```shell
$ npm init vite@latest project-name -- --template vue
$ cd project-name
$ yarn install
$ vue add vuex
$ yarn add vue-router
$ yarn add @vue/cli-plugin-router -D
```

新增 src/router/index.js
```javascript=
import { createRouter, createWebHistory } from 'vue-router'
// import Home from '../views/Home.vue'

const routes = [
  // {
  //   path: '/',
  //   name: 'Home',
  //   component: Home
  // },
  // }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router
```

修改 src/main.js, 加上 router 的部份
```javascript=
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
import router from './router'

createApp(App).use(store).use(router).mount('#app')
```

完成後
```shell
$ yarn dev
```

啟動開發 server
