专注前端开发和vps技术交流的博客-纸飞机准备:
- 基于cli3
- 编辑器vscode
启动项目
vue create .//如果在vue_maoyan目录打开的终端就用
vue create vue_maoyan//如果没有这个目录就用,会自动建一个目录,项目安装好就cd进入目录根据提示:项目开启用
yarn servesrc目录下配置常规模块开发目录
- 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变量的定义
