vue-04-Git，luffcc项目前端（首页）

最新推荐文章于 2024-05-07 05:03:19 发布
最新推荐文章于 2024-05-07 05:03:19 发布
阅读量409 收藏
点赞数
分类专栏： 6vue 文章标签： vue git
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45957580/article/details/109164199
版权

一、Git

分布式版本管理工具
git指令

1 创建git本地仓库
	创建文件夹,cd到文件夹中,执行
	git init
	
2 git status 查看仓库状态

3 git add 文件名称(.表示所有文件和目录)

commit之前必须配置用户
git config --global user.name cui
git config --global user.email xx@qq.com

4 git commit -m '描述'  生成版本

二、luffcc项目前端（首页）

1.项目搭建

创建项目目录

cd 项目目录
vue init webpack luffcc

在pycharm添加快捷运行vue项目：

2.项目结构及整体代码

项目整体结构：

config->index.js

    // Various Dev Server settings
    host: 'www.luffcc.com', // can be overwritten by process.env.HOST

Vheader.vue

<template>
  <div class="total-header">
    <div class="header">
      <el-container>
        <el-header class="header-cont" height="80px">
          <el-row>
            <el-col class="logo" :span="3">
              <a href="/">
                <img src="@/assets/header-logo.svg" alt="">
              </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 class="header-right-box" :span="11">
              <div class="search">
                <input type="text" id="Input" placeholder="请输入想搜索的课程" style="" @blur="inputShowHandler" ref="Input" v-show="!s_status">
                <ul @click="ulShowHandler" v-show="s_status" class="search-ul" ref="xx">
                  <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>
              <div class="register" v-show="!token">
                <router-link to="/login">
                  <button class="aigin">登录</button>
                </router-link>
                  |
                <a target="_blank" href="https://www.luffcc.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>
                  <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() {
      this.s_status = false;
      console.log(this.$refs);

      //延迟回调方法，Vue中DOM更新是异步的,也就是说让Vue去显示我们的input标签的操作是异步的，如果我们直接执行this.$refs.Input.focus();是不行的
      // 当方法的DOM操作完成之后，才执行延时动作
      // this.$nextTick(function () {
      //   console.log(this);
      //   this.$refs.Input.focus();
      // });

      this.$nextTick(()=>{
        console.log(this);
        this.$refs.Input.focus();
      });
    },

    inputShowHandler() {
      console.log('xxxx')
      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>

Banner.vue

<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;">
      </router-link>
    </el-carousel-item>
  </el-carousel>

</template>

<script>
export default {
  name: "Banner",
  data() {
    return {
      banner_list:[
        // {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'},

        // 当使用文件路径使用数据属性动态生成到试图当中时，不能使用@符号，如果想说那个@符号，那么需要我们自动调用require方法，对路径进行转换，不然就将图片文件放到static文件夹下面。

        {id:1, img_src:'../../../static/img/banner1.png', url:'http://www.baidu.com'},
        {id:1, img_src:'../../../static/img/banner2.png', url:'http://www.baidu.com'},
        {id:1, img_src:'../../../static/img/banner3.png', url:'http://www.baidu.com'},
      ]
    }
  }
}
</script>

<style scoped>

</style>

Footer.vue

<template>
  <div class="footer">
    <div class="footer-item">
      <div class="foot-left">
        <div class="foot-content">
          <p>
            <span>关于我们</span>
            |
            <span>贝里小卖铺</span>
          </p>
          <p>
            地址：北京市昌平区顺沙路八号院汇德商厦402  邮箱：customer@luffycity.com
          </p>
          <p>
            © 2017-2020 北京路飞学城教育科技有限公司版权所有
            <a class="copyright" href="http://beian.miit.gov.cn" target="_blank">京ICP备17072161号-1</a>
          </p>
          <p>
            <a class="report-link" target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010102002019&amp;token=1ee3034d-ba3a-4cc3-89d4-89875e2dd0b1">
              <img class="report-img" src="//img.alicdn.com/tfs/TB1..50QpXXXXX7XpXXXXXXXXXX-40-40.png" alt="" style="float: left">
              京公网安备 11010102002019号
            </a>
          </p>
        </div>

      </div>
      <img class="code" src="@/assets/code.png" alt="">
    </div>
  </div>
</template>

<script>
export default {
  name: "Footer"
}
</script>

<style scoped>
.footer{
  display: flex;
  align-items: center;
  width: 100%;
  height: 140px;
  flex-direction: column;
  overflow: hidden;
  background: #191c25;
}
.footer .foot-left{
  display: flex;
  align-items: center;
}
.footer .foot-left .foot-content p{
  margin-bottom: 10px;
  font-size: 13px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: #d0d0d0;
}
.footer-item{
  width: 960px;
  height: 100%;
  justify-content: space-between;
}
.foot-left{
  display: flex;
  align-items: center;
  float: left;
}
.foot-content a{
  color: #d0d0d0;
}
.footer .foot-left .foot-content p:first-child span{
  font-size: 16px;
  font-weight: 400;
  display: inline-block;
  font-family: PingFangSC-Regular;
  cursor: pointer;
}
.foot-content .report-img{
  display: inline-block;
  height: 20px;
  margin-right: 12px;
}
.footer-item .code{
  width: 74px;
  height: auto;
  margin-right: 100px;
  float: right;
  padding-top: 30px;
}
.copyright {
  text-decoration: none;
}
.report-link {
  text-decoration: none;
}
</style>

Home.vue

<template>
  <div class="home">
    <Vheader></Vheader>
    <Banner></Banner>
    <Footer></Footer>

  </div>
</template>

<script>
import Vheader from "./common/Vheader";
import Banner from "./common/Banner";
import Footer from "./common/Footer";

export default {
  name: "Home",
  data() {
    return {
      title:'Home组件'
    }
  },
  components:{
    Vheader,
    Banner,
    Footer
  }
}
</script>

<style scoped>
h1{
  color: red;
}
</style>

router->index.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from "../components/Home";

Vue.use(Router)
const routes = [
  {
    path: '/home',
    component:Home,
  },
  {
    path: '/',
    component: Home,
  }
]

export default new Router({
  mode: 'history',  // 固定模式
  routes,
})

App.vue

<template>
  <div id="app">

    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
ul{
  padding: 0;
  margin: 0;
}
body{
  padding: 0;
  margin: 0;
}
</style>

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false
Vue.use(ElementUI);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})
Hi-CWJ
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
2021 年 6 个GitHub推荐前端项目
m0_63171455的博客
01-24 3507
2021年已成过去，2022年已来，对于中国人来说，春节过后才算是新的一年开始。在这个2022年的第一个月里面，来总结一些跟技术相关的报告，本文就来总结2021年6个GitHub上的推荐前端项目，基于GitHub上的 star 数量，从这个趋势可以看出前端开发的一些发展趋势。Python学习资料点击免费领取 1. Next.js React 已经流行了很多年，但令人惊讶的是，它在 2021 年仍然获得了巨大的增长。Next.js 是一个用于生产的 React 框架，它提供了生产环境所需的所有特性：...
vue-admin-beautiful-template:vue-admin-beautiful-template基础版
03-21
vue-admin-beautiful前端讨论QQ群972435319，1139183756 不论您加或不加，您都可以享受到开源的代码，感谢您的支持和信任，群内部提供vue-admin-beautifu基础版本，开发工具自动配置教程和项目开发文档。 :...
纯Git实现前端项目打包部署
qq_37155408的博客
03-24 7493
利用纯GIT实现前端项目自动打包部署，方便且快速
luffcc项目-01-项目开发基础概念、需求分析、环境搭建、搭建项目、搭建前端项目、跨域CORS
Hi文的博客
10-26 1081
一、项目开发基础概念 1.企业的web项目类型 1. 商城 1.1 B2C 直销商城 商家与会员直接交易 ( Business To Customer )，路飞等。 1.2 B2B 批发商城 商家与商家直接交易，阿里巴巴 1.3 B2B2C 购物平台 商家和会员在另一个商家提供的平台上面进行交易，京东、天猫 1.4 C2B 定制商城 会员向商家发起定制商品的需求，商家去完成，小米手机中就有个私人定制过程，它是发起投票，让大家对需求有一定的定制性，人数
git+github的使用-最简单的入门教程
nongshuqiner的博客
02-28 606
团队开发离不开版本控制器，而现今最好用的免费版本控制就是git，这里教会大家使用git，献上一个干货 前言自从git这个版本控制器问世以后，它便代替SVN成为最好用的免费控制器，会不会使用它关系着每个开发者的开发便利与否的问题，这么说：如果你不会用git===你不会团队开发，而GitHub 是一个面向开源及私有软件项目的托管平台，因为只支持 Git 作为唯一的版本库格式进行托管，故名 GitHub，
2024年前端最新程序员必备技能篇：Git入门到精通，大牛手把手带你
最新发布
2401_84620288的博客
05-07 633
版本控制（Revision control）是一种在开发的过程中用于管理我们对文件、目录或工程等内容的修改历史，方便查看更改历史记录，备份以便恢复以前的版本的软件工程技术。Git 是一个开源的分布式版本控制系统，是目前世界上最先进、最流行的版本控制系统。可以快速高效地处理从很小到非常大的项目版本管理；😃特点😃：项目越大越复杂，协同开发者越多，越能体现出 Git 的高性能和高可用性。
vue-mail-front:基于vue的前端系统。
03-11
Welcome ~~，这是一个基于Vue2的邮件前端系统 项目预览地址： 项目迁移说明 之前的vue-mial-front因为git文件太大（> 20m），猜测是之前gif文件也指向了git管理（原谅以前撒比的我），第一次fetch或pull花费时间巨长...
vue框架vue-next-admin-master.zip
04-04
Vue.js 是一款非常流行的前端JavaScript框架，由尤雨溪开发并维护。Vue.js 的核心设计理念是数据驱动和组件化，这使得它在构建用户界面时能够保持代码的简洁和可维护性。Vue-next-admin-master 是一个基于 Vue.js ...
基于vue-element-admin开发的cms-rbac权限管理系统后台前端源码
10-02
【标题】基于vue-element-admin开发的CMS-RBAC权限管理系统后台前端源码 【解析】Vue-element-admin是一款基于Vue.js和Element-UI的后台管理界面模板，它为开发者提供了丰富的预设组件和功能，便于快速构建高效且易...
RuoYi-Vue-fast-master_ruoyi项目_vuefast_若依前后端分离项目_
10-03
总的来说，“RuoYi-Vue-fast-master”是一个全面的前端项目，涵盖了现代Web开发的多个重要方面，包括前端框架、项目架构、数据管理、用户体验、自动化工具和安全机制等，适合学习和应用于企业级Web应用开发。
接私活必备的 10 个开源项目！
James_bobo的博客
11-22 1047
1. AdminLTE GitHub Star 数 24969 ， GitHub 地址： https://github.com/almasaeed2010/AdminLTE 非常流行的基于 Bootstrap 3.x 的免费的后台 UI 框架。 2. vue-Element-Admin GitHub Star 数 19546， GitHub 地址： https://github.com/Pan...
几个前端页面git开源项目
lfx
09-24 1102
1.https://github.com/almasaeed2010/AdminLTE 2.https://github.com/PanJiaChen/vue-element-admin 3.https://github.com/tabler/tabler 4.https://github.com/puikinsh/gentelella 5.https://github.c...
在前端项目中使用Git Hooks
博客
05-10 2974
在前端项目中使用Git Hooks 具备基本工程素养的同学都会注重编码规范，而代码风格检查（Code Linting，简称 Lint）是保障代码规范一致性的重要手段。 使用 Lint 会有什么好处呢？在我看来至少具有如下 3 点： 更少的 Bug 更高的开发效率，Lint 很容易发现低级的、显而易见的错误 更高的可读性 很多时候我们lint的校验是放在持续集成阶段，大概流程如下： 代码提交 ...
HTML中嵌入SVG图片的N种方式
weixin_33810006的博客
08-31 7704
最近用到了个SVG图片，里面还是带<image>标签的，想要把它嵌入到HTML中还是有些工作要做的。 经历 最初的图片是这样写的： <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "htt...
GitLab的大前端计划
@steveyg
02-14 2896
大前端计划（Big fronted Plan）是GitLab团队的一项长期计划，他们希望通过Vue和webpack使得GitLab变的更快。
前端git的使用
weixin_34411563的博客
01-17 1394
设置用户名，邮箱 因为Git是分布式版本控制系统，所以需要填写用户名和邮箱作为一个标识。 注意：git config --global 参数，有了这个参数，表示你这台机器上所有的Git仓库都会使用这个配置，当然你也可以对某个仓库指定的不同的用户名和邮箱。 1./etc/gitconfig 文件：包含了适用于系统所有用户和所有库的值。如果你传递参数选项’--system’ 给 git confi...
前端项目 git 流程化
Miss_Liang的博客
12-10 546
一、在码云注册 ssh 公钥 安装 git 打开 git bash 输入 ssh-keygen -t rsa -C "码云邮箱地址" ，三次回车之后生成密钥对 输入 cat ~/.ssh/id_rsa.pub，回车，生成的公钥会显示在控制台，复制控制台上的公钥内容 打开码云 --> 设置 --> SSH 公钥，将公钥内容粘贴至公钥下方的文...
github上值得关注的前端项目
weixin_30889885的博客
08-05 499
github上值得关注的前端项目 http://microjs.com/# 该网站的资源都托管到了github，microjs.com是一个可以让你选择微型的js类库的网站，该网站里的js库都是压缩后不大于5KB的，非常实用 https://plainjs.com/（10.22更新） ...
work-notes（3）：前端新项目入手，git拉项目，从头到尾操作理清思路
jinzai9976的博客
04-12 1872
时间：2022-04-11 声明 因为对clone、拉取、提交、合并代码的混乱，特此做笔记理清思路，仅作以为一个可靠稳定的方式； 开头 拿到新项目，还没 clone 时，可完整思路下来； 1、在远程仓库上，创建自己的分支 一般默认时从 master 分支上创建出来，不用管； 创建好后复制对应的 url 地址； 2、clone 克隆项目 在指定的 object 文件夹，右键 “Git Bash here” 输入：git clone xxxx （xxx 就是你的 远程仓库地址） 此时已经可以拉取到 已连通
快速搭建Vue前端项目：vue-element-admin实践
"02-搭建VUE前端项目" 在本文中，我们将深入探讨如何搭建一个基于Vue和Element-UI的前端项目，以`vue-element-admin`为例，它是一个功能丰富的后台管理前端解决方案。首先，我们需要从GitHub上获取项目源代码，并...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值