为友谊
一、PC端开发（Vue + Webpack + ElementUi）
（一）常规PC端
1、Element-UI
2、引入公共css样式文件
参见：https://blog.csdn.net/liuxing393724034/article/details/80775065
3、打包发布：
参考: https://blog.csdn.net/qq_35393869/article/details/83090578
(二)、管理系统开发
2.1、AVUEX 管理系统模板：
2.11文件：AVUEX 内 vue-cli
2.12启动命令：npm run serve
2.2、renren-fast-vue 管理系统模板：
2.21文件：https://github.com/renrenio/renren-fast-vue
2.22操作方法：static\config内js文件 分别绑定后台接口后 登录页验证码功能可用，实现登录操作
二、移动端开发（VUE+webpack+MintUI/Mui 使用HBulider打包app）
（一）开发模式
1、MintUI （https://mint-ui.github.io/#!/zh-cn）
2、Mui（http://www.dcloud.io/hellomui/）
3、打包发布：
A: https://www.cnblogs.com/feng-xl/p/9183212.html
B: https://blog.csdn.net/wang1006008051/article/details/78065226
4、实现只有一级页面显示公共组件 footer
a、公共组件footer页面 定义 v-show=' true '
b、app.vue页面 加入公共组件<footer-bar v-show=' true '>
mounted(){ 监控路由 }
watch ：{ 监控路由 只有页面是一级页面时 显示 footer }
（二）VUE2.0 引入MUI 填坑之路
1、将mui.CSS && mui.JS引入到vue.cli中
参见：https://blog.csdn.net/guanhy594230/article/details/83240739
2、填坑步骤：
（三）生产模式（npm run build ）
1、HBulider运行dist文件
(生成dist文件，将dist文件用HBulider打开 链接安卓手机 真机测试)
2、本地运行dist文件
cd dist
npm install -g http-server hs（运行一次即可）
cd dist
npm run dev (就可以在本地运行dist文件)
3、运行 dist文件内 index.html文件 （if 控制台报错 执行下面操作）
参见：https://blog.csdn.net/xinlingdexueba/article/details/82753430
4、真机测试（操作步骤见：简书 HBulider 打包VUE app）
4.1（安卓打包测试）
（1）准备工具：
PC端：HBulider 360手机助手
移动端：安卓手机360手机助手
（2）操作HBulider进行真机演示
HBulider 中新建APP项目 将dist文件中static文件&&index.Html文件直接！！！拖拽！！！到新建项目中（！！！不是复制粘贴！！！）
4.2（ios证书/秘钥设置&打包）
！！！ 快速申请ios打包ipa证书.p12和.mobileprovision（无需Mac）
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
案例：1（模仿抖音上下滑动切换视频）
1、实例1
2、实例2
案例：2（elementUI table 插入图片）
******************* 页面数据初始化 ********* start ！！******
！当页面挂载完成后 执行请求服务器函数 将数据显示到页面 ！
（通常可以在页面created 时候执行函数）
******************* 页面数据初始化 ************* end ！！************
***** 简单理解Vue中的nextTick ** 异步执行 **
***** vue-router params和query的区别 ******
1、vue-router params和query的区别 - 简书
2、Vue Router 的params和query传参的使用和区别（详尽） - mf_717714的博客 - CSDN博客
***** 执行 add（添加） / del (删除) 操作后 刷新当前页 *****
1、执行操作后刷新当前页 ---
[ lg: get / add / del 列表操作 后执行局部刷新以便于页面显示最新数据，同时可以在执行完操作后重新执行获取列表操作(this.getList()即可得到最新数据 ) ] *** 见图 ***
************** VUEX **************
（1）state数据初始化
（2）mutations 中存储方法 用于修改state中的值 通过 $store.commit 同步修改mutations中的值
（3）getters 相当于计算属性 当state值改变的时候 会触发getters方法 来获取state最新的值
（4）actions 相当于异步操作 通过$store.dispatch 异步触发actions中的方法 从而触发mutations中相同的方法去修改state中的值
* ** 常 用 ** state && mutations（mutations中用于存放方法，来修改state中的值）
* ** 不常用 ** getters && actions (可以省略)
