65 lines
984 B
Markdown
65 lines
984 B
Markdown
# 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)
|
||
```
|