Vue商城项目01

将项目源码托管到oschina 码云 中

1. 点击头像 -> 修改资料 -> SSH公钥 如何生成SSH公钥
   如果已经创建过，则公匙位置C:\Users\ASUS.ssh，id_rsa.pub文件夹打开复制即可

2. 创建自己的空仓储，Git 全局设置。使用 git config --global user.name "用户名" 和 git config --global user.email ***@**.com 来全局配置提交时用户的名称和邮箱

3. 使用 git init 在本地初始化项目

4. 使用 touch README.md 和 touch .gitignore 来创建项目的说明文件和忽略文件；

5. 使用 git add . 将所有文件托管到 git 中

6. 使用 git commit -m "init project" 将项目进行本地提交

7. 使用 git remote add origin 仓储地址将本地项目和远程仓储连接，并使用origin最为远程仓储的别名

8. 使用 git push -u origin master 将本地代码push到仓储中

使用vscode默认集成Git工具块

vs左边中间的源代码管理，点击对号就可以提交，右边三个点里的推送可以push到仓库

App.vue 组件的基本设置

1. 头部的固定导航栏使用 Mint-UI 的 Header 组件；

import Vue from 'vue'
import app from './App.vue'

import { Header } from 'mint-ui'
Vue.component(Header.name, Header)

var vm = new Vue({
 el: '#app',
 render: c => c(app),
 router 
})


<mt-header fixed title="黑马程序员·Vue项目"></mt-header>

2. 底部的页签使用 mui 的 tabbar;使用的是 MUI 的 Tabbar.html
   代码在例子里面mui-master包中–>examples–>hello-mui—>examples—>找到需要的样式复制代码

// 导入 MUI 的样式
import './lib/mui/css/mui.min.css'

3. 购物车的图标，使用MUI 的 icons-extra.html，同时，应该把其依赖的字体图标文件 mui-icons-extra.ttf，复制到 fonts 目录下！

// 导入扩展图标样式,css目录下应该有icons-extra.css
import './lib/mui/css/icons-extra.css'
为 购物车 小图标 ，添加 如下样式 `mui-icon mui-icon-extra mui-icon-extra-cart`

4. 将底部的页签，改造成 router-link 来实现单页面的切换；

<router-link class="mui-tab-item" to="/home"> </router-link>

// 1.1 导入路由的包
import VueRouter from 'vue-router'
// 1.2 安装路由
Vue.use(VueRouter)
// 1.3 导入自己的 router.js 路由模块
import router from './router.js'
router // 1.4 挂载路由对象到 VM 实例上

5. Tab Bar 路由激活时候设置高亮的两种方式：

• 全局设置样式如下：

	.router-link-active{
     	color:#007aff !important;
   }

• 或者在 new VueRouter 的时候，通过 linkActiveClass 来指定高亮的类：

	// 创建路由对象
   var router = new VueRouter({
     routes: [
       { path: '/', redirect: '/home' }
     ],
     linkActiveClass: 'mui-active'
     // 默认的类叫做 router-link-active，更换为名字为mui-active类已经被Mui设计好高亮
   });

实现 tabbar 页签不同组件页面的切换

1. 将 tabbar 改造成 router-link 形式，并指定每个连接的 to 属性；
2. 在router.js文件中导入需要展示的组件，并创建路由对象：

    // 导入需要展示的组件
    import Home from './components/home/home.vue'
    import Member from './components/member/member.vue'
    import Shopcar from './components/shopcar/shopcar.vue'
    import Search from './components/search/search.vue'
    // 创建路由对象
    var router = new VueRouter({
      routes: [
        { path: '/', redirect: '/home' },
        { path: '/home', component: Home },
        { path: '/member', component: Member },
        { path: '/shopcar', component: Shopcar },
        { path: '/search', component: Search }
      ],
      linkActiveClass: 'mui-active'
    });

3. App.vue里中间位置放<router-view></router-view>

使用 mint-ui-swipe 轮播图组件

1. 可以先有模拟的图片数据

2. 引入轮播图组件：
   main.js里

import {  Swipe, SwipeItem } from 'mint-ui'
Vue.component(Swipe.name, Swipe)
Vue.component(SwipeItem.name, SwipeItem)

<!-- Mint-UI 轮播图组件 -->

    <div class="home-swipe">

      <mt-swipe :auto="4000">

        <mt-swipe-item v-for="(item, i) in lunbo" :key="i">

          <img :src="item" alt="">

        </mt-swipe-item>

      </mt-swipe>

    </div>

  </div>

< 注意，默认是没有高度的，所以需要加上样式

<style lang="scss" scoped>
.mint-swipe {
  height: 200px;

  .mint-swipe-item {//选择器嵌套。&是当前的父选择器
    &:nth-child(1) {
      background-color: red;
    }
    &:nth-child(2) {
      background-color: blue;
    }
    &:nth-child(3) {
      background-color: cyan;
    }

    //让图片自适应大小
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>

在.vue组件中使用vue-resource获取数据

1. 运行cnpm i vue-resource -S安装模块

2. 导入 vue-resource 组件

import VueResource from 'vue-resource'

3. 在vue中使用 vue-resource 组件

Vue.use(VueResource);

4. 在vue组件中，根据文档地址来发送请求得到数据
   使用 vue-resource 的 this.$http.get 获取数据保存到 data 身上， 使用 v-for 循环渲染 每个 item 项。

<template>
  <div>
    <mt-swipe :auto="4000">
      <!-- 在组件中，使用v-for循环的话，一定要使用 key -->
      <mt-swipe-item v-for="item in lunbotuList" :key="item.url">
        <img :src="item.img" alt="">
      </mt-swipe-item>
    </mt-swipe>
  </div>
</template>

<script>
import { Toast } from "mint-ui";

export default {
  data() {
    return {
      lunbotuList: [] // 保存轮播图的数组
    };
  },
  created() {
    this.getLunbotu();
  },
  methods: {
    getLunbotu() {
      // 获取轮播图数据的方法
      this.$http.get("http://vue.studyit.io/api/getlunbo").then(result => {
        // console.log(result.body);
        if (result.body.status === 0) {
          // 成功了
          this.lunbotuList = result.body.message;
        } else {
          // 失败的
          Toast("加载轮播图失败。。。");
        }
      });
    }
  }
};
</script>

完成组件切换时动画效果

让用户觉得界面流畅，帮助理解界面的运行流程

		<transition>
			<router-view></router-view>
		</transition>

<style lang="scss" scoped>
.app-container {
  padding-top: 40px;//在固定的导航栏下面
  padding-bottom: 50px;//内容距离底部50px
  overflow-x: hidden;//整个界面切换的时候，超出的部分隐藏
}

.v-enter {
  opacity: 0; //完全透明，消失
  transform: translateX(100%); //从右侧完全进入
}

.v-leave-to {
  opacity: 0;
  transform: translateX(-100%); //从左侧完全出去
  position: absolute; //让竖轴上的飘移，不占位置
}

.v-enter-active,
.v-leave-active {
  transition: all 0.5s ease;
}
</style>