前端vue介绍

路由

参考：src/router/index.js
https://router.vuejs.org/zh/api/

axios 请求

参考src/utils/request
对请求进行简单封装，axios/index.ts
import axios, { AxiosRequestConfig, AxiosResponse } from ‘axios’

axios.defaults.baseURL = ‘http://localhost:3001/'

axios.interceptors.request.use((config:AxiosRequestConfig) => {
return config;
})

axios.interceptors.response.use((response:AxiosResponse) => {
if(response.data.err == 1){
return Promise.reject(response.data.data);
}
return response.data.data;
},err => {
return Promise.reject(err);
})

export default axios

模版封装

参考components
创建模版组建import 进来，然后使用-代替大写引入即可

Vue常用语法

1.结构
name: 'IceFill' // vue名称
components: {MyStore}, // 模版
filters 过滤器
{{item.deleteStatus | toStateChinese}}
2.数据绑定
v-text=“” 只能绑定纯文本
v-html：可以识别msg文本中的DOM标签。
v-bind可以绑定属性,可以直接简写为冒号‘:’。下面例子将title属性绑定在mytitle上
<input type="button" value="按钮" v-bind:title="mytitle" >
v-model=“” 表单元素value 不可直接{{}}获取，需在vue初始化设置一下
v-model永远指向表单元素的value值，
注意除v-model外绑定变量前面要加: 如：:disabled="isDetail" 
3.事件绑定
v-on:click=“” 或者 @click＝“”
4.循环
v-for=“item in list” 循环 item循环到的数组值
v-for=“(item,key) in list” key循环到的下标index
5.逻辑判断
v-if 布尔值 为false 代表节点消失（有更高的渲染开销）
-if 与 v-else-if v-else 可以构成判断（必须要连着一块写）
v-if和v-show的区别
7.样式
v-bind:style=“{ color: activeColor, fontSize: fontSize + ‘px’ }”
8.类名设置
v-bind:class=“{‘class-a’:isa,‘class-b’:isb}”
！important:能够覆盖样式原本的权重，增加指定的样式的权重
9.路由使用
https://router.vuejs.org/zh/api/
this.$router.push('/add-snow')
10.模版导入
import { getUserLineInfo, getUserInfo } from '@/api/user'
11.生命周期
beforeCreate
created
beforeMount
Mounted
beforeUpdate
Updated
beforeDestroy
destroyed
方法
methods、computed、data、watch、props
其他常用方法
数据合并
Object.assign（a，b）
异步安全
new Promise((resolve, reject) => {})
Json
JSON.parse、JSON.stringify
异步：async、await
事件传递
this.$emit('clickRow', row)


## 页面开发流程
1.在src/views下面创建页面文件
如src/views/ice-fault/ice-fault.vue
包括html、js、css三个部分，可以参考其他页面，或者复制其它页面进行删减
2.在路由中引入页面
src/router/index.js
  {
    path: '/ice-fault',
    name: 'IceFault',
    component: () => import('@/views/ice-fault/ice-fault.vue'),
    meta: {
      title: '冰害故障管理'
    }
  },
在入口除采用router跳转到页面中
3.编写页面布局
页面所使用的组建全部在element-ui官网中
框架样式修改，在chrome中打开调试工具，找到ui组建样式的class，然后根据情况自定义
4.编写业务逻辑
js部分数据写在data中、方法在methods中、比较常规
5.网络请求
在src/api下面建页面请求接口
如：src/api/ice/fault/index.js
import request from 'utils/request'
// 新增冰害故障
export function iceFaultAdd(data) {
  return request({
    url: `/icetroubledamage/record`,
    method: 'post',
    data
  })
}
import进入页面
import {
  iceFaultDelete,
  iceFaultSearch,
} from 'api/ice-fault'
6.组建引入
a)import
import BarChart from '@/components/charts/ice-fault/barChart.vue'
b)components
 components: {
    BarChart,
  },
c)使用
<bar-chart :chart-data="areaArrCount" :count="areaArrCount.total" @bar-detail="openChartDetail"> </bar-chart>
传值在组建的props中定义