一.开发环境
安装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组件实现页面跳转效果。