一、项目技术栈

vue+vant+es6+node.js+koa+mongoDB

1、项目前端结构初始化以及目录结构介绍

安装node
安装sudo npm install -g @vue/cli
创建项目 vue create shop或 vue cli
进入项目 cd shop
运行项目 npm run serve

2、移动端屏幕适配方案

1、百分比
2、媒体查询

@media (max-width: 320px) {
  .box {
    width: 50%;
    height: 200px;
    background-color: green;
  }
}

3、flex弹性盒模型
4、rem -- 相对于html的

ps: 简写 ul.footer-bar>li*4

ps:导入全局样式 import "@/assets/css/reset.css";

3、vue-router

routes: [
    {
      path: "/",
      name: "home",
      component: Home
    },
]

二、首页布局及Vant

1、组件库推荐

vant

vux

element -- 网站速成工具

iview

muse-ui

2、安装

npm install vant --save

yarn add vant

3、引入组件

方式一：使用 babel-plugin-import (推荐)

安装 babel-plugin-import 插件 npm i babel-plugin-import -D

方式二. 按需引入组件

在不使用插件的情况下，可以手动引入需要的组件

import Button from 'vant/lib/button'; import 'vant/lib/button/style';

方式三. 导入所有组件

import Vue from 'vue'; import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant);

....未完成