8、vue实战 快餐店收银系统 - Zikzin/vuejs2.0-study GitHub Wiki

  • 技术栈:Vue+Webpack+Element+Axios+vueRouter，系统：快餐店的POS系统，这里完成收银模块的制作。

一、Mockplus把我们的想法画出来

  • Mockplus是产品经理装逼使用的利器，但是真的很好用，作为一个已经工作的程序员必须舔产品经理的脸，所以你也要对Mockplus的使用有所了解，并会简单的使用。其实Mockplus就是一个线框图制作工具，能把我们的想法或者不太好用语言表达的地方，快速画出线框草图增加理解能力。

  • 为什么选择快餐店POS系统？

    • 我们采用三栏布局，每栏的交互操作都很有技术技巧，让你快速掌握复杂应用的开发。
    • 用到的知识点多：用到实战中90%以上的知识点，让你把Vue的知识串联起来，快速成为单位中的技术牛人。

  • MockPlus软件下载：下载，下载好后你需要注册一个账户，就可以正常使用了。用mokeplus制作出项目框线图，在作项目之前，一定要画出框线图，反复讨论需求和技术实现，这样能避免开发中的大范围修改，在实际工作当中非常重要。

二、Vue-cli搭建开发环境

搭建项目架构：

  • 1、新建文件夹，名为POS

  • 2、拖进sublime text，打开命令行，输入vue-cli安装命令： npm install vue-cli -g

    • 检测是否安装好： vue -V。 会出现版本号。

  • 3、在命令行中初始化项目，我们采用的是webpack模板，输入初始化命令：

    vue init webpack POS

    • POS是项目文件夹名称，安装时根据项目需要配置所需要的模块。这里有一个小技巧，就是在你已经提前建立好了文件夹的时候，我们也进入了文件夹，这时候我们可以省略这个文件夹名称。

  • 4、在命令行中，进入项目目录，使用npm install 安装package.json里项目的依赖包。如果你网速较慢的话，可以使用淘宝镜像的cnpm来进行安装。

    • 安装cnpm,官网： 淘宝镜像

      $ npm install -g cnpm --registry=https://registry.npm.taobao.org

  • 5、查看是否安装正确。在命令行中输入 npm run dev ，如果能在浏览器中正常打开页面，说明安装正确。

修改项目文件内容：

  • 1、修改根目录下的index.html文件，我们想写一些CSS样式，这样作是为了更好的布局，然后修改一下标题栏。让标题符合项目这里起名叫“AwesomePOS-快餐店管理系统”。index.html修改后内容如下。

<!DOCTYPE html>

<html>

<head>

`<meta charset="utf-8">`

`<title>AwesomePOS-快餐管理系统</title>`

`<link rel="stylesheet" href="http://at.alicdn.com/t/font_wyhhdpv5lhvbzkt9.css">`

`<style>`

  `html,body,#app{height:100%;padding: 0;margin:0;}`

`</style>`

</head>

`

`<div id="app" ></div>`

`<!-- built files will be auto injected -->`

</body>

</html>

  • 2、新建Pos组件，这个相当于程序员的入口文件。在src/components/page/目录下新建Pos.vue文件。文件内容写出vue模板的架构就可以。

<template>

<div class="pos">

Hello Pos Demo!

</div>

</template>

<script>

export default {

name: 'Pos'

}

</script>

<style scoped>

</style>

  • 3、修改路由文件，项目根目录/src/router/index.js，让入口文件变成Pos组件。先用import引入了Pos模板组件，然后修改routes里边的内容。

import Vue from 'vue'

import Router from 'vue-router'

import Pos from '@/components/page/Pos'

Vue.use(Router)

export default new Router({

routes: [

`{`

  `path: '/',`

  `name: 'Pos',`

  `component: Pos`

`}`

]

})

  • 这时候看一下浏览器中的网页，如果显示出了Hello Pos Demo.我们就算成功搭建项目架构了。下节课我们确定一下项目中使用的图标。

三、搞定项目图标Iconfont

使用阿里巴巴字体图标

四、编写独立的侧边栏导航组件

1、建立leftNav.vue文件：

  • 我们在src/components目录下，先新建一个common和page文件夹。
    • common文件夹用来放共用组件，下面写的leftNav.vue组件就放到这里。
    • page文件夹用来放我们的页面模板组件，页面的模板文件放到这里。
  • 在common文件夹下，新建leftNav.vue文件。

<template>

<div class="left-nav">

</div>

</template>

<script>

export default {

name: 'leftNav',

data () {

`return {`

`}`

}

}

</script>

<style>

</style>

  • 开始写html结构，我们用列表li来代表导航。菜单栏有收银、店铺、商品、会员、统计。我们编写的html结构如下

<ul>

    `<li>`

        `<i class="icon iconfont icon-wodezichan"></i>`

        `<div>收银</div>`

    `</li>`

    `<li>`

        `<i class="icon iconfont icon-dianpu"></i>`

        `<div>店铺</div>`

    `</li>`

    `<li>`

        `<i class="icon iconfont icon-hanbao"></i>`

        `<div>商品</div>`

    `</li>`

     `<li>`

        `<i class="icon iconfont icon-huiyuanqia"></i>`

        `<div>会员</div>`

    `</li>`

    `<li>`

        `<i class="icon iconfont icon-tongji"></i>`

        `<div>统计</div>`

    `</li>`

</ul>

五、开启Element封印

  • Element是一套为开发者、设计师和产品经理准备的基于Vue2.0的组件库，提供了配套设计资源，帮助你的网站快速成型。在项目中自己写组件虽然灵活，但是效率并不高效，所以要学会站在巨人的肩膀上干活，Element就是巨人的肩旁，也是现在国内比较成熟的以一套Vue的组件库。
⚠️ **GitHub.com Fallback** ⚠️