一、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   ** 异步执行 **  

1、 vue.nexttick异步执行

2、简单理解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 (可以省略)