vue开发-零基础从源码开始解读一个智慧园区项目

High level

和之前阅读python项目源码顺序一样

• 首先了解整体功能和大致结构
• 然后试图跑通项目
• 拆解逐步了解
• 组装之后进行改变和迭代

本次我了解的是一个智慧园区的vue项目。但其实我开始看这个项目之前的前端基础为0，今天白天看了一下相关视频，昨天看了几个vue加flask，也没有js等基础。以下可能很多错误

整体功能

智慧车间管理平台

• 生产综合 views/home
• 智慧应用 views/operation/overview/operationall.vue
  • 异常检测 views/operation/maintain/maintenance.vue
  • 预测性维护 views/operation/maintain/outlier.vue
  • 人员安全 views/operation/vision/alert.vue

Roadmap

首先入口是最外面的index.html

  
    
    
    
    
  
  
    

    
  

1
2
3
4
5
6
7
8
9
10
11
12
13

可以看到，其主要代码位于/src/main.js
然后就是src里，外部文件一个是main.js，一个是APP.vue

main.js主要是定义了一个app实例

import App from './App.vue'
const app = createApp(App)
1
2

所以，其实落在了APP.vue中

1
2
3
4
5

然后就发现所有页面是通过route的方式组织在一起。
route和昨天刚刚入门的Flask的路由route应该是同样含义。
vue-routers是vue全家桶中的一个组件。在package.json中定义了其版本

"vue-router": "^4.1.5",
1

其好处

• 让页面中的部分内容可以无刷新的跳转
• 可以实现某些需要根据特定逻辑改变页面原本路由的需求

所以进入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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

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)
}


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

其中，定义了path，也就是跳转之后的页面，但奇怪一点是不知道为啥中间隔着的一层目录，不知道在哪设置能让程序直接找过去。应该是route文件夹里那些设置

修改

首先，根据我的计划，在预测性维护一页里，我需要前面一个图，下面一个表单。就从可视化那里看看搞一个图。从views里的可视化开始找

            
          
1
2
3
4
5
6

从中可以看出，园区招商分析位于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)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124

以上部分移植到预测性维护里，但由于看不懂源码，乱往里加，总是出错，先加一点点

export default {
  // lx
mounted(){
  let myChart1=echarts.init(this.$refs.myChart1)
  let dataC1 = [250, 300, 160, 420, 550, 300,120,650,340,500];

},

1
2
3
4
5
6
7
8

也就是这里的mount，好像视频都没看到过mount还。加上去了代码，但是却没有显示画图。发现出了template和script外，还要增加一下style里定义显示大小

#myChart1{
          width: 100%;
          height: 160px;
   }
1
2
3
4

然后就出现了很丑的画面

调整宽度占比

.top-left-box {
  display: flex;
  flex-direction: column;
  width: 70%;
}
.top10box {
  margin-left: 10px;
  width: 30%;
  /* height: 50%; */
}
1
2
3
4
5
6
7
8
9
10

左边就是topleft width,右边就是top10 width, 调整百分比

继续从细节开始熟悉代码

刚才熟悉了整体结构，那就从单页面开始。这一步结合vue官方文档进行学习。每个页面结构
template类似html的功能
scripts类似js功能
style类似css功能

• mounted() 这个函数就会在组件挂载完成后被调用

template

• div 全称DIVision，即为划分，大概理解为划分？