一.开发环境

安装nodejs、webpack，按网上教程即可

二.vue-cli初始化项目

拉取git已建好的项目名，在本地使用vue-cli初始化项目，按网上教程即可

三.css处理方式（scss）

使用scss方式处理css，首先安装scss：执行 npm install node-sass sass-loader --save-dev

在vue的style标签中加入lang="scss"即可，如下：

<style lang="scss">
$background-color: rgb(223, 19, 19);
$margintop:120px;
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  background-color: $background-color;
  margin-top: $margintop;
}
</style>

四.http组件（axios）

经过筛选比较，在现有三种http组件中（vue-resource、axios、ajax），我们选择vue作者推荐的axios组件。

执行：npm install axios --save

在main.js中写如下代码：引入axios和把axios设为vue原型方便全局调用。

import axios from 'axios'
Vue.prototype.$axios = axios

接口调用的是公司测试库，所以把axios的baseURL设置为公司的ip端口，请求头和响应时间也一并设置好，写在main.js中：

axios.defaults.baseURL = 'http://192.168.**.***:8090'
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
axios.defaults.timeout = 6000 // 响应时间

这样在自己的vue页面中就可以调用了：

created () {
  this.$axios.post('/login/login.do', params).then((res) => {
    console.log(res, '请求成功')
  }, (err) => {
    console.log(err, '请求失败')
  })
}

但是，这样全写在main.js文件中很不优雅，而且很多axios选项还没有设置，所以我来把有关axios的代码封装起来，可以更好地复用。

首先在src目录下新建一个service文件夹用于存放请求数据的相关文件，constant用于存放常量，axiosconfig用于初始化axios配置和拦截器，axios用于发送http请求。

代码如下：

// constant.js
export default {
  slyUrl () {
    if (process.environment === 'dev') {
      return 'http://192.168.12.**:8090'
    } else {
      return 'http://192.168.12.**:8090'// 'http://192.168.12.**:9090/***/api/'
    }
  },
  getPage () {
    return {
      page: 1,
      limit: 10
    }
  }
}

 

// axiosconfig.js
import axios from 'axios'
import constant from '@/service/constant'

axios.defaults.baseURL = constant.slyUrl()
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
axios.defaults.timeout = 60000 // 响应时间
// Vue.prototype.$axios = axios

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  console.log('拦截请求', config)
  // 在发送请求之前做些什么
  return config
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error)
})

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error)
})

// export default axios
export {axios}

// axios.js
import {axios} from '@/service/axiosconfig'

export default {
  common (url, params, type) {
    return new Promise((resolve, reject) => {
      axios({
        method: type,
        url: url,
        data: params
      }).then(response => {
        resolve(response.data)
      }).catch(error => {
        reject(error)
      })
    })
  },
  post (url, params) {
    return this.common(url, params, 'post')
  }
}

 有了以上代码，在自己的vue文件中，就可以引入axios.js后直接调用请求了，例如：

<script>
import axios from '@/service/axios'
export default {
  name: 'ProductDetail',
  data () {
    return {
    }
  },
  created () {
    axios.post('/login/login.do', params).then((res) => {
      console.log(res, '请求成功')
    }, (err) => {
      console.log(err, '请求失败')
    })
  }
}
</script>

五.UI组件（mint-ui）

有了http请求组件，我们再引入UI组件来完善项目，我选择使用mint-ui，虽然官方文档很坑，但效果可以，轻量化。

安装mint-ui：执行npm install mint-ui --save

在项目中引入：在main.js中写如下代码（我选择引入全部组件）

import Mint from 'mint-ui'
import 'mint-ui/lib/style.css'

Vue.use(Mint)

在自己的vue文件中即可调用mint-ui的效果了：

this.$toast('请求成功')// 必须带上this.$不然没效果

注意：mint-ui中只有MessageBox、Toast、Indicator这三个组件是在js代码中调用的，所以可以this.$方式全局调用，其余全是html自定义标签形式调用。

六.引入Vuex解决组件间通信

vuex搭配computed和watch实现数据监听。（注意：对象中有多个子对象，只有子对象变化时监听会不起作用，暂无解决办法，网上那个'deep: true'的方法对监听vuex变化不起作用，所以，最好用computed和watch监听很简单的vuex数据变化） 。代码如下：

computed: { // 监听vuex参数变化
  getpopselcompany () {
    return store.getters.popSelCompany
  }
},
watch: {
  getpopselcompany: {
    handler () {
      if (store.getters.popSelCompany === true) {
        this.popSelCompany = true
      } else {
        this.popSelCompany = false
      }
    }
  }
}

期间遇到this在method的方法中作用域和指向问题：当想要在axios请求之后异步调用method中的另一个方法，就需要使用this.$options.methods.myFunction()方式。不存在异步时，可以直接this.myFunction()调用即可。代码如下：

methods: {
  delete () {
    this.params = {
      companyId: '1234'
    }
    axios.post(axios.delete_url, this.params).then((res) => {
      this.$options.methods.myFunction() // 必须这么写
    }, (err) => {
      this.$messagebox('提示', '删除失败:' + err)
    })
  },
  myFunction () {
    dosomething...
  }
}

七.移动端查询条件扩展项最佳实现方案（父子页面传参）

如果遇到需要对查询条件进行扩展，例如：A页面点击一个按钮，页面跳到B页面，在B页面选择完条件后，需要把条件带到A页面进行查询。这个需求有很多解决方法：

1、使用路由跳转，通过广播emit方式带回参数；

2、使用路由跳转，通过vuex传参；

3、使用路由跳转，通过sessionstorege保存参数，返回A页时触发create钩子赋值；

4、可以把B页和A页做在同一个vue页面里，B页做成组件引入，参数通过vuex控制。

这四个方法各有优缺点，这几天我踩了很多坑。

方案1是不推荐的，vue由于自身特性，emit会有很多问题，比如兄弟平级组件是无法通信的，当引入this.$bus.on()插件解决兄弟组件通信后，又产生了触发多次问题，需要使用this.$bus.off()来销毁监听。很多情况无法胜任，该方案被pass掉了。

方案2和方案3都是挺好的方案，但是由于监听vuex子对象无效问题，方案2不如方案3，所以方案3是在不需要记录滚轮位置提高人机交互时的最佳方案。

方案4是人机交互比较好的解决方案。需求：在B页面点击“返回”按钮需要记住上一页面的状态（滚动条距离、跳转前所处的tab页等）方便返回时提升交互效果，“确定”按钮需要带回参数重新请求页面。如图：

由于有这个需求在，所以我选择使用4号方案来完成，这个方案优点是可以记住A页面的状态，提高人机交互性，这点使用路由跳转很不好实现；但弊端也显而易见，需要用很多中间变量来管理页面是否显示，增加了代码量。注意：vuex监听参数改变不能深度监听子对象，当参数只有深层子对象发生改变时，监听无效。

最后说一句，父页面向子页面传参时，使用vue自带的props方式是最简洁的，vuex、sessionstorege都是子页面向父页面传参使用的。

八.keep-alive的探索

keep-alive是vue自带的保存页面历史的组件，使用方法网上有很多，都是起作用的，但是由于vue保存滚轮位置比较难搞，所以我放弃了keep-alive，采用做在一个页面的方式，用mint-ui的popup组件实现页面跳转效果。