Vue电商网站项目开发总结

实现的功能：

基于vue.js的知识点（webpack，Vuex，Vue-router）开发电商网站项目，实现的功能包括：商品列表按照价格、销量排序；商品列表按照品牌、价格过滤；动态的购物车，使用优惠码等。

main.js：

    路由配置（router），使用History路由模式

    状态管理（Vuex，store），设置了state、getters、mutations、actions

router.js

   路由的页面配置放在router.js文件内单独维护，设置了list（默认页面）、product/:id、cart的路由列表。

style.css

全局使用的CSS样式，在main.js中导入（import './style.css'），每个vue文件scoped的样式一同提取输出到main.css文件。

plugins:[
        //重命名提取后的css文件
        new ExtractTextPlugin({
            filename:'[name].css',
            allChunks:true
        }),
        //vue-loader在15.*后的版本需要伴生VueLoaderPlugin的，否则启动报错
        new VueLoaderPlugin()
    ]

项目根目录下views目录下放置每个路由页面的.vue文件；components目录存放公共组件（product.vue定义了每个产品框的内容)；images目录存放项目用到的照片。

1.模块拆分：

    商品列表（list）用于展示相关的所有商品，具有筛选和排序两种过滤方法；筛选条件可以叠加，可以按照价格、销量等在筛选的基础上进行排序，最终筛选出符合要求的商品。

    排序为单选，初始按“默认”进行排序，价格可分为升序和降序两种排序，销量按照降序；品牌和颜色为单选，单次点击选中，再次点击取消选中；

    初次打开商品列表页请求一次远程数据（用setTimeout模拟异步，真实场景通过Ajax获取），获取到全部的商品数据，然后筛选和排序在本地完成。

    商品列表主要有两个模块，路由组件（views/list.vue），负责数据的请求、过滤相关的逻辑；商品简介组件（components/produce.vue，每个商品卡片），鼠标划过时，显示“加入购物车”的按钮；两个模块的样式都直接写在各自vue文件的