首次vue开发总结

项目很简单，就3个页面，第一个页面是一个list 点击进入另外一个对应的list，第3页是详情。

1.目录结构

自己写的代码放在src中
static文件中的js 可以在index中直接引入
src中
base 放一些基础组件 如 顶部条 滚动组件
common 放的是一些通用的方法 如 httprequest backPage
components 放的是组成页面的组件 如 列表页 详情页
我自己创建了一个config文件夹 用来存放 isNative ip 这种不同环境不同值的变量

2.结构 → 最终www包

App.vue 通过 main.js 替换掉了 index 的 id为app 的 div 具体貌似是webpack做的 不太清楚
在根目录下的config中的index里 修改打包编译后的 www根目录 和 index 的位置

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../../www/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../../www'),
    assetsSubDirectory: '',
    assetsPublicPath: '',

    /**
     * Source Maps
     */

    productionSourceMap: false,
    ........
    ........
  }

3.开发环境

公司的hybrid环境，需要在pageReady后，先登录用户，再做后面的操作。
封装 pageReady 就需要cordova.js 由于cordova本身是原生那边开发的 模块化内部有路径要求 所以没有敢往static里放
防止出现路径错误，直接在index中引入，打包之后将 cordova.js 和plugin文件夹 放入了根目录www里的js中。
之后由于是main.js 中 实例化的 el:app vue ， 所以在这之前进行autoLogin，promise完美解决。

4.路由配置

在 components文件夹中 创建3个页面的组件
在router文件夹中的index.js里配置
import 引入 写入routers里 就算注册了
在app.vue 中 引入 router-view 标签

路由跳转方法：

this.$router.push({
          path: '/errorInfo'
        })

路由返回方法：

this.$router.back(-1)

5.组件开发

5.1组件传值

开始以为vuex可以完全代替props，但其实这种理解是不对的，组件可以看做是一个函数，通过props传值相当于给函数传参，实现相同的组件展示的内容，甚至表达出的功能不同；比如scroll组件，可以有上拉刷新 下拉加载功能 也可以没有。
父传子 ：组件标签中 增加属性 v-bind:子组件内变量名字='父组件变量名字'
方法：@子组件中 emit('调用时候的方法名字')
父组件中：

子组件中：

props: {
      pullup: {
        type: Boolean,
        default: false
      }
},
methods: {
      this.$emit('pulldown')
}

5.2 $nextTick()

项目中有这样个地方：有一个类似进度条的东西，展示一个进度；进度条的长度 = 进度总长度*数据计算出来的系数；由于不同的视口宽度不同，那么进度总长度是要在dom渲染之后才知道的。
$nextTick()方法接收一个回调函数，在dom渲染后执行，此时获取进度总长度，然后修改一个变量，通过watch该变量，再次渲染页面，修改进度条长度。

6.Promise

getDataTest() {
        let obj = {
          page: this.pageNumber,
          flag: "process"
        }
        console.log('发送请求')
        let p = new Promise((resolve, reject) => {
          httpRequest(obj, 'smg', 0, (res) => {
            resolve()
            //console.log(this.dataArr)
          },  (err) => {
            reject()
            alert(err)
          })
        })
        return p

        //return httpRequestPromise(obj, 'smg', 0)
      },

1. new Promise 会直接执行Promise中的回到函数，所以封装在一个函数中 返回Promise 实例
2. then方法中的参数 是 resolve的参数 catch方法的参数 是reject的参数
3. 如果后面的then也要使用resolve的参数 需要在前一个then方法的回调里返回参数
4. then方法中的代码如果有异步代码 那么也会在同步代码执行后执行，如果想多个异步方法按顺序执行，需要封装多个Promosi实例

7.组件的生命周期

后续再补....

问题：
1.如何让axios返回promise 如何让httprequest是一个promise
axios本身就是封装好的Promise请求 axios()本身就是一个Promise实例 直接返回即可调用then()
2.axios post的信息 query string parameters 和 request payload区别是什么
axios post参数有2种方法:
param：{} 和 data： {}
param是把参数包含在url中 , 在headers中是 query string parameters
data 是把参数单独发送给后台，在headers中是 request payload

不足点：
scroll组件 下拉刷新 上拉加载 可以通过solt更完美
比较多的地方不符合开放封闭原则
页面没有做缓存，之前进去过的页面，再次进入，还是会加载。