Vue.js 2 快餐店收银系统

技术栈

Vue.js 2 + Webpack + Element + Axios + vueRouter.

效果图

图标 Iconfont

在项目开发过程中经常会遇到小图标的使用问题，小图标的使用可以让程序更美观。在这里推荐使用 IconFont，这是阿里巴巴的矢量图标库。

在 Iconfont 中有很多图标，我们可以像逛超市一样，挑选自己喜欢的商品，然后放入购物车。

使用步骤如下：
第一步：拷贝项目下面生成的 fontclass 代码

//at.alicdn.com/t/font_6fwsxglzew154s4i.css

第二步：挑选相应图标并获取类名，应用于页面

侧边栏导航组件

LeftNav.vue

使用 Element 布局

• npm 安装

npm install element-ui --save

• 引入项目
  在 main.js 中加入以下内容：

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.use(ElementUI)

右侧内容组件

Main.vue

其余代码

index.html

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
import router from './router'

Vue.config.productionTip = false

Vue.use(ElementUI)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '',
  components: {
    App
  }
})

App.vue

index.js

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

Vue.use(Router)

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

项目打包

注意事项：
打开 config/index.js 会看到一个 build 属性，这里就是我们打包的基本配置。你在这里可以修改打包的目录，文件名。最重要的是一定要把绝对路径改为相对路径。
把

assetsPublicPath: '/'

改为

assetsPublicPath: './'