day01-vuejs项目-商城（1）

配置ssh的方式:

你可以按如下命令来生成 sshkey:

ssh-keygen -t rsa -C"xxxxx@xxxxx.com"

Generating public/private rsa key pair...# 三次回车即可生成 ssh key

方式查看：

cat ~/.ssh/id_rsa.pub

将项目源码托管到oschina中

1. 点击头像 -> 修改资料 -> SSH公钥 如何生成SSH公钥

2. 创建自己的空仓储，使用 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到仓储中

---

使用vs code默认集成的Git工具快速提交代码:

image.png

制作首页App组件

1. 完成 Header 区域，使用的是 Mint-UI 中的Header组件
2. 制作底部的 Tabbar 区域，使用的是 MUI 的 Tabbar.html

• 在制作 购物车 小图标的时候，操作会相对多一些：
• 先把 扩展图标的 css 样式，拷贝到 项目中
• 拷贝 扩展字体库 ttf 文件，到项目中
• 为 购物车 小图标 ，添加 如下样式 mui-icon mui-icon-extra mui-icon-extra-cart

tabbar路由链接的改造和路由高亮：

覆盖默认的路由高亮的类，默认的类叫做 router-link-active

image.png

实现tabbar路由组件的切换功能：

在src的目录下创建components文件夹所有的组件都放在里面
将创建好的子组件导入到路由模块中：

import VueRouter from 'vue-router'
// 导入对应的路由组件
import HomeContainer from './components/tabbar/HomeContainer.vue'
import MemberContainer from './components/tabbar/MemberContainer.vue'
import ShopcarContainer from './components/tabbar/ShopcarContainer.vue'
import SearchContainer from './components/tabbar/SearchContainer.vue'


// 3. 创建路由对象
var router = new VueRouter({
  routes: [
    { path: '/home', component: HomeContainer },
    { path: '/member', component: MemberContainer },
    { path: '/shopcar', component: ShopcarContainer },
    { path: '/search', component: SearchContainer }
  ],
  linkActiveClass: 'mui-active' 
  // 覆盖默认的路由高亮的类，默认的类叫做 router-link-active
})

完成首页轮播图样式布局:

• 引入需要用到的miut-ui组件：

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

将代码片段插入到HomeContainer.vue区域中：

<template>
  <div>

     <!-- 轮播图区域 -->
    <mt-swipe :auto="4000">
      <mt-swipe-item>1</mt-swipe-item>
       <mt-swipe-item>2</mt-swipe-item>
        <mt-swipe-item>3</mt-swipe-item>
        
    </mt-swipe>

    <h3>HomeContainer</h3>
    
  </div>
</template>

<script>
</script>

<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>

加载首页轮播图数据

1. 获取数据， 如何获取呢， 使用 vue-resource
2. 使用 vue-resource 的 this.$http.get 获取数据
3. 获取到的数据，要保存到 data 身上
4. 使用 v-for 循环渲染 每个 item 项