项目搭建
这一章主要介绍前端项目搭建，为了够easy我们不打算用ts，项目脚手架使用最近的vite脚手架搭建
这里不具体介绍：传送 开始 | Vite 官方中文文档 (vitejs.cn)
我们在磁盘上创建一个项目文件夹easy-pm 使用vite初始化一个叫easy-pm-web的项目
当前项目看起来这个样子的
安装依赖
接下来我们安装一些依赖 开发依赖
pnpm add pug less -D
项目依赖
pnpm add @arco-design/web-vue vue-router axios lucide-vue-next dayjs -S
// lucide-vue-next: 是一个开源的icon项目
项目初始化
项目目录下新增 .editorconfig
[*.{js,jsx,ts,tsx,vue,json}]
indent_style = tab
indent_size = 4
trim_trailing_whitespace = true
insert_final_newline = true
个人喜欢使用webstorm,配置较少，使用tab缩进
修改vite.config.js
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import {resolve} from 'node:path'
// https://vitejs.dev/config/
export default defineConfig(({mode}) => {
return {
base: "/",
plugins: [
vue({
script: {
defineModel: true, // 开启自定义双向绑定宏
}
}),
],
resolve: {
alias: {
"@": resolve(__dirname, "src"),
}
}
}
})
项目目录easy-pm-web下新增几个目录
|--easy-pm-web
|--*package
|--src
|--*api
|--*layout //布局
|--login.layout.vue //登录布局
|--user.layout.vue //用户布局
|--*router
|--app-routes.js //路由自动收集文件
|--index.js //路由配置
|--*store //模块数据，不打算用pinia
|--*views //模块页面
|--assets
|--components //项目组件
|--App.vue
|--main.js
|--*store.js //全局数据
路由设计
我们先看看app-routes.js做了什么
//app-routes.js路由自动收集
const appRoutes = []
const modules = import.meta.glob('@/views/*.rt.js', {eager: true})
Object.values(modules).forEach((value) => {
appRoutes.push(value.default)
})
export default appRoutes
使用了import.meta.glob 去收集views目录下*.rt.js后缀的文件，我们约定这这样格式的文件为路由文件
同时在views目录下建立两个文件dashboard.rt.js,dashboard.vue, 这是我们的项目的仪表盘页面或者是欢迎页面
//dashboard.rt.js
export default {
path: '/dashboard',
component: () => import('./dashboard.vue'),
meta: {
locale: 'dashboard',
icon: 'Monitor',
order: 0,
},
}
<script setup>
</script>
<template lang="pug">
.dashboard dashboard
</template>
<style scoped lang="less">
.dashboard {
}
</style>
这是我们被收集的第一个路由页面，我们再来看一下路由配置router/index.js，我们把根路由/分配给了user-layout.vue，收集到的用户功能路由都作此路由的子路由
<template lang="pug">
router-view
</template>
<script setup>
</script>
<style lang="less" scoped>
.user-layout {
width: 100vw;
height: 100vh;
}
</style>
import {createRouter, createWebHistory} from 'vue-router'
import apps from './app-routes' //收集的功能页面路由
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: '/',
component: () => import('@/layout/user-layout.vue'),
children: [
{
path: '',
redirect: '/dashboard'
},
...apps
]
}
],
scrollBehavior() {
return {top: 0};
},
});
export default router;
初步的路由设计完成接下来，需要配置项目入口main.js， 改造一下app.vue
import ArcoVue from '@arco-design/web-vue'
import '@arco-design/web-vue/dist/arco.css'
import router from './router'
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
const app = createApp(App)
app.use(ArcoVue)
.use(router)
.mount('#app')
//app.vue
<script setup>
</script>
<template lang="pug">
a-button(type="primary") hello
router-view
</template>
<style>
::-webkit-scrollbar {
z-index: 50;
width: 5px;
height: 5px;
background-color: rgba(0,0,0,0);
}
::-webkit-scrollbar-track {
background-color: rgba(0, 0, 0, 0);
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
background-color: #b5b1b1;
}
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: #333333;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
height: 100vh;
width: 100vw;
margin: 0;
padding: 0;
overflow: hidden;
}
#app {
height: 100vh;
width: 100vw;
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 12px;
overflow: hidden;
}
</style>
全局引用了组件库挂载路由, 运行一下看起来是这样的
到此为止我们初始化了前端项目，下一章我们看看服务端项目的初始化
