一.开发环境

安装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组件实现页面跳转效果。

 

Logo

前往低代码交流专区

更多推荐