Skip to content

Latest commit

 

History

History
53 lines (42 loc) · 1.61 KB

README.md

File metadata and controls

53 lines (42 loc) · 1.61 KB

Vue.js是一套构建用户界面的渐进式框架,其便于上手并且各种文档齐全,受到越来越多开发者的青睐。我作为前端小白,一次偶然的机会接触到了Vue.js,光看教程和简单Demo很难深入理解Vue的开发流程以及注意事项。 最近使用vue开发了点餐系统来练练手(项目源于某课付费课程),在这里和大家分享一下

基于Vue的单页应用

项目截图

    

涉及技术

vue.js、vue-cli、vue-router、webpack、eslint、better-scroll、数据Mock

组件

  • 购物车
  • 购买物品小球飞入动画
  • 评价star组件
  • 商品添加、删除组件
  • 优惠图标组件
  • 目录、列表联动滚动
  • 评论的是否满意和内容筛选
  • 商品列表页面
  • 店铺评价页面
  • 商家介绍页面
  • 优惠活动页面
  • 商品详情页面

脚手架工具

vue-cli 的脚手架项目官网给出了两个模板: webpack-simple 和 webpack 两种,现在自己在用的是webpack。 vue-cli除了根据模板创建代码目录结构之外还给出了webpack开发环境以及生产环境的配置信息,方便用户使用。除此之外,还提供了诸如:

  • 代码热更新。
  • PostCss。
  • Eslint。
  • bable。
  • ...

环境搭建

# install dependencies
npm install

开发环境

# serve with hot reload at localhost:8080
npm run dev

生产环境

# build for production with minification
npm run build