调整首页细节

  1. 固定头部

    1. App.vue中代码
    2.  
    3. <style>
    4.   body{
    5.     padding: 0;
    6.     margin:0;
    7.     margin-top: 80px;
    8.   }
    9.  
    10. </style>
    11.  
    12. Header中代码：
    13.  
    14. <style scoped>
    15.   .header{
    16.     top:0;
    17.     left:0;
    18.     right:0;
    19.     margin: auto;
    20.     background-color: #fff;
    21.     height: 80px;
    22.     z-index: 1000;
    23.     position: fixed;
    24.     box-shadow: 0 0.5px 0.5px 0 #c9c9c9;
    25.   }
    26.  
    27. </style>
  2. 调整轮播图左右两边的按钮
    注意，style标签中要设置全局样式，所以不需要scoped 
    1. <style>
    2. .el-carousel__arrow{
    3.   width: 100px!important;
    4.   height: 100px!important;
    5. }
    6. .el-icon-arrow-left{
    7.   font-size: 35px;
    8.   margin-left: 50px;
    9. }
    10. .el-carousel__arrow--left{
    11.   left: -50px;
    12. }
    13. </style>

免费课

在组件目录components下创建Course.vue组件文件,代码如下:

    1. <template>
    2.   <div class="course">
    3.  
    4.   </div>
    5. </template>
    6.  
    7. <script>
    8. export default {
    9.   name: "Course",
    10.   data(){
    11.     return {
    12.  
    13.     }
    14.   },
    15. }
    16. </script>
    17.  
    18. <style scoped>
    19.  
    20. </style>
  2. 在routers/index.js路由中注册路由 
    1. import Vue from "vue"
    2. import Router from "vue-router"
    3.  
    4. // 导入可以被用户访问的组件
    5. import Home from "@/components/Home"
    6. import Course from "@/components/Course"
    7.  
    8. Vue.use(Router);
    9.  
    10. export default new Router({
    11.   mode: "history",
    12.   routes:[
    13.     // 路由列表
    14.     {
    15.       path: "/",
    16.       name: "Home",
    17.       component:Home,
    18.     },
    19.     {
    20.       path: "/home",
    21.       name: "Home",
    22.       component:Home,
    23.     },
    24.     {
    25.       path: "/course",
    26.       name: "Course",
    27.       component:Course,
    28.     },
    29.  
    30.   ]
    31. })
  3. 完成免费课课程列表
    文件代码结构，Course.vue代码 
    1. <template>
    2.   <div class="course">
    3.     <Header/>
    4.     <div class="main">
    5.       <!-- 筛选功能 -->
    6.       <div class="top">
    7.         <ul class="condition condition1">
    8.           <li class="cate-condition">课程分类:</li>
    9.           <li class="item current">全部</li>
    10.           <li class="item">Python</li>
    11.           <li class="item">Linux运维</li>
    12.           <li class="item">Python进阶</li>
    13.           <li class="item">开发工具</li>
    14.           <li class="item">Go语言</li>
    15.           <li class="item">机器学习</li>
    16.           <li class="item">技术生涯</li>
    17.         </ul>
    18.         <ul class="condition condition2">
    19.           <li class="cate-condition">筛&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;选:</li>
    20.           <li class="item current">默认</li>
    21.           <li class="item">人气</li>
    22.           <li class="item price">价格</li>
    23.           <li class="course-length">共21个课程</li>
    24.         </ul>
    25.       </div>
    26.       <!-- 课程列表 --->
    27.       <div class="list">
    28.         <ul>
    29.           <li class="course-item">
    30.             <div class="course-cover">
    31.               <img src="../../static/course/Python.jpeg" alt="">
    32.             </div>
    33.             <div class="course-info">
    34.               <div class="course-title">
    35.                 <h3>Python开发21天入门</h3>
    36.                 <span>46520人已加入学习</span>
    37.               </div>
    38.               <p class="teacher">
    39.                 <span class="info">Alex 金角大王 老男孩Python教学总监</span>
    40.                 <span class="lesson">共154课时/更新完成</span>
    41.               </p>
    42.               <ul class="lesson-list">
    43.                 <li>
    44.                   <p class="lesson-title">01 | 常用模块学习-模块的种类和导入方法</p>
    45.                   <span class="free">免费</span>
    46.                 </li>
    47.                 <li>
    48.                   <p class="lesson-title">02 | 编程语言介绍（三）高级语言</p>
    49.                   <span class="free">免费</span>
    50.                 </li>
    51.                 <li>
    52.                   <p class="lesson-title">03 | 编程语言介绍（一）</p>
    53.                   <span class="free">免费</span>
    54.                 </li>
    55.                 <li>
    56.                   <p class="lesson-title">04 | 课程介绍（二）-Python与其他语言的区别</p>
    57.                   <span class="free">免费</span>
    58.                 </li>
    59.               </ul>
    60.               <div class="buy-info">
    61.                 <span class="discount">限时免费</span>
    62.                 <span class="present-price">￥0.00元</span>
    63.                 <span class="original-price">原价：29.00元</span>
    64.                 <button class="buy-now">立即购买</button>
    65.               </div>
    66.             </div>
    67.           </li>
    68.           <li class="course-item">
    69.             <div class="course-cover">
    70.               <img src="../../static/course/Linux.jpeg" alt="">
    71.             </div>
    72.             <div class="course-info">
    73.               <div class="course-title">
    74.                 <h3>Linux系统基础5周入门</h3>
    75.                 <span>23213人已加入学习</span>
    76.               </div>
    77.               <p class="teacher">
    78.                 <span class="info">李泳谊 老男孩Linux学科带头人</span>
    79.                 <span class="lesson">共148课时/已更新147课时</span>
    80.               </p>
    81.               <ul class="lesson-list">
    82.                 <li>
    83.                   <p class="lesson-title">01 | 服务器头部介绍 </p>
    84.                   <span class="free">免费</span>
    85.                 </li>
    86.                 <li>
    87.                   <p class="lesson-title">02 | 第一章总结 </p>
    88.                   <span class="free">免费</span>
    89.                 </li>
    90.                 <li>
    91.                   <p class="lesson-title">03 | 服务器硬件详解 </p>
    92.                   <span class="free">免费</span>
    93.                 </li>
    94.                 <li>
    95.                   <p class="lesson-title">04 | 服务器核心硬件-raid卡-光驱</p>
    96.                   <span class="free">免费</span>
    97.                 </li>
    98.               </ul>
    99.               <div class="buy-info">
    100.                 <span class="discount">限时免费</span>
    101.                 <span class="present-price">￥0.00元</span>
    102.                 <span class="original-price">原价：9.00元</span>
    103.                 <button class="buy-now">立即购买</button>
    104.               </div>
    105.             </div>
    106.           </li>
    107.           <li class="course-item">
    108.             <div class="course-cover">
    109.               <img src="../../static/course/pycharm.jpeg" alt="">
    110.             </div>
    111.             <div class="course-info">
    112.               <div class="course-title">
    113.                 <h3>Pycharm</h3>
    114.                 <span>2247人已加入学习</span>
    115.               </div>
    116.               <p class="teacher">
    117.                 <span class="info">李文周 前段搜狗自身工程师</span>
    118.                 <span class="lesson">共1课时/更新完成</span>
    119.               </p>
    120.               <ul class="lesson-list">
    121.                 <li>
    122.                   <p class="lesson-title">01 | Pycharm使用秘籍视频课程</p>
    123.                   <span class="free">免费</span>
    124.                 </li>
    125.               </ul>
    126.               <div class="buy-info">
    127.                 <span class="discount">限时免费</span>
    128.                 <span class="present-price">￥0.00元</span>
    129.                 <span class="original-price">原价：9.00元</span>
    130.                 <button class="buy-now">立即购买</button>
    131.               </div>
    132.             </div>
    133.           </li>
    134.           <li class="course-item">
    135.             <div class="course-cover">
    136.               <img src="../../static/course/PC列表页.jpeg" alt="">
    137.             </div>
    138.             <div class="course-info">
    139.               <div class="course-title">
    140.                 <h3>网管到CEO的10年逆袭之路</h3>
    141.                 <span>4580人已加入学习</span>
    142.               </div>
    143.               <p class="teacher">
    144.                 <span class="info">Alex 金角大王 老男孩Python教学总监</span>
    145.                 <span class="lesson">共10课时/更新完成</span>
    146.               </p>
    147.               <ul class="lesson-list">
    148.                 <li>
    149.                   <p class="lesson-title">01 | 技术人员如何度过经济寒冬</p>
    150.                   <span class="free">免费</span>
    151.                 </li>
    152.                 <li>
    153.                   <p class="lesson-title">02 | 7天集训营开班直播</p>
    154.                   <span class="free">免费</span>
    155.                 </li>
    156.                 <li>
    157.                   <p class="lesson-title">03 | 失败性人格剖析</p>
    158.                 </li>
    159.                 <li>
    160.                   <p class="lesson-title">04 | 焦虑改变命运</p>
    161.                 </li>
    162.               </ul>
    163.               <div class="buy-info">
    164.                 <span class="discount">限时折扣</span>
    165.                 <span class="present-price">￥1.00元</span>
    166.                 <span class="original-price">原价：100.00元</span>
    167.                 <button class="buy-now">立即购买</button>
    168.               </div>
    169.             </div>
    170.           </li>
    171.         </ul>
    172.       </div>
    173.     </div>
    174.     <Footer/>
    175.   </div>
    176. </template>
    177.  
    178. <script>
    179. import Header from "./common/Header"
    180. import Footer from "./common/Footer"
    181. export default {
    182.   name: "Course",
    183.   data(){
    184.     return {
    185.  
    186.     }
    187.   },
    188.   components:{Header,Footer}
    189. }
    190. </script>
    191.  
    192. <style scoped>
    193. .main{
    194.     width: 1100px;
    195.     height: auto;
    196.     margin: 0 auto;
    197.     padding-top: 35px;
    198. }
    199. .main .top{
    200.     margin-bottom: 35px;
    201.     padding: 25px 30px 25px 20px;
    202.     background: #fff;
    203.     border-radius: 4px;
    204.     box-shadow: 0 2px 4px 0 #f0f0f0;
    205. }
    206. .condition{
    207.     border-bottom: 1px solid #333;
    208.     border-bottom-color: rgba(51,51,51,.05);
    209.     padding-bottom: 18px;
    210.     margin-bottom: 17px;
    211.     overflow: hidden;
    212. }
    213. .condition li{
    214.     float: left;
    215. }
    216. .condition .cate-condition{
    217.     color: #888;
    218.     font-size: 16px;
    219. }
    220. .condition .item{
    221.     padding: 6px 16px;
    222.     line-height: 16px;
    223.     margin-left: 14px;
    224.     position: relative;
    225.     transition: all .3s ease;
    226.     cursor: pointer;
    227.     color: #4a4a4a;
    228. }
    229. .condition1 .current{
    230.     color: #ffc210;
    231.     border: 1px solid #ffc210!important;
    232.     border-radius: 30px;
    233. }
    234. .condition2 .current{
    235.   color: #ffc210;
    236. }
    237. .condition .price:before{
    238.     content: "";
    239.     width: 0;
    240.     border: 5px solid transparent;
    241.     border-top-color: #d8d8d8;
    242.     position: absolute;
    243.     right: 0;
    244.     bottom: 2.5px;
    245. }
    246. .condition .price:after{
    247.     content: "";
    248.     width: 0;
    249.     border: 5px solid transparent;
    250.     border-bottom-color: #ffc210;
    251.     position: absolute;
    252.     right: 0;
    253.     top: 2.5px;
    254. }
    255. .condition2 .course-length{
    256.     float: right;
    257.     font-size: 14px;
    258.     color: #9b9b9b;
    259. }
    260. .course-item{
    261.     background: #fff;
    262.     padding: 20px 30px 20px 20px;
    263.     margin-bottom: 35px;
    264.     border-radius: 2px;
    265.     cursor: pointer;
    266.     box-shadow: 2px 3px 16px rgba(0,0,0,.1);
    267.     transition: all .2s ease;
    268.     overflow: hidden;
    269.     cursor:pointer;
    270. }
    271. .course-cover {
    272.     width: 423px;
    273.     height: 210px;
    274.     margin-right: 30px;
    275.     float: left;
    276. }
    277. .course-info{
    278.     width: 597px;
    279.     float: left;
    280. }
    281. .course-title{
    282.   margin-bottom: 8px;
    283.   overflow: hidden;
    284.  
    285. }
    286. .course-title h3{
    287.   font-size: 26px;
    288.   color: #333;
    289.   float: left;
    290. }
    291. .course-title span {
    292.   float: right;
    293.   font-size: 14px;
    294.   color: #9b9b9b;
    295.   margin-top: 12px;
    296.   text-indent: 1em; /* 缩进 2字符宽度 */
    297.   background: url("../assets/people.svg") no-repeat 0px 3px;
    298. }
    299. .teacher{
    300.     justify-content: space-between;
    301.     font-size: 14px;
    302.     color: #9b9b9b;
    303.     margin-bottom: 14px;
    304.     padding-bottom: 14px;
    305.     border-bottom: 1px solid #333;
    306.     border-bottom-color: rgba(51,51,51,.05);
    307. }
    308. .teacher .lesson{
    309.     float: right;
    310. }
    311. .lesson-list{
    312.   overflow: hidden;
    313. }
    314. .lesson-list li{
    315.     width: 49%;
    316.     margin-bottom: 15px;
    317.     cursor: pointer;
    318.     float: left;
    319.     margin-right:1%;
    320. }
    321. .lesson-list li .player{
    322.     width: 16px;
    323.     height: 16px;
    324.     vertical-align: text-bottom;
    325. }
    326. .lesson-list li .lesson-title {
    327.   display: inline-block;
    328.   max-width: 227px;
    329.   text-overflow: ellipsis; /* 如果字体太多超出元素的宽度，则添加省略符号 */
    330.   color: #666;
    331.   overflow: hidden;
    332.   white-space: nowrap;
    333.   font-size: 14px;
    334.   vertical-align: text-bottom; /* 文本的垂直对齐方式： text-botton 文本底部对齐 */
    335.   text-indent: 1.5em;
    336.   background: url(../../static/player.svg) no-repeat 0px 3px;
    337. }
    338.  
    339. .lesson-list .free{
    340.     width: 34px;
    341.     height: 20px;
    342.     color: #fd7b4d;
    343.     margin-left: 10px;
    344.     border: 1px solid #fd7b4d;
    345.     border-radius: 2px;
    346.     text-align: center;
    347.     font-size: 13px;
    348.     white-space: nowrap;
    349. }
    350. .lesson-list li:hover .lesson-title{
    351.     color: #ffc210;
    352.     background-image: url(../../static/player2.svg);
    353. }
    354. .lesson-list li:hover .free{
    355.     border-color: #ffc210;
    356.     color: #ffc210;
    357. }
    358.  
    359. .buy-info .discount{
    360.     padding: 0px 10px;
    361.     font-size: 16px;
    362.     color: #fff;
    363.     display: inline-block;
    364.     height: 36px;
    365.     text-align: center;
    366.     margin-right: 8px;
    367.     background: #fa6240;
    368.     border: 1px solid #fa6240;
    369.     border-radius: 10px 0 10px 0;
    370.     line-height: 36px;
    371. }
    372. .present-price{
    373.     font-size: 24px;
    374.     color: #fa6240;
    375. }
    376. .original-price{
    377.     text-decoration: line-through;
    378.     font-size: 14px;
    379.     color: #9b9b9b;
    380.     margin-left: 10px;
    381. }
    382. .buy-now{
    383.     width: 120px;
    384.     height: 38px;
    385.     background: transparent;
    386.     color: #fa6240;
    387.     font-size: 16px;
    388.     border: 1px solid #fd7b4d;
    389.     border-radius: 3px;
    390.     transition: all .2s ease-in-out; /* 过渡动画 */
    391.     float: right;
    392.     margin-top: 5px;
    393. }
    394. .buy-now:hover{
    395.     color: #fff;
    396.     background: #ffc210;
    397.     border: 1px solid #ffc210;
    398.     cursor: pointer;
    399. }
    400. </style>
  4. 针对页面头部部分增加高亮和登陆按钮，根据登陆状态显示登陆注册按钮 
    1. <template>
    2.   <div class="header">
    3.     <el-container>
    4.       <el-header>
    5.         <el-row>
    6.           <el-col class="logo" :span="3">
    7.             <a href="/">
    8.               <img src="@/assets/head-logo.svg" alt="">
    9.             </a>
    10.           </el-col>
    11.           <el-col class="nav" :span="16">
    12.               <el-row>
    13.                 <el-col :span="3"><router-link class="current" to="/">免费课</router-link></el-col>
    14.                 <el-col :span="3"><router-link to="/">轻课</router-link></el-col>
    15.                 <el-col :span="3"><router-link to="/">学位课</router-link></el-col>
    16.                 <el-col :span="3"><router-link to="/">题库</router-link></el-col>
    17.                 <el-col :span="3"><router-link to="/">教育</router-link></el-col>
    18.               </el-row>
    19.           </el-col>
    20.           <el-col class="login-bar" :span="5">
    21.             <el-row v-if="token">
    22.               <el-col class="cart-ico" :span="9">
    23.                 <router-link to="">
    24.                   <b class="goods-number">0</b>
    25.                   <img class="cart-icon" src="@/assets/cart.svg" alt="">
    26.                   <span>购物车</span>
    27.                 </router-link>
    28.               </el-col>
    29.               <el-col class="study" :span="8" :offset="2"><router-link to="">学习中心</router-link></el-col>
    30.               <el-col class="member" :span="5">
    31.                 <el-menu class="el-menu-demo" mode="horizontal">
    32.                   <el-submenu index="2">
    33.                     <template slot="title"><router-link to=""><img src="@/assets/logo@2x.png" alt=""></router-link></template>
    34.                     <el-menu-item index="2-1">我的账户</el-menu-item>
    35.                     <el-menu-item index="2-2">我的订单</el-menu-item>
    36.                     <el-menu-item index="2-3">我的优惠卷</el-menu-item>
    37.                     <el-menu-item index="2-3">退出登录</el-menu-item>
    38.                   </el-submenu>
    39.                 </el-menu>
    40.               </el-col>
    41.             </el-row>
    42.             <el-row v-else>
    43.               <el-col class="cart-ico" :span="9">
    44.                 <router-link to="">
    45.                   <img class="cart-icon" src="@/assets/cart.svg" alt="">
    46.                   <span>购物车</span>
    47.                 </router-link>
    48.               </el-col>
    49.               <el-col :span="10" :offset="5">
    50.                 <span class="register">
    51.                   <router-link to="/login">登录</router-link>
    52.                   &nbsp;&nbsp;|&nbsp;&nbsp;
    53.                   <router-link to="/register">注册</router-link>
    54.                 </span>
    55.               </el-col>
    56.             </el-row>
    57.           </el-col>
    58.         </el-row>
    59.       </el-header>
    60.     </el-container>
    61.   </div>
    62. </template>
    63.  
    64. <script>
    65.   export default {
    66.     name: "Header",
    67.     data(){
    68.       return {
    69.         // 设置一个登录标识，表示是否登录
    70.         token: true,
    71.       };
    72.     }
    73.   }
    74. </script>
    75.  
    76. <style scoped>
    77.   .header{
    78.     top:0;
    79.     left:0;
    80.     right:0;
    81.     margin: auto;
    82.     background-color: #fff;
    83.     height: 80px;
    84.     z-index: 1000;
    85.     position: fixed;
    86.     box-shadow: 0 0.5px 0.5px 0 #c9c9c9;
    87.   }
    88.   .header .el-container{
    89.     width: 1200px;
    90.     margin: 0 auto;
    91.   }
    92.   .el-header{
    93.     height: 80px!important;
    94.     padding:0;
    95.   }
    96.   .logo{
    97.  
    98.   }
    99.   .logo img{
    100.     padding-top: 22px;
    101.   }
    102.  
    103.   .nav{
    104.     margin-top: 22px;
    105.   }
    106.  
    107.   .nav .el-col a{
    108.     display: inline-block;
    109.     text-align: center;
    110.     padding-bottom: 16px;
    111.     padding-left: 5px;
    112.     padding-right: 5px;
    113.     position: relative;
    114.     font-size: 16px;
    115.     margin-left: 20px;
    116.   }
    117.  
    118.   .nav .el-col .current{
    119.     color: #4a4a4a;
    120.     border-bottom: 4px solid #ffc210;
    121.   }
    122.  
    123.   .login-bar{
    124.     margin-top: 22px;
    125.   }
    126.   .cart-ico{
    127.     position: relative;
    128.     border-radius: 17px;
    129.   }
    130.   .cart-ico:hover{
    131.     background: #f0f0f0;
    132.   }
    133.   .goods-number{
    134.     width: 16px;
    135.     height: 16px;
    136.     line-height: 17px;
    137.     font-size: 12px;
    138.     color: #fff;
    139.     text-align: center;
    140.     background: #fa6240;
    141.     border-radius: 50%;
    142.     transform: scale(.8);
    143.     position: absolute;
    144.     left: 16px;
    145.     top: -1px;
    146.   }
    147.   .cart-icon{
    148.     width: 15px;
    149.     height: auto;
    150.     margin-left: 6px;
    151.   }
    152.   .cart-ico span{
    153.     margin-left: 12px;
    154.   }
    155.   .member img{
    156.     width: 26px;
    157.     height: 26px;
    158.     border-radius: 50%;
    159.     display: inline-block;
    160.   }
    161.   .member img:hover{
    162.     border: 1px solid yellow;
    163.   }
    164.   .el-menu.el-menu--horizontal{
    165.     border-bottom: None;
    166.   }
    167. </style>

购物车页面

  1. 在头部公共组件中打通购物车的链接地址，Header.vue

    1. <span><router-link to="/cart">购物车</router-link></span>
    1.  

    创建购物车页面组件
    在components/创建Cart.vue组件文件

  3. 注册路由地址
    routers/index.js代码 
    1. import Cart from "@/components/Cart"
    2.  
    3. export default new Router({
    4.   // 路由跳转模式，注意使用 history
    5.   mode: "history",
    6.  
    7.   // 路由规则
    8.   routes:[
    9.     。。。
    10.     ,{
    11.       name:"Cart",
    12.       path: "/cart",
    13.       component: Cart,
    14.     },
    15.   ]
    16. })
  4. 显示表格数据 
    1. <template>
    2.     <div class="cart">
    3.       <Header/>
    4.       <div class="main">
    5.         <div class="cart-title">
    6.           <h3>我的购物车 <span> 共2门课程</span></h3>
    7.           <el-table :data="courseData" style="width:100%">
    8.             <el-table-column type="selection" label="" width="87"></el-table-column>
    9.             <el-table-column prop="title" label="课程" width="540"></el-table-column>
    10.             <el-table-column prop="expire" label="有效期" width="216"></el-table-column>
    11.             <el-table-column prop="price" label="单价" width="162"></el-table-column>
    12.             <el-table-column label="操作" width="162"></el-table-column>
    13.           </el-table>
    14.         </div>
    15.         <div calss="cart-info"></div>
    16.       </div>
    17.       <Footer/>
    18.     </div>
    19. </template>
    20.  
    21. <script>
    22. import Header from "./common/Header"
    23. import Footer from "./common/Footer"
    24. export default {
    25.     name: "Cart",
    26.     data(){
    27.       return{
    28.         courseData:[
    29.           {title:"课程标题一",expire:"2016",price:"12.00"},
    30.           {title:"课程标题一",expire:"2016",price:"12.00"},
    31.           {title:"课程标题一",expire:"2016",price:"12.00"},
    32.           {title:"课程标题一",expire:"2016",price:"12.00"},
    33.           {title:"课程标题一",expire:"2016",price:"12.00"},
    34.           {title:"课程标题一",expire:"2016",price:"12.00"},
    35.           {title:"课程标题一",expire:"2016",price:"12.00"},
    36.           {title:"课程标题一",expire:"2016",price:"12.00"},
    37.         ]
    38.       }
    39.     },
    40.     components:{Header,Footer}
    41. }
    42. </script>
    43.  
    44. <style scoped>
    45. .main{
    46.   width: 1200px;
    47.   margin: 0 auto;
    48.   overflow: hidden; /* 解决body元素和标题之间的上下外边距的塌陷问题 */
    49. }
    50. .cart-title h3{
    51.   font-size: 18px;
    52.   color: #666;
    53.   margin: 25px 0;
    54. }
    55. .cart-title h3 span{
    56.   font-size: 12px;
    57.   color: #d0d0d0;
    58.   display: inline-block;
    59. }
    60. </style>

Vue-项目之免费课和购物车实现的更多相关文章

  1. vue 项目记录.路飞学城(一)

    前情提要: 通过vue 搭建路飞学城记录  一:项目分析 二:项目搭建 1:创建项目 vue init webpack luffy 2:初始化项目 清除默认的HelloWorld.vue组件和APP. ...

  2. 前端Vue项目——登录页面实现

    一.geetest滑动验证 geetest官方文档地址:https://docs.geetest.com/ 产品——极速验证:基于深度学习的人机识别应用.极验「行为验证」是一项可以帮助你的网站与APP ...

  3. DRF+Vue项目（一）——项目架构

    永久配置安装源 为了加速模块的下载 1.文件管理器文件路径地址栏敲:%APPDATA% 回车,快速进入 C:\Users\电脑用户\AppData\Roaming 文件夹中 2.新建 pip 文件夹并 ...

  4. element-ui和npm、webpack、vue-cli搭建Vue项目

    一.element-ui的简单使用 1.安装 1. npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i element-ui -S 2. CDN ...

  5. vue项目中的常见问题

    总结了几个vue项目开发过程中遇到的常见问题,希望大家注意. 注:文末有福利! 一.样式问题 1.vue中使用less 安装less依赖 npm install less less-loader -- ...

  6. vue项目中icon图标的完美引入

    第一步: 进入阿里矢量图标库并登录 地址:https://www.iconfont.cn 第二步: 选择项目需要的图标添加到库 第三步: 选完之后点击右上角的购物车,打开后点击添加到项目,没有就自己建 ...

  7. Vue 项目 Vue + restfulframework

    Vue 项目 Vue + restfulframework 实现登录认证 - django views class MyResponse(): def __init__(self): self.sta ...

  8. vue项目使用阿里巴巴矢量图标库教程

    前言:element-ui自带的图标库还是不够全,还是需要需要引入第三方icon,自己在用的时候一直有些问题,参考了些教程,详细地记录补充下. 对于我们来说,首选的当然是阿里icon库 地址:http ...

  9. python 全栈开发，Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)

    一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面 ...

随机推荐

  1. 三 drf 认证,权限,限流,过滤,排序,分页,异常处理,接口文档,集xadmin的使用

    因为接下来的功能中需要使用到登陆功能,所以我们使用django内置admin站点并创建一个管理员. python manage.py createsuperuser 创建管理员以后,访问admin站点 ...

  2. SELinux 的初始和基本操作

    SELinux 主要作用就是最大限度地减小系统中服务进程可访问的资源(最小权限原则). 设想一下,如果一个以 root 身份运行的网络服务存在 0day 漏洞,黑客就可以利用这个漏洞,以 root 的 ...

  3. 最全面的移动APP测试点

    随着互联网,大数据时代的不断推进,演化.移动开发领域得到普遍普及,APP开发如潮水般涌现.下面我将详细介绍app的测试点: 首先我们先熟悉app测试基本流程: 1.1流程图 1.2测试周期 测试周期可 ...

  4. .net正则IP加端口,并返回IP加端口

    public string GetIp(string url) { var reg = new Regex(@"\d{2,3}([.]\d{1,3}){3}:\d{2,5}"); ...

  5. Python中文问题

    读取数据库中文是?? 解决如下 一.python2版本需要在 文件的开头要加上编码设置来说明文件的编码  python3版本以上不需要 #encoding=utf-8 二.在连接数据的连接参数里加上字 ...

  6. MapServer Tutorial——MapServer7.2.1教程学习——第一节：MapServer的基本配置管理，静态地图应用以及MapFile文件

    MapServer Tutorial——MapServer7.2.1教程学习——第一节:MapServer的基本配置管理,静态地图应用以及MapFile文件 前言 万事开头难,有了<MapSer ...

  7. H5 audio 通过canplaythrough预加载音乐

    1.背景 微信里做H5活动页面,对音乐使用autoplay, android没问题,IOS半天播不出来,因此考虑对音乐进行预加载(不是preload) <!DOCTYPE html> &l ...

  8. JVM配置参数详解

    记录一下jvm中的一些配置参数,这些肯定不全的,希望你们能留个言,补全一下,谢谢啦! -XX: MaxDirectMemorySize--->设置直接内存,不设置与Java堆内存最大值一致 -X ...

  9. Linux应用调试 ：使用gdb和gdbserver进行远程调试

    一.引言 在日常程序开发中不免遇到类似空指针操作导致程序崩溃的问题,所以需要一定的手段去定位bug,而断点调试是普遍使用的技巧,比如Windows中用VC++的debug模式进单步运行.断点调试等,而 ...

  10. Java容器解析系列(5) AbstractSequentialList LinkedList 详解

    AbstractSequentialList为顺序访问的list提供了一个骨架实现,使实现顺序访问的list变得简单; 我们来看源码: /** AbstractSequentialList 继承自 A ...