目录
1.Git
什么是git？分布式版本管理工具
1.git操作
# 1 创建git本地仓库 # 创建文件夹,cd到文件夹中,执行 git init # 2 查看仓库状态 git status # 3 将想要上传的文件添加进去 git add 文件名称(.表示所有文件和目录) # 4.commit之前必须配置用户 git config --global user.name chao git config --global user.email 1069696250@qq.com # 5.提交，生成版本 git commit -m '描述'
如果在git已经创建了账户和邮箱，那么当你创建vue项目的时候，就会自动生成vue账户和密码
2.路飞学城项目页面效果
0.安装element UI
1.element UI介绍
ElementUI是饿了么团队开发的一个UI组件框架，这个框架提前帮我们提供了很多已经写好的通用模块，我们可以在Vue项目中引入来使用，这个框架的使用类似于我们前面学习的bootstrap框架，也就是说，我们完全可以把官方文档中的组件代码拿来就用，有定制性的内容，可以直接通过样式进行覆盖修改就可以了。
文档快速入门：http://element-cn.eleme.io/#/zh-CN/component/quickstart
2.快速安装element UI
项目根目录执行以下命令:
npm i element-ui -S --registry https://registry.npm.taobao.org
npm i element-ui --save --registry https://registry.npm.taobao.org
3.配置element UI到项目中
// elementUI 导入 import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; // 需要import引入一下css文件，和我们的link标签引入是一个效果，而import .. from ..是配合export default来使用的 // 调用插件 Vue.use(ElementUI);
1.顶部导航栏效果
<template> <div class="total-header"> <div class="header"> <el-container> <!-- ele中的栅格系统--> <el-header height="80px" class="header-cont"> <el-row> <!-- ele将整个页面分为24个区域 --> <el-col class="logo" :span="3"> <!-- 路飞学城的logo图标 --> <a href="/"> <img src="@/assets/header-logo.svg" alt=""> <!-- 可点击的一个路飞logo图片 --> </a> </el-col> <el-col class="nav" :span="10"> <el-row> <el-col :span="3"> <router-link to="/" class="active">免费课</router-link> </el-col> <el-col :span="3"> <router-link to="/">轻课</router-link> </el-col> <el-col :span="3"> <router-link to="/">学位课</router-link> </el-col> <el-col :span="3"> <router-link to="/">题库</router-link> </el-col> <el-col :span="3"> <router-link to="/">教育</router-link> </el-col> </el-row> </el-col> <el-col :span="11" class="header-right-box"> <div class="search"> <!-- 搜索框，默认显示 --> <!-- 当元素失去焦点时触发inputShowHandler方法,isH方法将s_status的值变为True --> <input type="text" id="Input" placeholder="请输入想搜索的课程" style="" @blur="inputShowHandler" ref="Input" v-show="!s_status"> <!-- 元素失去焦点，"请输入"这个搜索框不显示，显示的是PythonLinux的那个 --> <ul @click="ulShowHandler" v-show="s_status" class="search-ul" ref="xx"> <!-- 默认显示的就是这个pythonLinux 因为s-status默认就是true，当用户点击输入框以外别的地方的时候，会触发blur动作，也会将s-status修改为True --> <span>Python</span> <span>Linux</span> </ul> <p> <img class="icon" src="@/assets/sousuo1.png" alt="" v-show="s_status"> <!-- 点外面时 是黑色放大镜 --> <img class="icon" src="@/assets/sousuo2.png" alt="" v-show="!s_status"> <!-- 点输入框时 是黄色放大镜 --> <img class="new" src="@/assets/new.png" alt=""> </p> </div> <!-- 1.登录成功展示购物车和对应的那个下拉框 --> <!-- 2. 没有登录的时候展示登录和注册按钮--> <div class="register" v-show="!token"> <router-link to="/login"> <button class="signin">登录</button> </router-link> | <a target="_blank" href="https://www.luffycity.com/signup"> <router-link to="/register"> <button class="signup">注册</button> </router-link> </a> </div> <div class="shop-car" v-show="token"> <router-link to="/cart"> <b>6</b> <img src="@/assets/shopcart.png" alt=""> <span>购物车 </span> </router-link> </div> <div class="nav-right-box" v-show="token"> <div class="nav-right"> <router-link to="/myclass"> <div class="nav-study">我的教室</div> </router-link> <!-- mouseover鼠标经过，mouseout鼠标离开 --> <!-- 1.鼠标经过触发personInfoList list-status变为true 显示下拉框--> <div class="nav-img" @mouseover="personInfoList" @mouseout="personInfoOut"> <img src="@/assets/touxiang.png" alt="" style="border: 1px solid rgb(243, 243, 243);"> <ul class="home-my-account" v-show="list_status" @mouseover="personInfoList"> <li> 我的账户 <img src="https://hcdn2.luffycity.com/media/frontend/activity/back_1568185800.821227.svg" alt=""> </li> <li> 我的订单 <img src="https://hcdn2.luffycity.com/media/frontend/activity/back_1568185800.821227.svg" alt=""> </li> <li> 贝里小卖铺 <img src="https://hcdn2.luffycity.com/media/frontend/activity/back_1568185800.821227.svg" alt=""> </li> <li> 我的优惠券 <img src="https://hcdn2.luffycity.com/media/frontend/activity/back_1568185800.821227.svg" alt=""> </li> <li> <span> 我的消息 <b>(26)</b> </span> <img src="https://hcdn2.luffycity.com/media/frontend/activity/back_1568185800.821227.svg" alt=""> </li> <li> 退出 <img src="https://hcdn2.luffycity.com/media/frontend/activity/back_1568185800.821227.svg" alt=""> </li> </ul> </div> </div> </div> </el-col> </el-row> </el-header> </el-container> </div> </div> </template> <script> export default { name: "Vheader", data() { return { // 通过标签中一些属性的值来让一些标签展示或隐藏 token: true, // 登录成功与否的标记 s_status: true, // 放大镜效果切换控制,默认input标签不显示 list_status: false, // 个人中心下拉菜单是否显示 } }, methods: { ulShowHandler() { // console.log(this); this.s_status = false; console.log(this.$refs); // this.$nextTick(()=>{ //延迟回调方法 // console.log(this); // this.$refs.Input.focus(); // }) //延迟回调方法，Vue中DOM更新是异步的,也就是说让Vue去显示我们的input标签的操作是异步的，如果我们直接执行this.$refs.Input.focus();是不行的 // 当方法的DOM操作完成之后，才执行延时动作 this.$nextTick(function () { console.log(this); this.$refs.Input.focus(); }); }, inputShowHandler() { this.s_status = true; }, personInfoList() { this.list_status = true; }, personInfoOut() { this.list_status = false; } } } </script> <style scoped> .header-cont .nav .active { color: #f5a623; font-weight: 500; border-bottom: 2px solid #f5a623; } .total-header { min-width: 1200px; z-index: 100; box-shadow: 0 4px 8px 0 hsla(0, 0%, 59%, .1); } .header { width: 1200px; margin: 0 auto; } .header .el-header { padding: 0; } .logo { height: 80px; /*line-height: 80px;*/ /*text-align: center;*/ display: flex; /* css3里面的弹性布局，高度设定好之后，设置这个属性就能让里面的内容居中 */ align-items: center; } .nav .el-row .el-col { height: 80px; line-height: 80px; text-align: center; } .nav a { font-size: 15px; font-weight: 400; cursor: pointer; color: #4a4a4a; text-decoration: none; } .nav .el-row .el-col a:hover { border-bottom: 2px solid #f5a623 } .header-cont { position: relative; } .search input { width: 185px; height: 26px; font-size: 14px; color: #4a4a4a; border: none; border-bottom: 1px solid #ffc210; outline: none; } .search ul { width: 185px; height: 26px; display: flex; align-items: center; padding: 0; padding-bottom: 3px; border-bottom: 1px solid hsla(0, 0%, 59%, .25); cursor: text; margin: 0; font-family: Helvetica Neue, Helvetica, Microsoft YaHei, Arial, sans-serif; } .search .search-ul, .search #Input { padding-top: 10px; } .search ul span { color: #545c63; font-size: 12px; padding: 3px 12px; background: #eeeeef; cursor: pointer; margin-right: 3px; border-radius: 11px; } .hide { display: none; } .search { height: auto; display: flex; } .search p { position: relative; margin-right: 20px; margin-left: 4px; } .search p .icon { width: 16px; height: 16px; cursor: pointer; } .search p .new { width: 18px; height: 10px; position: absolute; left: 15px; top: 0; } .register { height: 36px; display: flex; align-items: center; line-height: 36px; } .register .signin, .register .signup { font-size: 14px; color: #5e5e5e; white-space: nowrap; } .register button { outline: none; cursor: pointer; border: none; background: transparent; } .register a { color: #000; outline: none; } .header-right-box { height: 100%; display: flex; align-items: center; font-size: 15px; color: #4a4a4a; position: absolute; right: 0; top: 0; } .shop-car { width: 99px; height: 28px; border-radius: 15px; margin-right: 20px; background: #f7f7f7; display: flex; align-items: center; justify-content: center; position: relative; cursor: pointer; } .shop-car b { position: absolute; left: 28px; top: -1px; width: 18px; height: 16px; color: #fff; font-size: 12px; font-weight: 350; display: flex; justify-content: center; align-items: center; border-radius: 50%; background: #ff0826; overflow: hidden; transform: scale(.8); } .shop-car img { width: 20px; height: 20px; margin-right: 7px; } .nav-right-box { position: relative; } .nav-right-box .nav-right { float: right; display: flex; height: 100%; line-height: 60px; position: relative; } .nav-right .nav-study { font-size: 15px; font-weight: 300; color: #5e5e5e; margin-right: 20px; cursor: pointer; } .nav-right .nav-study:hover { color: #000; } .nav-img img { width: 26px; height: 26px; border-radius: 50%; display: inline-block; cursor: pointer; } .home-my-account { position: absolute; right: 0; top: 60px; z-index: 101; width: 190px; height: auto; background: #fff; border-radius: 4px; box-shadow: 0 4px 8px 0 #d0d0d0; } li { list-style: none; } .home-my-account li { height: 40px; font-size: 14px; font-weight: 300; color: #5e5e5e; padding-left: 20px; padding-right: 20px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; } .home-my-account li img { cursor: pointer; width: 5px; height: 10px; } .home-my-account li span { height: 40px; display: flex; align-items: center; } .home-my-account li span b { font-weight: 300; margin-top: -2px; } </style>
2.轮播图效果
<template> <el-carousel indicator-position="outside" height="400px"> <el-carousel-item v-for="(value,index) in banner_list" :key="value.id"> <router-link :to="value.url"> <img :src="value.img_src" alt="" style=" 100%;height: 400px;"> <!-- <img src="@/assets/banner1.png" alt="">--> </router-link> </el-carousel-item> </el-carousel> </template> <script> export default { name: "Banner", data(){ return { // 将每张轮播图的路径和url放在字典中，将字典组成一个大列表。 // 将列表作为整个数据传递给template banner_list:[ // {id:1, img_src:'@/assets/banner1.png', url:'http://www.baidu.com'}, // {id:2, img_src:'@/assets/banner2.png', url:'http://www.baidu.com'}, // {id:3, img_src:'@/assets/banner3.png', url:'http://www.baidu.com'}, // {id:1, img_src:require('@/assets/banner1.png'), url:'http://www.baidu.com'}, // {id:2, img_src:require('@/assets/banner2.png'), url:'http://www.baidu.com'}, // {id:3, img_src:require('@/assets/banner3.png'), url:'http://www.baidu.com'}, {id:1, img_src:'../../../static/img/banner1.png', url:'http://www.baidu.com'}, {id:2, img_src:'../../../static/img/banner2.png', url:'http://www.baidu.com'}, {id:3, img_src:'../../../static/img/banner3.png', url:'http://www.baidu.com'}, // 当使用文件路径使用数据属性动态生成到试图当中时，不能使用@符号，如果想使用@符号，那么需要我们自动调用require方法，对路径进行转换，不然就将图片文件放到static文件夹下面。 ] } } } </script> <style scoped> </style>