vuejs全家桶-项目总结

最近公司要做了一个m站，技术栈为:vuejs2.0全家桶。

下面记录下遇到的一些问题。

1.关于图片懒加载:vue-lazyload

由于项目的图片需要用七牛处理，所以需要定义过滤器。最开始是的思路是v-lazy="list.image_src | urlFilter"，通过管道符去使用定义好的过滤器。但是发现不行。最后通过npm官方去查这个组件，发现这个组件有过滤器的配置项,地址:https://www.npmjs.com/package/vue-lazyload

相关代码:

Vue.use(VueLazyload, {

         error: 'dist/assets/image_error.png',

         loading: 'dist/assets/placeholder6_brand.png',

         filter:{

               webp ({ src }) {

                     let imgConfig = "这里是七牛配置" 

                     return src + imgConfig

         },

},

        try: 3

})

2.使用路由钩子函数设置页面title

const routes = [

     {

          path: "/",

          component: brandSearch,

           meta:{title:'选择品牌'}

     }

]

const router = new VueRouter({

       // mode: 'history',

      routes // （缩写）相当于 routes: routes

})

router.afterEach(to =>{document.title = to.meta.title})

3.使用异步组件优化初始化性能

详解地址:http://router.vuejs.org/zh-cn/advanced/lazy-loading.html

将组件定义为异步组件，路由正常去写。

const brandSearch = r => require.ensure([], () => r(require('../component/brand/brandSearch.vue')), 'brandSearch')

这样子在切换到对应路由的时候，才会在页面上插入对应的css和JS文件，避免了随着项目越来越大，初始化性能会大打折扣。

4.vuex在项目中的使用

用在项目中开发非常顺利，例如A页面点击跳转到省市联动组件，在用户选择完省市后返回到A页面，A页面显示用户选择结果。

相关代码：

/**

* 设置省份和城市

*/

setRegion(){

       this.$store.commit('setRegion',{"province":this.province,"city":this.city});

       this.$router.go(-1)

}

const mutations = {

     // mutation 的第一个参数是state

     //设置上牌区域

    setRegion(state,region){

           state.province=region.province+" ";

           state.city=region.city;

     }

}

action可以提交异步，mutation必须是同步执行。action响应用户事件，mutation是唯一改变state的方式.

5.sass在项目中的使用

在根组件的style中引入全局的样式，这样子我们的单文件组件中就可以随意拿去使用了,需要配置在webpack中配置sass-loader。

<style lang="sass">

         @import 'styles/index.scss'

</style>

在单文件组件中 正常去编写样式。