zoukankan      html  css  js  c++  java
  • luffy前台配置

    luffy前台必备,请注意查收^ _ ^

    axios前后台交互

    安装:前端项目目录下的终端

    >: cnpm install axios
    

    配置:main.js

    import axios from 'axios'
    Vue.prototype.$axios = axios;
    

    cokies操作

    安装:前端项目目录下的终端

    >: cnpm install vue-cookies
    

    配置:main.js

    import cookies from 'vue-cookies'
    Vue.prototype.$cookies = cookies;
    

    element-ui页面组件框架

    安装:前端项目目录下的终端

    >: cnpm install element-ui
    

    配置:main.js

    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    Vue.use(ElementUI);
    

    bootstrap页面组件框架

    安装:前端项目目录下的终端

    >: cnpm install jquery
    >: cnpm install bootstrap@3
    

    配置jquery:vue.config.js

    const webpack = require("webpack");
    
    module.exports = {
        configureWebpack: {
            plugins: [
                new webpack.ProvidePlugin({
                    $: "jquery",
                    jQuery: "jquery",
                    "window.jQuery": "jquery",
                    "window.$": "jquery",
                    Popper: ["popper.js", "default"]
                })
            ]
        }
    };
    

    配置bootstrap:main.js

    import 'bootstrap'
    import 'bootstrap/dist/css/bootstrap.min.css'
    

    前端主页

    图片准备

    将提供的资料中的图片移植到项目的img文件夹下

    页头组件:components/Header.vue

    <template>
        <div class="header-box">
            <div class="header">
                <div class="content">
                    <div class="logo full-left">
                        <router-link to="/"><img @click="jump('/')" src="@/assets/img/logo.svg" alt=""></router-link>
                    </div>
                    <ul class="nav full-left">
                        <li><span @click="jump('/course')" :class="this_nav=='/course'?'this':''">免费课</span></li>
                        <li><span @click="jump('/light-course')" :class="this_nav=='/light-course'?'this':''">轻课</span></li>
                        <li><span>学位课</span></li>
                        <li><span>题库</span></li>
                        <li><span>老男孩教育</span></li>
                    </ul>
                    <div class="login-bar full-right">
                        <div class="shop-cart full-left">
                            <img src="@/assets/img/cart.svg" alt="">
                            <span><router-link to="/cart">购物车</router-link></span>
                        </div>
                        <div class="login-box full-left">
                            <span>登录</span>
                            &nbsp;|&nbsp;
                            <span>注册</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </template>
    
    <script>
        export default {
            name: "Header",
            data() {
                return {
                    this_nav: "",
                }
            },
            created() {
                this.this_nav = localStorage.this_nav;
            },
            methods: {
                jump(location) {
                    localStorage.this_nav = location;
                    // vue-router除了提供router-link标签跳转页面以外,还提供了js跳转的方式
                    this.$router.push(location);
                }
            }
        }
    </script>
    
    <style scoped>
        .header-box {
            height: 80px;
        }
    
        .header {
             100%;
            height: 80px;
            box-shadow: 0 0.5px 0.5px 0 #c9c9c9;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            margin: auto;
            z-index: 99;
            background: #fff;
        }
    
        .header .content {
            max- 1200px;
             100%;
            margin: 0 auto;
        }
    
        .header .content .logo {
            height: 80px;
            line-height: 80px;
            margin-right: 50px;
            cursor: pointer;
        }
    
        .header .content .logo img {
            vertical-align: middle;
        }
    
        .header .nav li {
            float: left;
            height: 80px;
            line-height: 80px;
            margin-right: 30px;
            font-size: 16px;
            color: #4a4a4a;
            cursor: pointer;
        }
    
        .header .nav li span {
            padding-bottom: 16px;
            padding-left: 5px;
            padding-right: 5px;
        }
    
        .header .nav li span a {
            display: inline-block;
        }
    
        .header .nav li .this {
            color: #4a4a4a;
            border-bottom: 4px solid #ffc210;
        }
    
        .header .nav li:hover span {
            color: #000;
        }
    
        .header .login-bar {
            height: 80px;
        }
    
        .header .login-bar .shop-cart {
            margin-right: 20px;
            border-radius: 17px;
            background: #f7f7f7;
            cursor: pointer;
            font-size: 14px;
            height: 28px;
             88px;
            margin-top: 30px;
            line-height: 32px;
            text-align: center;
        }
    
        .header .login-bar .shop-cart:hover {
            background: #f0f0f0;
        }
    
        .header .login-bar .shop-cart img {
             15px;
            margin-right: 4px;
            margin-left: 6px;
        }
    
        .header .login-bar .shop-cart span {
            margin-right: 6px;
        }
    
        .header .login-bar .login-box {
            margin-top: 33px;
        }
    
        .header .login-bar .login-box span {
            color: #4a4a4a;
            cursor: pointer;
        }
    
        .header .login-bar .login-box span:hover {
            color: #000000;
        }
    
        .full-left {
            float: left !important;
        }
    
        .full-right {
            float: right !important;
        }
    
        .el-carousel__arrow {
             120px;
            height: 120px;
        }
    
        .el-checkbox__input.is-checked .el-checkbox__inner,
        .el-checkbox__input.is-indeterminate .el-checkbox__inner {
            background: #ffc210;
            border-color: #ffc210;
            border: none;
        }
    
        .el-checkbox__inner:hover {
            border-color: #9b9b9b;
        }
    
        .el-checkbox__inner {
             16px;
            height: 16px;
            border: 1px solid #9b9b9b;
            border-radius: 0;
        }
    
        .el-checkbox__inner::after {
            height: 9px;
             5px;
        }
    </style>
    

    轮播图组件:components/Banner.vue

    <template>
        <el-carousel height="520px" :interval="3000" arrow="always">
            <el-carousel-item>
                <img src="@/assets/img/banner1.png" alt="">
            </el-carousel-item>
            <el-carousel-item>
                <img src="@/assets/img/banner2.png" alt="">
            </el-carousel-item>
            <el-carousel-item>
                <img src="@/assets/img/banner3.png" alt="">
            </el-carousel-item>
        </el-carousel>
    </template>
    <script>
        export default {
            name: "Banner",
        }
    </script>
    
    <style scoped>
        .el-carousel__item h3 {
            color: #475669;
            font-size: 18px;
            opacity: 0.75;
            line-height: 300px;
            margin: 0;
        }
    
        .el-carousel__item:nth-child(2n) {
            background-color: #99a9bf;
        }
    
        .el-carousel__item:nth-child(2n+1) {
            background-color: #d3dce6;
        }
        .el-carousel__item img {
            text-align: center;
            height: 520px;
            margin: 0 auto;
            display: block;
        }
    </style>
    

    页脚组件:components/Footer.vue

    <template>
        <div class="footer">
            <ul>
                <li>关于我们</li>
                <li>联系我们</li>
                <li>商务合作</li>
                <li>帮助中心</li>
                <li>意见反馈</li>
                <li>新手指南</li>
            </ul>
            <p>Copyright © luffycity.com版权所有 | 京ICP备17072161号-1</p>
        </div>
    </template>
    
    <script>
        export default {
            name: "Footer"
        }
    </script>
    
    <style scoped>
        .footer {
             100%;
            height: 128px;
            background: #25292e;
            color: #fff;
        }
    
        .footer ul {
            margin: 0 auto 16px;
            padding-top: 38px;
             810px;
        }
    
        .footer ul li {
            float: left;
             112px;
            margin: 0 10px;
            text-align: center;
            font-size: 14px;
        }
    
        .footer ul::after {
            content: "";
            display: block;
            clear: both;
        }
    
        .footer p {
            text-align: center;
            font-size: 12px;
        }
    </style>
    

    主页组件:views/Home.vue

    <template>
        <div class="home">
            <Header />
            <Banner />
            <Footer />
        </div>
    </template>
    
    <script>
        import Header from '@/components/Header'
        import Banner from '@/components/Banner'
        import Footer from '@/components/Footer'
    
        export default {
            name: 'home',
            components: {
                Header,
                Banner,
                Footer
            },
        }
    </script>
    
  • 相关阅读:
    excel生成csv后,0001变成1
    windows_server_2012_r2提示api-ms-win-crt-runtime-l1-1-0.dll 丢失
    py文件生成exe程序
    朴素贝叶斯分类(上)
    01 | 数据分析全景图及修炼指南
    BBS
    BBS
    BBS
    BBS
    BBS
  • 原文地址:https://www.cnblogs.com/yanjiayi098-001/p/11953161.html
Copyright © 2011-2022 走看看