京东金融项目

JDjingrong

京东金融项目

一.开始项目(里面的初始文件可以用来移动端初始化)

1.下载初始文件,里面已整理好移动端初始样式(支持es6,引入scss+css module,自动刷新,可以用来移动端初始化),用git版本回退到ccbe7f9即可;
接着在git安装插件和运行开启服务命令,最终界面显示如下代表成功.

小技巧:终端ls命令可以显示当前目录文件;

2.开始基础样式布局(里面用到了@mixin,@include,不会看scss官网介绍)

3.两种路由模式原理.

实操history模式:

实操hash模式:

二.正式开始js开发

ps:用ls查看当前目录文件,用mkdir+文件名创建文件;

1.创建js/core/btn.vue公共组件,写法如下

<template>
<!-- [btnClass,cname]v-bind数组指令 -->
  <div :class="[btnClass,cname]">
     <slot/>
  </div>
</template>
<script>
export default {
   
  name: 'btn',
  props:{
   //props外面传值
      cname:{
   
          type:String,
          default:""
      }
  },
  data(){
   
      return {
   
          btnClass:'btn'
      }
  }
}
</script>
<style lang="scss">
/*引入样式,这就是sass强大之处 */
@import "../../css/element.scss";
.btn{
   
    @include btn;
}
</style>

同样,创建js/core/panel.vue,

<template>
<!-- 下面三行依次是:类名,标题名,插槽要填充的内容 -->
  <section :class="[panelClass,cname]">
      <h4>-{
   {
   title}}-</h4>
      <slot/>
  </section>
</template>

<script>
export default {
   
  name: 'panel',
  props:{
   //这里是要传递的值
      cname:{
   
          type:String,
          default:""
      },
      title:{
   
          type:String,
          default:''
      }
  },
  data() {
   
      return {
   
        panelClass:"panel"

      }
  },
}
</script>
<style lang="scss">
@import "../../css/element.scss";
.panel{
   
    @include panel;
}
</style>

3.vue中有一个轮播图的插件叫 vue-awesome-swiper,轮播图我们用这个.

检查有没安装vue-awesome-swipe的办法

安装好后,创建js/core/slide.vue,代码如下

<template>
 <section :class="cname">
     <swiper :options="options" :not-next-tick="options.notNextTick">
         <swiper-slide v-for="item in items" :key="item.href">
             <router-link :to="{name:'item.href'}">
                 <img :src="item.src" alt="">
             </router-link>
         </swiper-slide>
         <!-- 指示器 -->
         <div class="swiper-pagination" v-if="options.pagination" slot="pagination"></div>
     </swiper>
 </section>
</template>

<script>
import {
   swiper,swiperSlide} from "vue-awesome-swiper"
export default {
   
  name: 'slide',
  props:{
   
      cname:{
   
          type:String,
          default:''
      },
      options:{
   
          type:Object,//注意如果是对象,那下面的也要对象形式返回
          default(){
   
              return{
   
                 autoplay:true,//自己滚动
                 loop:true, //是否循环
                 pagination:{
   //显示点点
                     el:".swiper-pagination"
                 },
                 notNextTick:false//下一个点击
              }
          }
      },
      items:{
   
          type:Array,
          default(){
   
              return[
                //   {
   
                //       href:'',//跳转的连接
                //       src:""//显示的连接
                //   }   
              ]
          }
      }

  },
  components:{
   
      swiper,
      swiperSlide
  }
}
</script>
<style lang="scss">
// 使用~可以直接在nodle里面找
@import '~swiper/dist/css/swiper.css';
 img{
   
               width: 100%;
                height: 336px