使用vue构建商城界面（一）--项目初始化

前置条件

1. 安装node
2. 安装vue
3. 安装vue脚手架vue-cli
   ps：官方文档地址 https://youzan.github.io/vant/#/zh-CN/

一、安装vant

1. vant是有赞团队推出的移动端ui框架，同时vant支持小程序版本。
   一般情况下通过npm安装

npm i vant -S

2. 引入组件。官网有四种引入组件的方式，我选择的是我认为的最简单的第三种方式，全局导入；
   方式是打开 /src/main.js 文件，添加下列代码

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

Vue.use(Vant);

二、基本编写

1. 新建自定义的vue界面，目录可以自定义，我在这里选择 /src/view/index/index.vue
   后面所有的界面文件都放在/src/view/目录下面
2. 打开/src/App.vue，这个是vue的入口文件。先简单粗暴的把入口的组件直接链接到刚才新建的index.vue界面。
   顺便设置全局的字号为14px

<template>
    <div id="app">
        <Index/>
    </div>
</template>

<script>
    import Index from './view/index/index'

    export default {
        name: 'App',
        components: {
            Index
        }
    }
</script>

<style>

    html,body {
        width: 100%;
        height: 100%;
    }

    #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        width: 100%;
        height: 100%;
        font-size: 14px;
    }
</style>

三、商城基础界面说明

以淘宝移动端为例，商城首页可以分成几个部分

淘宝移动首页

1. 顶部的搜索栏以及商城的logo，对应(1)
2. 展示产品的轮播图，对应(2)
3. 按钮组、分类导航，对应(3)
4. 多个品牌组成的样式，填充页面结构，对应(4)
5. 列表页面，一般情况下在(4)的下面，通常用列表、多排列表或者瀑布流处理
6. 底部导航，对应(6)，商城一般都会存在

三、编写基于vant移动商城demo

测试编写demo

首页使用了几个简单的控件，搜索框、轮播图、按钮组、商品详情、底部导航tabbar

1. 搜索框(点击前往文档地址)
   可以自定义搜索按钮，如点击搜索框的时候弹出历史记录，再显示出搜索按钮
2. 轮播图(点击前往文档地址)
3. 宫格(点击前往文档地址)
4. 列表(点击前往文档地址)
   有动态的上推加载更多数据，需要动态数据支持
5. 商品卡片(点击前往文档地址)
   这里可以选择自定义内容，或者瀑布流进行商品列表的展示
6. 底部导航(点击前往文档地址)