Vue+vant移动端页面的开发流程

1、开发前该准备的工具和库

一、创建项目流程

下载node.js和git工具
在码云网站上创建仓库，在桌面上打开git bash运行git clone （加上ssh的编码）
npm install -g @vue/cli 安装vue脚手架工具
vue create my-project(或者winpty vue.cmd create)创建项目
运行git init (此命令初始化一个新本地仓库)、git add .和git commit -m ‘message’、git remote add origin +远程项目地址、git push -u origin master -f 将线上代码和码云仓库代码结合。

二、开发中引进的框架和库

1.reset.css

重置浏览器标签的样式表
https://huruqing.gitee.io/demos/source/reset.css

2、 border.css

解决移动端1像素边框的问题
border.css

3、animate.css

动画特效 npm install animate.css

4、moment.js

Moment.js 是一个简单易用的轻量级 JavaScript 日期处理类库
引入方法：

import 'moment/locale/zh-cn'
moment.locale('zh-cn');

使用方法：例如： var now=moment().format(“YYYY年MM月DD日”);

5、swiper 轮播插件

引入方法：npm install swiper vue-awesome-swiper --save
在main.js中添加：

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
Vue.use(VueAwesomeSwiper)

使用方法：

<template>
  <swiper ref="mySwiper" :options="swiperOptions">
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    <swiper-slide>Slide 4</swiper-slide>
    <swiper-slide>Slide 5</swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>

<script>
  export default {
   
    name: 'carrousel',
    data() {
   
      return {
   
        swiperOptions: {
   
          pagination: {
   
            el: '.swiper-pagination'
          },
          // Some Swiper option/callback...
        }
      }
    },
    computed: {
   
      swiper() {
   
        return this.$refs.mySwiper.$swiper
      }
    },
    mounted() {
   
      console.log('Current Swiper instance object', this.swiper)
      this.swiper