[TOC]
## 清理`HelloWorld.vue`
* 刪除`/src/components/Helloworld.vue`，替換`/public/favicon.ico`、`/src/assets/logo.png`
## 修改`main.js`
修改文件`/src/main.js`
```javascript
import {createApp} from 'vue'
import App from './App.vue'
const app = createApp(App)
app.mount('#app')
```
## 集成`vue-router`
* 安裝`vue-router`
```shell
$ yarn add vue-router@4
```
* 新建目錄`/src/router`
* 新建文件`/src/router/index.js`
```javascript
import {createRouter, createWebHashHistory} from "vue-router"
const router = createRouter({
history: createWebHashHistory(),
routes: []
})
export default router
```
* 在`/src/main.js`中引入路由
```javascript
...
import router from './router'
...
app.use(router)
...
```
## 集成`vuex`
* 安裝`vuex`
```shell
$ yarn add vuex@next
```
* 新建目錄`/src/store`
* 新建目錄`/src/store/modules`
* 新建文件`/src/store/modules/user.js`
```javascript
const user = {}
export default user
```
* 新建文件`/src/store/modules/permission.js`內容同上
* 新建文件`/src/store/modules/permission.js`內容同上
* 新建文件`/src/store/getters.js`
* 新建文件`/src/store/mutation-types.js`
* 新建文件`/src/store/index.js`
```javascript
import {createStore} from 'vuex'
import app from "./modules/app"
import user from "./modules/user"
import permission from "./modules/permission"
import getters from "./getters"
const store = createStore({
modules: {
app,
user,
permission
},
state: {},
mutations: {},
actions: {},
getters
})
export default store
```
* 在`/src/main.js`中引入`vuex`
```javascript
...
import store from './store'
...
app.use(router).use(store)
...
```
* 安裝`less less-loader'
```shell
$ yarn add less less-loader
```
