用git创建项目

vue 脚手架的使用

1.创建项目

npm create 项目名称

2.git管理项目代码

1. 在git中创建项目
   

2.创建仓库

3.将本地代码和仓库进行连接

在控制台输入上面两行代码

git remote add origin https://github.com/caoruibin/shop.git
git push -u origin master

4.登录github （输入账号密码）
5.完成之后

3.目录划分

4.将css引入

• 1.将normalize 引入base.css
  
  2.在App中把base.css导入
  
  3.创建vue.config.js配置项目

5.封装底部导航组件

• 1.将tabber 放到 components/ common中
• 2.TabberItem 是每一个小的 导航按钮

<template>
    <div class="tab-bar-item" @click="itemClick">
        <!-- <img src="../../assets/img/tabbar/home.svg" alt="" />
        <div>首页</div> -->
        <div v-if="!isActive">
            <slot name="item-icon"></slot>
        </div>
        <div v-else>
            <slot name="item-icon-active"></slot>
        </div>
        <div :style="activeStyle">
            <slot name="item-text"></slot>
        </div>
    </div>
</template>
<script>
export default {
    name: "TabBarItem",
    props: {
        path: String,
        activeColor:{
            type:String,
            default:'red'
        }
    },
    data() {
        return {
            // isActive: true,
        };
    },
    computed: {
        isActive() {
            // this.$route.path 拿到当前活跃的path(/home)
            //与 item(/home...)查找    找到就是!== -1 
            return this.$route.path.indexOf(this.path) !== -1;
        },
        activeStyle(){
            return this.isActive ? {color:this.activeColor}:{}
        }
    },
    methods: {
        itemClick() {
            // console.log('123');
            this.$router.replace(this.path);
        },
    },
};
</script>
<style scoped>
.tab-bar-item {
    flex: 1;
    text-align: center;
    height: 49px;
    font-size: 14px;
}
.tab-bar-item img {
    width: 24px;
    height: 24px;
    margin-top: 3px;
    vertical-align: middle;
    margin-bottom: 2px;
}
</style>

3.TabBar是插槽 去填 TabBarItem的坑

<template>
    <div id="tab-bar">
        <slot></slot>
    </div>
</template>
<script>
export default {};
</script>
<style scoped>
#tab-bar {
    display: flex;
    background-color: #f6f6f6;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: 0 -1px 1px rgba(100, 100, 100, 0.2);
}
</style>

4.content/mainTabber/MainTabBar.vue 是 4个TabBarItem的整合

<template>
    <TabBar>
        <TabBarItem path="/home"  >
            <img slot="item-icon" src="@/assets/img/tabbar/home.svg" alt="" />
            <img
                slot="item-icon-active"
                src="@/assets/img/tabbar/home_active.svg"
                alt=""
            />
            <div slot="item-text">首页</div>
        </TabBarItem>
        <TabBarItem path="/category"  >
            <img
                slot="item-icon"
                src="@/assets/img/tabbar/category.svg"
                alt=""
            />
            <img
                slot="item-icon-active"
                src="@/assets/img/tabbar/category_active.svg"
                alt=""
            />
            <div slot="item-text">分类</div>
        </TabBarItem>
        <TabBarItem path="/cart" >
            <img
                slot="item-icon"
                src="@/assets/img/tabbar/shopcart.svg"
                alt=""
            />
            <img
                slot="item-icon-active"
                src="@/assets/img/tabbar/shopcart_active.svg"
                alt=""
            />
            <div slot="item-text">购物车</div>
        </TabBarItem>
        <TabBarItem path="/profile"  >
            <img
                slot="item-icon"
                src="@/assets/img/tabbar/profile.svg"
                alt=""
            />
            <img
                slot="item-icon-active"
                src="@/assets/img/tabbar/profile_active.svg"
                alt=""
            />
            <div slot="item-text">我的</div>
        </TabBarItem>
    </TabBar>
</template>

<script>
import TabBar from "@/components/common/tabbar/TabBar";
import TabBarItem from "@/components/common/tabbar/TabBarItem";

export default {
    name: "MainTabBar",
    components: {
        TabBar,
        TabBarItem,
    },
};
</script>

<style scoped>
</style>

（1）TabBar 坑 里面 插 4 个 TabBarItem
（2） TabBarItem 里面放 图片 文字
（3）把 TabBar TabBarItem 引入到 MainTabBar 中

6.配置导航组件的路由

• 1.注册路由
  npm i vue-router --save
• 2.路由的配置（把views 导入）

import Vue from 'vue'
import VueRouter from 'vue-router'

const Home = () => import('@/views/home/Home')
const Category = () => import('@/views/category/Category')
const Cart = () => import('@/views/cart/Cart')
const Profile = () => import('@/views/profile/Profile')
//1.安装插件
Vue.use(VueRouter)

//2.创建路由对象
const routes =[
    {
        path: '',
        redirect: '/home'
      },
      {
        path: '/home',
        component: Home
      },
      {
        path: '/category',
        component: Category
      },
      {
        path: '/cart',
        component: Cart
      },
      {
        path: '/profile',
        component: Profile
      }
]
const router = new VueRouter({
    routes,
    mode:'history',
})
export default router