前言

此文档是我为公司写的前端框架开发手册（应该没人看，哈哈），这里删除公司敏感信息后，作为自己的总结文档记录一下。

准备工作：

1、安装npm

npm更换阿里镜像

npm config set registry https://registry.npm.taobao.org/ 

查看是否成功

npm config get registry

2、可选安装

cnpm（同npm，淘宝镜像速度快）、yarn（https://blog.csdn.net/csdn_yudong/article/details/82015885）

3、安装 vue-cli 工具：

安装命令npm install -g @vue/cli

4、参考文档

ant design vue ：http://vue.ant-design.cn/docs/vue/introduce-cn/
ant design vue pro ：https://pro.loacg.com/docs/getting-started

基础开发学习：

1、git项目拉取

2、安装项目

cnpm install 或者 npm install

3、启动项目

npm run serve
或者
yarn serve

注：相关命令存放于package.json

启动成功信息

4、文件解析

vue.config.js

本地开发需要在

vue.config.js

配置代理对象

router.config.js

路由用于菜单配置

注意：
（1）admin账户直接读取的是router.config.js路由配置，未和数据库做交互，为全权限。
（2）其他账户经过admin-service服务读取表sys_permission获取权限，其权限为部分权限，故添加新页面时必须要向该表添加对应数据，sys_permission.title = router.config.js.title，
sys_permission.name = router.config.js.permission，其他无要求。
（3）相关权限控制代码位于

views

视图——》业务逻辑开发位置
业务开发推荐目录结构（add和update其实可以复用，为了降低开发难度，才做此拆分）

（1）api.js

——》对外接口，主要用于发送请求
使用组件为 axios

（1）get请求写法

export function getAirportInfo (parameter) {
  return axios({
    url: '...',
    method: 'get',
    params: parameter // 此处为params
  })
}

（2）post请求写法

export function page (parameter) {
  return axios({
    url: '...',
    method: 'post',
    data: parameter // 此处为data
  })
}

（2）vue开发浅谈

1、引入组件（按需引用）

import { STable } from '@/components'

2、注册组件

3、数据定义

data () {
  return {...}
}

4、生命周期定义

mounted () {...}

拓展学习https://cn.vuejs.org/v2/guide/instance.html#生命周期图示
5、方法定义

methods: {...}

6、监听
多用于更新页面数据回显

watch: {...}

7、mock
——》模拟数据存放位置，脱离后端进行调试

问题与解惑

1、如何把父组件的值传到子组件

父组件中

子组件中

父组件直接传递即可

2、父组件调如何用子组件方法

如何取别名：ref=“model”

【this.$refs.{别名}】

这个的意思是获取对应vue的对象
this.$refs.{别名}.{方法}

3、子组件如何调用父组件方法

调用$emit方法，其中“o”为父组件中，子组件的方法

this.$emit(o)

4、列表属性

5、导入了组件，却发现使用不了

为了前端的渲染速度，我们采用的是按需引用

框架没有引用的，我们需要手动引用组件

（1）方式一：引用组件相关所有文件

// 折叠框，直接使用会报错，在此手动引用
import ACollapse from 'ant-design-vue/es/collapse/Collapse'
import ACollapsePanel from 'ant-design-vue/es/collapse/CollapsePanel'
import 'ant-design-vue/lib/collapse/style'

（2）方式二（推荐）

import { Button } from 'ant-design-vue';
Vue.use(Button);

6、如何进行权限控制（按钮级）

<span v-if="$auth('luggageOrder.luggageManualRefund')"></span>

注意：luggageOrder.luggageManualRefund与权限表的关联性（别忘了router.config.js路由哟）

拓展学习
https://pro.antdv.com/docs/authority-management

7、更新页面如何重置数据

在父页面Lsit，将data设置为空

8、新增页面如何重置数据

在新增页面，调用关闭方法时，重置form表单

this.$nextTick(() => {
  this.form.setFieldsValue({ ...formdata })
})

9、数据类型怎么定义

对象 - queryParam : {}
数组 - queryParam : []
字符串 - queryParam : ''

10、下拉框有数据，但是为空白，不显示

多半是下拉框数据类型不匹配，请检查number还是字符串

11、时间框的对象用什么

import moment from 'moment'

拓展学习
http://momentjs.cn/

12、列表字段实现toptip效果

ellipsis

13、使用watch监听时，第一次加载页面会报错。（20210220新增）

增加数据校验

        if (!n || !n.id) {
          return
        }

结语

为什么这个手册叫不完全开发手册呢？因为我也是一个前端小白，从来没有系统学习过vue，都是从0开始，撸起袖子就干了。以上内容都是从经验出发，希望大家少走弯路，快速开发，所以描述啥的可能会不准确，如果有错误，同学们可以直接改正，或者联系【黎晓东】。这里引用晓东大神的一句话：“虽然我们是后端开发，但是如果连一个后台管理系统的前端页面都写下不下来，真的说不过去”。

附录

ant design vue ：http://vue.ant-design.cn/docs/vue/introduce-cn/
ant design vue pro ：https://pro.loacg.com/docs/getting-started
vue：https://cn.vuejs.org/
moment：http://momentjs.cn/
axios：http://www.axios-js.com/