Vue实战 POS系统

最新推荐文章于 2024-05-23 18:07:23 发布

原创

最新推荐文章于 2024-05-23 18:07:23 发布 · 1.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文详细介绍了如何使用Vue构建一个POS系统，包括项目目录构建、POS组件创建、图标库引用（推荐下载到本地）、侧边栏leftNav的实现、Element组件库的使用、Axios远程数据交互以及订单模块的功能实现。文章还讲解了项目打包和上线的步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

POS

—技术胖的Pos教学网址—

前言

进行一个基于vue的收银界面
在这里插入图片描述

1、构建项目目录

使用vue-cli快速构建

2、创建POS组件

新建Pos组件
在这里插入图片描述
Pos.vue

<template>
  <div class="pos">
   Hello
  </div>
</template>

<script>
export default {
   
   
  name: 'pos'
 
}
</script>

<style scoped>

</style>

修改路由：
在这里插入图片描述

import Vue from 'vue'
import Router from 'vue-router'
import Pos from '@/components/Pos'

Vue.use(Router)

export default new Router({
   
   
  routes: [
    {
   
   
      path: '/',
      name: 'Pos',
      component: Pos
    }
  ]
})

给index.html样式
在这里插入图片描述
然后目前结果就是：

3、图标库

阿里图标库

进入iconfont，将需要的图标加入购物车，然后加入项目
在这里插入图片描述
然后

使用在线链接法（不推荐）

1、点击在线连接，并生成代码
2、复制链接，并在前面加 http: 然后在项目的index.html中引用

3、然后就可以在组件中使用了

复制需要图标的代码
在这里插入图片描述
在App.vue中

结果：

下载到本地使用（推荐）（生成css文字图标样式）
第一种是很简单，可是如果我们的客户不能链接外网或者突然间没有网速等情况怎么办？所以，我们要使用第二种，下载到本地。
接着上面的步骤，我们先把之前在index.js文件下link进去的样式给取消（一定要取消），然后点击下载到本地
在这里插入图片描述

解压我们下载好的文件，在vue项目中创建iconfont文件夹，把我们下载好的文件除了demo都放进去，然后就可以全局引入，在main.js中引入iconfont.css样式

import ‘./assets/iconfont/iconfont.css’（如果在不同的项目下需要注意）
import ‘xxx/xxx/xxx/iconfont.css’

在组件中使用方法就和方法1一样了。
在这里插入图片描述

注意：引用彩色图标

在main.js中

import '../static/iconfont/iconfont.css'
require('../static/iconfont/iconfont.js')

在这里插入图片描述
iconfont 中的东西就是你下载的文件解压出来的

在组件中使用的话
在这里插入图片描述
红色下划线这里是复制的

    <svg class="icon iconfont">              
      <use xlink:href="#icon-shouye"></use>
    </svg>

在iconfont.css中加

.icon {
   
   
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

然后就可以了
在这里插入图片描述

4、侧边栏leftNav

新建common、page文件夹，然后将Pos.vue放进去，同时修改路由
在这里插入图片描述

然后在common文件夹创建组件leftNav.vue

5、Element组件库

Element

安装：

npm install element-ui -S

注意：版本兼容问题，使用最新的会和vue 2.6.0 产生不兼容，因此使用2.13.2版本

然后在main.js中引入，使用Vue.use让它全局可用
在这里插入图片描述

使用：按照文档使用就可以了

代码：在第七点的Pos.vue中

6、Axios远程读取数据

提交post，get请求、涉及到和服务器交互的时候都使用Axios
Axios使用文档
 Axios和服务器交互参考一
 Axios和服务器交互参考二

安装axios

npm i axios -S

导入

不需要全局导入，在哪里需要使用就在那里导入
在这里插入图片描述

获取数据

在这里插入图片描述
在钩子函数中：

7、订单模块（以数据驱动来改变DOM结构）

实现：点击商品加入订单列表，计算总商品金额，删除与增加，结账模拟

Pos.vue

<template>
  <div class="pos">
    <el-row>
      <el-col :span="7" class="pos-order" id="orderlist">
        <el-tabs stretch v-model="activeName">
          <el-tab-pane label="点餐" name="first">
            <el-table border style="width: 100%" :data="tableData">
              <el-table-column prop="goodsName" label="商品名称">
              </el-table-column>
              <el-table-column prop="count" label="数量" width="50">
              </el-table-column>
              <el-table-column prop="price" label="金额" width="70">
              </el-table-column>
              <el-table-column label="操作"