# web

Vblog 前端项目

## 清理模版代码

- 清理组件
- 清理样式
- 清理js文件

## 添加登录页面

- LoginPage.vue

```vue
<template>
  <div>登录页面</div>
</template>

<script setup></script>

<style lang="css" scoped></style>
```

- 添加路有

```js
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/login',
      name: 'login',
      component: () => import('../views/common/LoginPage.vue'),
    },
  ],
})
```

- App组件，添加路由视图入口

```vue
<script setup></script>

<template>
  <RouterView></RouterView>
</template>

<style scoped></style>
```

## 安装UI插件

https://gitee.com/infraboard/go-course/blob/master/day20/vue3-ui.md

```js
// 加载UI组件
import ArcoVue from '@arco-design/web-vue'
import '@arco-design/web-vue/dist/arco.css'
// 额外引入图标库
import ArcoVueIcon from '@arco-design/web-vue/es/icon'
app.use(ArcoVue)
app.use(ArcoVueIcon)
```