vue开发-从源码开始解读一个智慧园区项目
High level
和之前阅读python项目源码顺序一样
- 首先了解整体功能和大致结构
- 然后试图跑通项目
- 拆解逐步了解
- 组装之后进行改变和迭代
本次我了解的是一个智慧园区的vue项目。但其实我开始看这个项目之前的前端基础为0，今天白天看了一下相关视频，昨天看了几个vue加flask，也没有js等基础。以下可能很多错误
Roadmap
首先入口是最外面的index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>天垂智慧</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
可以看到，其主要代码位于/src/main.js
然后就是src里，外部文件一个是main.js，一个是APP.vue
main.js主要是定义了一个app实例
import App from './App.vue'
const app = createApp(App)
所以，其实落在了APP.vue中
<template>
<router-view />
</template>
<script setup></script>
然后就发现所有页面是通过route的方式组织在一起。
route和昨天刚刚入门的Flask的路由route应该是同样含义。
vue-routers是vue全家桶中的一个组件。在package.json中定义了其版本
"vue-router": "^4.1.5",
其好处
- 让页面中的部分内容可以无刷新的跳转
- 可以实现某些需要根据特定逻辑改变页面原本路由的需求
所以进入routes文件夹找到其中的index.js。虽然不能完全看懂，但起基本定义了整个页面的逻辑
// import operationRouter from './operation'
import { createRouter, createWebHashHistory } from 'vue-router'
// 引入物业管理相关的路由页面
import propertyRouter from './property'
//引入数据可视页面相关路由
import visualizationRouter from './visualization'
//引入配置中心页面相关路由
import configurationRouter from './configuration'
const manageroutes = [
{
path: '/',
redirect: '/home'
},
{
path: '/index',
name: '/index',
component: () => import('../layout/index.vue'),
redirect: '/home',
children: [
{
path: '/home',
name: 'home',
component: () => import('../views/home/home.vue'),
},
{
path: '/operation',
name: 'operation',
redirect: '/over',
component: () => import('../views/operation/operation.vue'),
children:[
//文章管理
{
path: '/article',
component: () => import('../views/operation/content/article.vue')
},
{
path: '/comment',
component: () => import('../views/operation/content/comment.vue')
},
]
},
]
},
]
// 哈希路由
const router = createRouter({
// 路由模式
history: createWebHashHistory(),
routes: manageroutes,
})
/**
- 输出对象
*/
export default router;
routers文件夹中其他js文件定义了该页面相关路由。也就是整体逻辑其实是定义在这里的
那么，之后，我们再继续从细节页面中看。components文件夹定义了一些通用设计，导航栏中其他页面则有自己单独的页面位于views文件夹中
components
- Echart百度开源的可视化
- commonForm表单
- header 头部信息，其中定义了click之后的跳转
- pypaganition 表格换页？
- operationTable 表格？
views
- configuration导航中的配置中心
- home 主页 -> 生产综合
- operation 运营页-> 智慧应用
- visualiation 可视化
其中的子目录vue文件都位于views以上的子文件夹中
vue有个好处是，这个过程，我可以边修改边看效果。这方面比AI舒服多了，基本就像玩机械一样，调一调，注释一下，可以直接看到效果
继续下一步。例如智慧应用的文件，还是从外层开始
// 页面左侧菜单数据
export default{
name:"operation",
setup(){
const menuData = reactive([
{
id: 2,
authName: "预测性维护",
children: [
{ id: 201, authName: "异常检测", path: "/article" },
{ id: 202, authName: "故障诊断", path: "/comment" },
],
},
{
id: 3,
authName: "视觉应用",
children: [
{ id: 301, authName: "合同签订管理", path: "/contract" },
{ id: 302, authName: "客户信息管理", path: "/information" },
],
},
]);
const iconList = reactive([
"Reading",
"Briefcase",
"Avatar",
"OfficeBuilding",
"DocumentCopy"
]);
return{
menuData,
iconList
}
}
}
const handleOpen = (key: string, keyPath: string[]) => {
console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
console.log(key, keyPath)
}
</script>
其中，定义了path，也就是跳转之后的页面，但奇怪一点是不知道为啥中间隔着的一层目录，不知道在哪设置能让程序直接找过去。应该是route文件夹里那些设置
修改
首先，根据我的计划，在预测性维护一页里，我需要前面一个图，下面一个表单。就从可视化那里看看搞一个图。从views里的可视化开始找
<el-menu-item index="AttractionAnalysis">
<template #title>
<el-icon><WarnTriangleFilled /></el-icon>
<span>园区招商分析</span>
</template>
</el-menu-item>
从中可以看出，园区招商分析位于AttractionAnalysis,画图的仍位于script
import * as echarts from 'echarts'
export default{
mounted(){
let myChart1=echarts.init(this.$refs.myChart1)
let dataC1 = [250, 300, 160, 420, 550, 300,120,650,340,500];
let xData = ['1月', '2月','3月','4月','5月','6月','7月','8月','9月','10月',];
var fontColor = '#30eee9';
let a= {
backgroundColor: 'rgba(1,2,34,0)',
grid: {
left: '10%',
right: '6%',
top: '10%',
bottom: '20%',
},
legend: {
data: ['a'],
textStyle: {
color: '#A9DDEE',
},
orient: 'horizontal',
icon: 'rect',
top: '5',
right: '5%',
itemGap: 10,
itemWidth: 10,
itemHeight: 7,
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
lineStyle: {
color: '#57617B',
},
},
},
xAxis: {
type: 'category',
boundaryGap: false, //顶头显示
axisLine: {
show: true,
lineStyle: {
color: '#3585d5',
},
},
axisTick: {
show: false,
// alignWithLabel: true,
lineStyle: {
color: '#3585d5',
},
},
axisLabel: {
fontSize: 10,
},
data: xData,
},
yAxis: {
name: '%',
type: 'value',
axisLine: {
show: true,
lineStyle: {
color: '#3585d5',
},
},
splitLine: {
show: false,
lineStyle: {
type: 'dotted',
color: '#3585d5',
},
},
axisTick: {
show: false,
},
axisLabel: {
fontSize: 10,
},
boundaryGap: false,
},
series: [
{
name: '项目',
type: 'line',
stack: '总量',
smooth: true,
symbol: 'none',
showSymbol: true,
symbolSize: 40,
itemStyle: {
normal: {
color: '#71bd27',
lineStyle: {
color: '#71bd27',
width: 3,
},
areaStyle: {
//color: '#94C9EC'
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0.4,
color: 'rgba(240, 250, 230,0.1)',
},
{
offset: 1,
color: 'rgba(240, 250, 230,0.9)',
},
]),
},
},
},
data: dataC1,
},
],
};
myChart1.setOption(a)
以上部分移植到预测性维护里，但由于看不懂源码，乱往里加，总是出错，先加一点点
export default {
// lx
mounted(){
let myChart1=echarts.init(this.$refs.myChart1)
let dataC1 = [250, 300, 160, 420, 550, 300,120,650,340,500];
},
也就是这里的mount，好像视频都没看到过mount还。加上去了代码，但是却没有显示画图。发现出了template和script外，还要增加一下style里定义显示大小
#myChart1{
width: 100%;
height: 160px;
}
然后就出现了很丑的画面
