目录
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介绍
对于前端页面布局，我们可以使用一些开源的UI框架来配合开发，Vue开发前端项目中，比较常用的就是ElementUI了。
ElementUI是饿了么团队开发的一个UI组件框架，这个框架提前帮我们提供了很多已经写好的通用模块，我们可以在Vue项目中引入来使用，这个框架的使用类似于我们前面学习的bootstrap框架，也就是说，我们完全可以把官方文档中的组件代码拿来就用，有定制性的内容，可以直接通过样式进行覆盖修改就可以了。
中文官网：http://element-cn.eleme.io/#/zh-CN
文档快速入门：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="width: 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>