使用Vue-cli开发的vue项目

任务

开发一个类似于去哪儿网的旅游App。
使用到Better-scroll以及字母表布局

知识点

MVVM框架： 本质是MVC的改进版，低耦合，可重用，独立开发，可测试。
ES6： 全称ECMAScript6.0，是JS的下一个版本标准。
Vue-cli： vue脚手架指的是vue-cli，它是一个专门为单页面应用快速搭建繁杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。
vue-cli是有Vue提供的一个官方cli，专门为单页面应用快速搭建繁杂的脚手架。它是用于自动生成vue.js+webpack的项目模板，是为现代前端工作流提供了 batteries-included。
Vue-x:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能.

Vue-cli安装和创建项目

首先安装webpack

npm install webpack -g或者（npm install -g webpack）

webpack 4.X 开始，需要安装 webpack-cli 依赖,使用命令 npm install webpack webpack-cli -g，也可以在查看版本号时会自动提醒

查看webpack的版本号，使用webpack -v

输入提示命令进行更新npm

这里再涉及到一部分webpack的使用：
如果js文件使用模块化，直接在浏览器中是无法显示的，浏览器并不能识别，且引用很多js代码不方便管理，使用webpack对多个js文件进行打包，它支持我们代码中写模块化，对代码进行处理，打包指令为webpack src/main.js dist/bundle.js,main.js是项目入口文件，dist为存放之后打包的文件
但是运行时会报错：

按照以下步骤可以解决：
（1）以管理员身份运行vs code
（2）在终端执行：get-ExecutionPolicy，显示Restricted（表示状态是禁止的）
（3）在终端执行：set-ExecutionPolicy RemoteSigned
（4）在终端执行：get-ExecutionPolicy，显示RemoteSigne

安装vue-cli

npm install -g @vue/cli  //yarn global add @vue/cli

安装完成后可以输入vue -V（大写V）查看版本号

创建完成后的项目结构：

进入新的页面开发时，先在线上项目中创建新的分支，再到本地使用git checkout命令切换到新的分支进行一个页面的组件开发。这样更有有利于我们代码的管理。

首页轮播图的开发

利用 Vue-Awesome-Swiper插件来做轮播效果
首先安装Swiper

npm install vue-awesome-swiper --save

在vue项目中使用
在页面中引用需要导入依赖

import 'swiper/dist/css/swiper.css';
import { swiper, swiperSlide } from 'vue-awesome-swiper';

具体代码如下：

<template>
  <div class="wrapper">
    <swiper :options="swiperOption" v-if="showSwiper">
      <swiper-slide v-for="item of list" :key="item.id">
        <img class="swiper-img" :src="item.imgUrl" />
      </swiper-slide>
      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  name: 'HomeSwiper',
  props: {
    list: Array
  },
  data () {
    return {
      swiperOption: {
        pagination: '.swiper-pagination',
        loop: true
      }
    }
  },
  computed: {
    showSwiper () {
      return this.list.length
    }
  }
}
</script>

<style lang="stylus" scoped>
  .wrapper >>> .swiper-pagination-bullet-active
    background: #fff
  .wrapper
    overflow: hidden
    width: 100%
    height: 0
    padding-bottom: 31.25%
    background: #eee
    .swiper-img
      width: 100%
</style>