初始化

npm install vue-cli -g
vue init webpack pos
cd pos
npm run dev

如果能打开链接则成功

|   -- build                            // 项目构建(webpack)相关代码
    |   |-- build.js                     // 生产环境构建代码
    |   |-- check-version.js             // 检查node、npm等版本
    |   |-- dev-client.js                // 热重载相关
    |   |-- dev-server.js                // 构建本地服务器
    |   |-- utils.js                     // 构建工具相关
    |   |-- webpack.base.conf.js         // webpack基础配置
    |   |-- webpack.dev.conf.js          // webpack开发环境配置
    |   |-- webpack.prod.conf.js         // webpack生产环境配置
    |-- config                           // 项目开发环境配置
    |   |-- dev.env.js                   // 开发环境变量
    |   |-- index.js                     // 项目一些配置变量
    |   |-- prod.env.js                  // 生产环境变量
    |   |-- test.env.js                  // 测试环境变量
    |-- src                              // 源码目录
    |   |-- components                     // vue公共组件
    |   |-- store                          // vuex的状态管理
    |   |-- App.vue                        // 页面入口文件
    |   |-- main.js                        // 程序入口文件，加载各种公共组件
    |-- static                           // 静态文件，比如一些图片，json数据等
    |   |-- data                           // 群聊分析得到的数据用于数据可视化
    |-- .babelrc                         // ES6语法编译配置
    |-- .editorconfig                    // 定义代码格式
    |-- .gitignore                       // git上传需要忽略的文件格式
    |-- README.md                        // 项目说明
    |-- favicon.ico 
    |-- index.html                       // 入口页面
    |-- package.json                     // 项目基本信息

项目结构

参考很清楚

做页面

按照流程走
修改components后，会报错（You may use special comments to disable some warnings） 解决方法：
在config/index.js文件中第26行中的useEslint的值改为false，然后重新启动程序

第5节：开启Element封印

项目中是：import ‘element-ui/lib/theme-fault/index.css’
改成：import ‘element-ui/lib/theme-chalk/index.css’
（因为element更新了，可以去node mudule里面找一下）

  • 在Pos.vue里添加模版布局
    解决100%高的问题： 在页面中使用了Element组件，这样他会自动给我们生产虚拟DOM，我们无法设置高度100%；

这时候可以利用javascript，来设置100%高度问题。先要给我们的标签上添加一个id，我们这里把ID设置为order-list。然后在vue构造器里使用mounted钩子函数来设置高度。用DOM操作

第9节：订单模块制作 核心功能-1添加

<template slot-scope="scope">
                  <el-button type="text" size="big" @click='add(scope.row)'>+1</el-button>

这里是作用域插槽与element联合使用方法，获取当前模板的数据

  • 自己加了输入框 获取数据然后失去焦点 然后再算total
  1. 获取输入框数据 首先是 plot-scope，获取数据后，scope.row 然后是v-model
  2. 输入框数字复制给tableData的时候，可以复制过去，但是总是算得是字符串，所以用了parseInt方法
  3. 调试过程中，打断点，控制台输出，查看结果

第10节：订单模块制作 核心功能-2 删除

  • 自己增加了一个删除此条的业务逻辑
  1. 逻辑：当前数目为1，再减少就直接删除此条，调用del
  2. 删除后，但总价总数目不变，，考虑是，后续的计算total保存的仍然是没改变的count值，所以重新设置为0
  • 删除所有的商品，可以使用splice，或者直接赋值空对象

计算结果

  • 自己使用了计算属性，
computed: {
     totalCount1 () {
      return this.tableData.reduce((pre, cur) => {
        return pre + cur.count
      }, 0)
  • 或者直接使用element的show-summary，可以使用forEach或者reduce