截止昨天，咱们已经基本掌握了利用vue框架创建一个前端项目的能力，那么今天就开始实际应用于项目中，这里咱们就开发一个简单的sre管理平台系统的前端部分，后面再进行后端api的开发，最后实现一个前后端交互的管理系统demo。从简单开始，一步一步完成，相信到后期就能开发更多复杂项目。
此项目系统的前端开发，用到的技术栈如下，都是比较成熟的技术。
Vue3 webpack5 elementplus js
先直接上一个简单完成后的系统页面：
主控制面板
k8s资源面板
错误面板
因为我们用的路由模式是history，而不是hash模式，所以错误页面需要单独配置，当然这种模式兼容性比较好，对于这块知识我们后期再说。
一个简单的后台管理系统前端页面差不多就是这个样子，感兴趣的朋友后期就可以跟着我接着开发，一直到比较完善的时候，我会开源至我的仓库，大家可以直接拿来练习。
下面再接着昨天的讲：
昨天已经创建了一个模板vue项目，就是example项目，首先我们先来看看文件里有那些文件。
在我们开始项目之前，先把利用vue框架创建的项目里面的那些文件有那些常用，干啥的，得弄明白，这样才能更加理解项目的框架，以后对于项目的熟悉程度更高，提升自己的开发效率。
代码语言：javascript复制|-- node_modules // 依赖包
|-- public // 静态资源
| |-- favicon.ico // 网站图标
| |-- index.html // 入口html文件
|-- src // 主要代码
| |-- assets // 静态资源
| |-- components // 组件
| |-- router // 路由配置
| |-- store // Vuex状态管理
| |-- views // 页面视图
| |-- App.vue // 根组件
| |-- main.js // 入口js文件
|-- .gitignore // Git忽略文件列表
|-- babel.config.js // Babel配置文件
|-- package.json // 依赖包版本信息
|-- README.md // 说明文档
|-- vue.config.js // VueCLI配置文件node_modules：存储项目所需的依赖包。
public：存储静态资源，如图片、样式表等。其中index.html是入口文件。
src：主要代码目录，包含了项目的各种逻辑部分。
assets：存放静态资源，如图片、字体等。
components：存放可复用的组件，如按钮、弹窗等。
router：存放路由相关配置，如定义路由、跳转等。
store：存放Vuex状态管理相关代码，如定义state、mutations、actions等。
views：存放页面视图相关代码。
App.vue：根组件，包含了整个项目的框架和结构。
main.js：入口文件，初始化Vue实例并挂载到DOM上。
.gitignore：Git版本控制忽略文件列表。
babel.config.js：Babel配置文件。
package.json：依赖包版本信息。
README.md：说明文档。
vue.config.js：VueCLI配置文件，用于配置webpack等相关插件。上面这是一个模板项目中一般会存在的常用的文件结构，等大家熟悉之后，一定会明白各个文件的作用。
Vuerouter
一看单词就是vue的路由管理，路由的功能大家都知道，根据地址找到对应的服务，那么vue中的组件那么多，怎么找，就得靠router管理。可以在单页的应用中实现组件切换、页面跳转，不需要重新加载页面。
这里一开始我们还是先编写路由，因为你得根据不同功能编写不同的组件，每个组件展示总得有个路径，可以先规划一下自己的功能路径，我们这里就主要先弄两个功能，因为刚开始，一个就是主面板、然后另一个就是404面板，一般就是根据功能路径找到对应页面，没找到的统统弄个404。
Vue中编写路由要使用到vue router这个插件，如果使用vuecli默认生成项目是不带路由管理这个功能的，需要自己单独安装：
代码语言：javascript复制npm install vue-router然后创建路由实例，index.js内容：
代码语言：javascript复制import { createRouter, createWebHistory }
from 'vue-router'
import HomeView from
'../views/HomeView.vue'
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */
'../views/AboutView.vue')
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router然后再main.js中挂载路由
代码语言：javascript复制import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
createApp(App).use(store).use(router).mount('#app')这实现什么功能了呢，就是/路径对应的是首页页面，/about对应的就是关于的页面。
而我们需要更改的就是根路径下的主页面，这个主页面作为整个页面的框架，创建一个layout或者home的vue组件作为父组件，其他页面作为组件即可。
然后接下来咱们就简单实现一个控制面板和一个404页面即可，由于代码较长就不在这里粘贴了。
后面再接着讲解如何实现控制面板的页面和404的页面，感兴趣的朋友可以关注下。
END
