按照国际惯例先放效果图
项目结构搭建
首先修改app.vue
export default {
name: 'App'}" _ue_custom_node_="true">{
margin:0;
padding: 0;
list-style:none;
}" _ue_custom_node_="true">
修改main.js，引入rem公式文件
// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from './App'import router from './router'import './config/rem'Vue.config.productionTip = false/* eslint-disable no-new */new Vue({
el: '#app',
router,
components: { App },
template: ''})
在src文件夹下，创建文件夹config，新建文件rem.js
(function(){function a(){var b=document.documentElement.clientWidth;b=b>750?750:b;var c=b/750*100;document.getElementsByTagName("html")[0].style.fontSize=c+"px"}a();window.onresize=a})();这个代码可以去网上找，有很多，效果都一样，实现方法也差不太多
修改router/index.js 路由文件
浏览器访问：
移动端项目配置：
在根目录下的index.html中添加移动端meta头
安装px移动转换为rem单位的插件
cnpm install px2rem-loader --save-dev
(安装依赖，最好是加上--save-dev，否则重启的时候需要再次安装)
在build文件夹下的utils.js中配置：
remUnit设置原理：
如果设计稿给的是375，就在调试工具375页面下查看html元素的font-size
显示是50，那么就设置50
如果给的设计稿是750，那么就调到750尺寸下，查看html的font-size，来设置remUnit
然后重启项目即可生效
在detail.vue中设置宽度单位为px作为测试
浏览器里观察到单位自动转换为了rem
不想要转为rem单位的，就在后面加上/*no*/
效果
sketch设计稿介绍：
布局一般都是有设计稿的，mac推荐sketch
windows就pxcook或者photoshop，如果想体验sketch，可以在windows上装mac虚拟机（这个我晚上研究研究再发一篇博）
修改项目总体样式 app.vue
export default {
name: 'App'}" _ue_custom_node_="true">{
margin:0;
padding: 0;
list-style:none;
}
a{
text-decoration: none;
color:#333;
}" _ue_custom_node_="true">
components组件：
共用的组件一般都作为组件来实现
头部组件
创建header文件夹下的index.vue，放代码
推荐课程实战职业路线// scoped表示样式只在该组件中生效，不会影响其他页面.c-header{
position:fixed;
width:375px;
top:0;
background:#fff;
box-shadow:0 2px 4px 0 rgba(0,0,0,.1);
}
.header-ul{
font-size:0;
}
.header-ul li{
display: inline-block;
padding-left:20px;
font-size:16px;
color:#71777d;
height:44px;
line-height:44px;
}
.header-ul img{
width:18px;
}
.header-ul .class-search{
padding-left:60px;
}" _ue_custom_node_="true">
创建列表组件
list文件夹下的index.vue
<li v-for="item in courseList">{{item.title}}{{item.msg}}export default {
props:{//过滤器 courseList:Array
}
}" _ue_custom_node_="true">.c-course{
padding:24px 0;
background:#fff;
}
.c-course li{
position: relative;
width:335px;
height:72px;
margin:0 auto 24px;
}
.c-course li img{
position:absolute;
width:108px;
border-radius:5px;
}
.c-course li h1{
font-size:15px;
padding-left:124px;
}
.c-course li p{
font-size:14px;
padding-left:124px;
}
" _ue_custom_node_="true">
底部组件
创建footer目录下的index.vue
首页发现下载我的.footer{
position:fixed;
z-index:3;
width:375px;
background:#fff;
border-top:1px solid #f3f5f7;
bottom:0;
}
.footer-ul{
display:flex;
}
.footer-ul li{
display:flex;
height:50px;
flex:1;
flex-direction: column;
justify-content: center;
align-items: center;
font-size:10px;
}
.footer-ul li img{
width:24px;
}" _ue_custom_node_="true">
首页文件home.vue
<li v-for="item in webList">{{item.name}}//导入组件import Header from '@/components/header/'import List from '@/components/list/'import Footer from '@/components/footer/'// 图片必须通过import来导入import webImg from '@/assets/web.png'import webserviceImg from '@/assets/webservice.png'import moveImg from '@/assets/move.png'import dataImg from '@/assets/data.png'import bigdataImg from '@/assets/bigdata.png'import course1 from '@/assets/course1.jpg'import course2 from '@/assets/course2.jpg'import course3 from '@/assets/course3.jpg'import course4 from '@/assets/course4.jpg'import course5 from '@/assets/course5.jpg'export default {
data(){return{
webList:[],
courses:[]
}
},
mounted(){//值的初始化this.webList=[{
imgUrl:webImg,
name:"前端开发"},
{
imgUrl:webserviceImg,
name:"后端开发"},
{
imgUrl:moveImg,
name:"移动开发"},
{
imgUrl:dataImg,
name:"数据库"},
{
imgUrl:bigdataImg,
name:"云计算"}];this.courses=[{
imgUrl:course1,
title:'实例秒解sed和ak的秘密',
msg:'中级，330人在学'},
{
imgUrl:course2,
title:'实例秒解sed和ak的秘密',
msg:'中级，330人在学'},
{
imgUrl:course3,
title:'实例秒解sed和ak的秘密',
msg:'中级，330人在学'},
{
imgUrl:course4,
title:'实例秒解sed和ak的秘密',
msg:'中级，330人在学'},
{
imgUrl:course5,
title:'实例秒解sed和ak的秘密',
msg:'中级，330人在学'},{
imgUrl:course1,
title:'实例秒解sed和ak的秘密',
msg:'中级，330人在学'},
{
imgUrl:course2,
title:'实例秒解sed和ak的秘密',
msg:'中级，330人在学'},
{
imgUrl:course3,
title:'实例秒解sed和ak的秘密',
msg:'中级，330人在学'}]
},
components:{//注册组件'v-header':Header,'v-list':List,'v-footer':Footer
}
}" _ue_custom_node_="true">.home .nav{
height:100px;
padding-top:44px;
background:#f3f5f7;
overflow-x:scroll;
white-space: nowrap;
font-size:0;
}
.nav li{
width:88px;
display:inline-block;
text-align: center;
font-size:14px;
}
.nav li img{
display:block;
width:32px;
margin:20px auto 12px;
}" _ue_custom_node_="true">
详情页文件 detail.vue
Copyright © 2004-2024 Ynicp.com 版权所有 法律顾问:建纬(昆明)律师事务所 昆明市网翼通科技有限公司 滇ICP备08002592号-4
