vue移动端开发(四)购物车模块实现

1 基础

在此之前你需要先了解vuex在项目中的使用点击学习

2 项目

• vue实现数据共享

2.1 引入vuex

• 安装下载
• 配置
• 使用

2.1.1 安装下载

cnpm i vuex -S

2.1.2 配置

• 创建资源
• 配置资源
• 讲解

1 创建资源

• src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    cart: JSON.parse(localStorage.getItem('cart') || '[]')
  },
  mutations: {
    //业务逻辑
    addCart (state,addInfo) {
      let flag=false
      state.cart.some(el =>{
        if(el.id === addInfo.id){
          el.count+=addInfo.count
          flag=true
        }
      })
      if(!flag){
        state.cart.push(addInfo)
      }
      localStorage.setItem('cart',JSON.stringify(state.cart))
    }
  },
  actions: {
    addCart ({commit},addInfo) {
      commit('addCart',addInfo)
    }
  },
  getters: {
    getAllCount (state) {
      let all = 0;
      state.cart.some(el=>{
        all+=el.count
      })
      return all
    },
    getAllPrice (state){
      let price = 0
      state.cart.some(el=>{
        if(el.selected===true){
          price+=el.count*el.sell_price
        }
      })
      return price
    }
  },
  modules: {
  }
})

2 配置资源

• main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/vant.js'
import './api'
import './mixins'
import './filters/dataFmt'
import store from  './store'
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

2.1.3 使用

• src/views/cart/index.vue

<template>
 <div class="cart">
   <div class="info" v-for="(el,index) in $store.state.cart" :key="index">
     <van-switch v-model="el.selected" />
     <van-card
       :num="el.count"
       :price="el.sell_price"
       :title="el.title"
       :thumb="el.src"
     />
     <div slot="desc">
       <van-stepper v-model="el.count" />
     </div>
     <van-submit-bar :price="$store.getters.getAllPrice*100" button-text="提交订单" />
   </div>
 </div>
</template>

<script>
export default {
}
</script>

<style lang="less" scoped>
.cart {
  margin-bottom: 100px;
  .info{
    background: #fafafa;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px;
    margin: 6px;
    .van-card{
      flex: 3.5;
    }
  }
}

</style>

3 讲解

共享

传递

使用

3 模块化

• utils

export const  getCar = ()=>{
  return JSON.parse(localStorage.getItem('cart') || '[]')
}
export const setCar=(cart)=>{
  localStorage.setItem('cart',JSON.stringify(cart))
}

• 使用
  

4 打包

1 执行命令

npm run build

• 该文件夹是托给服务器静态资源托管public文件夹下的(直接复制过去)

5 优化

1 项目添加 nprogress 进度条

• 执行

yarn add nprogress -S 

• 配置
  • 在main.js 中导入依赖包和样式

  import NProgress from 'nprogress' 
  import 'nprogress/nprogress.css'

• 实现缓存
  

2 自动移除log

1 执行命令

 yarn add babel-plugin-transform-remove-console -D

2 配置

• babel.config.js

const prodPlugins = []
// 生产环境移除console
if (process.env.NODE_ENV === 'production') {
  prodPlugins.push('transform-remove-console')
}
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      'import',
      {
        libraryName: 'vant',
        libraryDirectory: 'es',
        style: true
      },
      'vant'
    ],
    ...prodPlugins
  ]
}

3 使用

vue ui

3 CDN移除外部资源

按需打包

1 配置

• vue.config.js

  chainWebpack: config => {
    // 发布模式
    config.when(process.env.NODE_ENV === 'production', config => {
      // 配置入口文件
      config
        .entry('app')
        .clear()
        .add('./src/main-prod.js')
      // 配置CDN
      config
        .set('externals', {
          vue: 'Vue',
          'vue-router': 'VueRouter',
          axios: 'axios',
          nprogress: 'NProgress',
          moment: 'moment'
        })
      // 配置首页定制
      config.plugin('html').tap(args => {
        args[0].isProd = true
        return args
      })
    })
    // 开发模式
    config.when(process.env.NODE_ENV === 'development', config => {
      config
        .entry('app')
        .clear()
        .add('./src/main-dev.js')
      // 配置首页定制
      config.plugin('html').tap(args => {
        args[0].isProd = false
        return args
      })
    })
  }

2 引入

点击进入官网

6 总结

• 在开发中,组件和路由最好按需加载可以实现页面优化