前端
一点也不简单

Vue.js项目启动流程(猫眼项目)

准备:

  1. 基于cli3
  2. 编辑器vscode

启动项目

vue create .//如果在vue_maoyan目录打开的终端就用
vue create vue_maoyan//如果没有这个目录就用,会自动建一个目录,项目安装好就cd进入目录

根据提示:项目开启用

yarn serve

src目录下配置常规模块开发目录

  • assets —资源目录
  • components —公共组件目录
  • filters —过滤器目录(用来处理数据格式)
  • pages —页面组件目录
  • router —路由目录
  • store —vuex目录
  • utils —自定义插件目录

重置项目

将初始创建的项目中多余的东西清了,和hellowword有关的文件和配置项

页面构建

header和footer

根据猫眼的官网来看 ,头和底部可能是公共的,所以可以将头和尾分成两个组件模块写入components里

这里我在components里又建了个common目录,下面放了两个组件

再去组件注册

APP.vue里注册使用组件

<script>
import MyHeader from 'Components/common/MyHeader'
import MyFooter from 'Components/common/MyFooter'

export default {
  name: 'app',
  components: {
    MyHeader,MyFooter
  }
}
</script>
<style lang="stylus">
  #app
    height 100%
    display flex
    flex-direction column
</style>
<template>
  <div id="app">
    <my-header></my-header>
     <router-view></router-view>
    <my-footer></my-footer>
  </div>
</template>

移动端rem单位布局

设置rem:utils目录下建立rem.js

/* 
  使用js来规定rem    px -> rem

  750/viewport的宽度 = 设计稿的字体大小(100px)/ 模拟器中的字体大小

  模拟器中字体大小(rem ) = viewport*设计稿/750

  看参考的东西,
*/

function font () {
    document.documentElement.style.fontSize = document.documentElement.clientWidth/3.75  + 'px'
  }
  
  font()
  
  // 就可以检测到不同的设备
  window.onresize = font 

main.js里全局使用

// 引入rem
import 'Utils/rem'

重置样式

我们只是定义了两个组件,但是还没有详细的写里面的内容,但再此之前我们要引入重置样式(reset.css, Normalize.css )

这个写在assets目录下

在main.js文件中引入(全局使用)

//引入reset.styl文件
import 'Css/reset.styl'

再是详细的写header和foot

MyHeader:

<template>
  <div class="header-box">
    猫眼电影
  </div>
</template>
<style lang="stylus" scoped>
  @import '~Css/_variable.styl'
  @import '~Css/_border.styl'
  .header-box 
    background #e54847
    height .5rem
    color #fff 
    text-align center
    font-size .18rem
    line-height .5rem
    border-bottom 1px solid #e54847
</style>

注意: (遇到以下问题)

  • 1px问题,设置1像素会放大缩小会有点问题

解决方法:用了border.styl里的样式,这个文件可以解决

  • css里引入css文件发现路径错误

解决方法:配置路径别名,因为既然已经配置了路径别名,我们就一次性都配置了

/* 
  webpack配置
*/
var path = require('path')

function resolve (pathUrl){
  return path.resolve(__dirname,pathUrl)
}

module.exports = {
  chainWebpack: function ( config ){
    config.resolve.alias
      .set('Css',resolve('src/assets/css'))
      .set('Components',resolve('src/components'))
      .set('Utils',resolve('src/utils'))
      .set('Store',resolve('src/store'))
      .set('Pages',resolve('src/pages'))
      .set('Filters',resolve('src/filters'))
      .set('Img',resolve('src/assets/img'))
  }
}
border($border-width = 1px, $border-color = #ccc, $border-style = solid, $radius = 0)
  // 为边框位置提供定位参考
  position: relative;

  if $border-width == null
    $border-width: 0;

  border-radius: $radius;

  &::after
    // 用以解决边框layer遮盖内容
    pointer-events: none;
    position: absolute;
    z-index: 999;
    top: 0;
    left: 0;
    // fix当元素宽度出现小数时,边框可能显示不全的问题
    // overflow: hidden;
    content: "\0020";
    border-color: $border-color;
    border-style: $border-style;
    border-width: $border-width;
    
    // 适配dpr进行缩放
    @media (max--moz-device-pixel-ratio: 1.49), (-webkit-max-device-pixel-ratio: 1.49), (max-device-pixel-ratio: 1.49), (max-resolution: 143dpi), (max-resolution: 1.49dppx)
      width: 100%;
      height: 100%;
      if $radius != null {
        border-radius: $radius;
      }
    
    @media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49), (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49),(min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49),(min-resolution: 144dpi) and (max-resolution: 239dpi),(min-resolution: 1.5dppx) and (max-resolution: 2.49dppx)
      width: 200%;
      height: 200%;
      transform: scale(.5)
      if $radius != null {
        border-radius: $radius * 2;
      }
    
    @media (min--moz-device-pixel-ratio: 2.5), (-webkit-min-device-pixel-ratio: 2.5),(min-device-pixel-ratio: 2.5), (min-resolution: 240dpi),(min-resolution: 2.5dppx)
      width: 300%;
      height: 300%;
      transform: scale(.33333)
      if $radius != null {
        border-radius: $radius * 3;
      }

    transform-origin: 0 0;

MyFooter:

<template>
  <div class="footer-box">
    <ul>
      <router-link tag = "li" to = "/movie/n-hot" active-class="active">
        <svg width="25" height="25" viewBox="0 0 50  50" xmlns="http://www.w3.org/2000/svg"><title>电影1</title><g fill="#696969" fill-rule="evenodd"><path d="M24.994 47c-.71 0-1.422-.034-2.136-.102C12.445 45.913 4.14 37.645 3.11 27.24c-.657-6.63 1.65-13.115 6.332-17.796 4.68-4.68 11.162-6.992 17.796-6.333 10.36 1.027 18.624 9.29 19.65 19.65.592 5.984-1.192 11.796-5.022 16.365-.162.193-.158.463.007.63l3.425 3.424c.586.584.586 1.534 0 2.12-.586.586-1.535.586-2.12 0l-3.426-3.425c-1.274-1.273-1.353-3.284-.185-4.677 3.307-3.946 4.847-8.97 4.335-14.142-.886-8.942-8.018-16.074-16.96-16.96-5.732-.562-11.336 1.426-15.38 5.47-4.042 4.042-6.034 9.647-5.467 15.378.89 8.98 8.058 16.117 17.045 16.968 3.867.37 7.68-.417 11.03-2.267.725-.4 1.637-.138 2.037.588.4.725.137 1.638-.588 2.038-3.26 1.8-6.896 2.73-10.626 2.73"></path><path d="M28 16c0 1.657-1.343 3-3 3s-3-1.343-3-3 1.343-3 3-3 3 1.343 3 3M28 34c0 1.657-1.343 3-3 3s-3-1.343-3-3 1.343-3 3-3 3 1.343 3 3M34 28c-1.657 0-3-1.343-3-3s1.343-3 3-3 3 1.343 3 3-1.343 3-3 3M16 28c-1.657 0-3-1.343-3-3s1.343-3 3-3 3 1.343 3 3-1.343 3-3 3"></path></g></svg>
        <b> 电影 </b>
      </router-link>
      <router-link tag = "li" to = "/theaters" active-class="active">
        <svg width="25" height="25" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg"><title>影院1</title><g fill="#696969" fill-rule="evenodd"><path d="M40.5 45h-31c-.83 0-1.5-.67-1.5-1.5S8.67 42 9.5 42h31c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5M9.4 8C8.077 8 7 9.077 7 10.4v23.217l7.484-11.388c.27-.414.728-.666 1.22-.677.517-.027.96.222 1.25.622.098.133 2.608 3.435 7.884 3.435 5.358 0 8.192-3.738 8.22-3.776.293-.396.75-.633 1.255-.605.492.015.944.272 1.21.686L43 33.53V10.395C43 9.075 41.926 8 40.606 8H9.4zm35.1 32.13c-.5 0-.98-.25-1.26-.687l-9.214-14.31c-1.664 1.47-4.75 3.477-9.188 3.477-4.353 0-7.278-1.805-8.872-3.174l-9.212 14.02c-.364.553-1.05.802-1.684.612-.635-.19-1.07-.774-1.07-1.437V10.4C4 7.422 6.422 5 9.4 5h31.206C43.58 5 46 7.42 46 10.395V38.63c0 .667-.438 1.253-1.077 1.44-.14.042-.282.06-.423.06z"></path></g></svg>
        <b> 影院 </b>
      </router-link>
      <router-link  tag = "li" to = "/mine" active-class="active">
        <svg width="25" height="25" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg"><title>我的1</title><g fill="#696969" fill-rule="evenodd"><path d="M19.916 35.913c-.014-.016-.02-.036-.033-.05-.314-.32-.737-.455-1.153-.432C13.586 33.066 10 27.9 10 21.908 10 13.687 16.728 7 25 7c8.27 0 15 6.687 15 14.907 0 8.22-6.73 14.906-15 14.906-1.787 0-3.493-.328-5.084-.9zm14.502 1.225C39.558 33.98 43 28.343 43 21.908 43 12.032 34.925 4 25 4S7 12.033 7 21.907c0 6.657 3.68 12.466 9.113 15.552l-6.086 5.97c-.59.58-.6 1.53-.02 2.12.294.3.682.45 1.07.45.38 0 .76-.143 1.052-.43l6.916-6.785c1.867.654 3.865 1.028 5.954 1.028 2.324 0 4.54-.455 6.58-1.256l7.15 7.014c.292.287.672.43 1.05.43.39 0 .78-.15 1.072-.45.58-.59.57-1.54-.02-2.12l-6.414-6.292z"></path><path d="M30.358 25.068c-.77-.31-1.642.064-1.95.832-.554 1.375-1.89 2.263-3.408 2.263-1.503 0-2.835-.877-3.395-2.234-.316-.766-1.19-1.13-1.96-.815-.765.316-1.13 1.193-.813 1.96 1.024 2.483 3.446 4.088 6.168 4.088 2.75 0 5.178-1.627 6.19-4.144.31-.77-.063-1.643-.832-1.952"></path></g></svg>
        <b> 我的 </b>
      </router-link>
    </ul>
  </div>
</template>
<style lang="stylus" scoped>
  @import '~Css/_variable.styl'
  @import '~Css/_border.styl'
  .footer-box 
    height .48rem 
    font-size .2rem
    border 1px 0 0 0 , $borderColor
    background #fff
    ul 
      display flex 
      justify-content space-around
      height 100%
      li 
        flex 1
        display flex 
        flex-direction column
        align-items center
        padding-top .04rem
          
        svg 
          margin-bottom .04rem
        b 
          font-size .1rem
          color #666
        &.active
          svg 
            g 
              fill $themeColor
          b   
            color $themeColor
      
</style>

_varible.styl里放的是css变量的定义

赞(1) 打赏
未经允许不得转载:专注前端开发和vps技术交流的博客-纸飞机 » Vue.js项目启动流程(猫眼项目)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

微信扫一扫打赏