仿美团项目介绍

仿美团移动端项目

主要功能：

店铺商品的加入购物车功能，商品的下单功能，用户地址管理功能（设置默认地址，实现新增/删除地址），账号管理功能

使用的技术：

Vue框架，vuex, Vant组件库，eslink严格模式, Bootstrap栅格布局，ajax跨域请求，路由和组件化开发

项目描述： 该项目是仿美团移动端项目(SPA)；包含商品，购物车，订单，用户等多个子模块；

责任描述：

1．采用基于webpack的Vue进行项目构建，使用git进行代码版本管理

2．使用vue-router实现页面跳转

3．使用 vuex管理应用组件状态

4．使用axios与后端进行数据交互

5．采用模块化、组件化、工程化的模式开发

需要开发的页面：

首页

购物车

订单

个人中心

主要的四个界面通过路由实现

其他页面

店铺

生产订单

地址管理

项目实现过程

创建项目

Vue create vue_project

npm run server

初始化配置

• rem适配：通过相对定位来适配移动端项目

  • 安装

    npm install postcss-pxtorem@5.1.1 amfe-flexible -S
  

  • 文件配置

  // vue.config.js
  module.exports = {
    css: {
      loaderOptions: {
        postcss: {
          plugins: [
            require('postcss-pxtorem')({ rootValue: 16 , propList: ['*']}),
          ],
        },
      },
    },
  };
  

  • 引入

  // main.js
  import 'amfe-flexible';
  

• 关闭eslink的校验

• Less预处理器配置

  • 安装

  cnpm i less less-loader@7 -S
  

• Vant组件库配置: 按需引入 组件

  • 安装

  cnpm i vant@next -S
  cnpm i babel-plugin-import -S
  

  • 引入

  // main.js
  import { Button } from 'vant';
  
  app.use(Button)
  

  • 样式按需引入

    // babel.config.js
    plugins: [
      [
        'import',
        {
          libraryName: 'vant',
          libraryDirectory: 'es',
          style: true,
        },
        'vant',
      ],
    ],
    

    • 使用

    主要按钮
    

• 阿里巴巴矢量库
  • 引入

  // index.html
  <script src="http://at.alicdn.com/t/font_2701887_5roykhspg1e.js"></script>
  

  - 使用
  

• 模块化路由: (项目的路由配置)
  1. 主页面路由配置
     给定四个文件夹分别存放相关组件
     
  2. 安装 vue router
     !