目录
产品预览
环境搭建
初始化
app.vue页面改动
<template>
<div id="app">
<!-- 隐藏 -->
<!-- <img src="./assets/logo.png"> -->
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
/* 隐藏 */
/*#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}*/
*{
margin: 0;
padding: 0;
list-style: none;
}
</style>
VUE中移动端适配插件
方法一：
main.js引入rem.js
import Vue from 'vue'
import App from './App'
import router from './router'
import './config/rem' //新增
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
在src下创建config，config目录下创建rem.js
//方法一
// !function(n){
// var e=n.document,
// t=e.documentElement,
// i=720,
// d=i/100,
// o="orientationchange"in n?"orientationchange":"resize",
// a=function(){
// var n=t.clientWidth||320;n>720&&(n=720);
// t.style.fontSize=n/d+"px"
// };
// e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1))
// }(window);
//方法二
window.onload = function(){
/*720代表设计师给的设计稿的宽度，你的设计稿是多少，就写多少;100代表换算比例，这里写100是
为了以后好算,比如，你测量的一个宽度是100px,就可以写为1rem,以及1px=0.01rem等等*/
getRem(720,100)
};
window.onresize = function(){
getRem(720,100)
};
function getRem(pwidth,prem){
var html = document.getElementsByTagName("html")[0];
var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
html.style.fontSize = oWidth/pwidth*prem + "px";
}方法二：
使用lib-flexible插件，下载
cnpm i lib-flexible --savemain.js引入插件
import 'lib-flexible/flexible'方法一、方法二成功后，改变窗口宽度，html上的字体大小会自动改变。如下
修改index.html （增加meta name=viewport节点）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
<title>my-project</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>引入依赖包(自动将px转化为rem)
cnpm install px2rem-loader配置px2rem-loader
在build文件中找到util.js，将px2rem-loader添加到cssLoaders中，如：
//新增
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 37.5//这个是重点，设计稿是750px
}
}
// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader, px2remLoader]//修改
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}宽度设置20px自动转换成了0.266667rem
sketch设计稿
暂时只支持OS系统，windos请使用PS
首页
home.vue
<template>
<div class="home-page">
<v-header></v-header>
<ul class="nav">
<li v-for="item in arrList" v-bind:key="item.name">
<img :src="item.imgUrl">
<span>{{item.name}}</span>
</li>
</ul>
<v-course :arrList='array'></v-course>
<v-footer></v-footer>
</div>
</template>
<script>
import Header from '@/components/header/'
import webApp from '@/assets/web.png'
import move from '@/assets/move.png'
import webservice from '@/assets/webservice.png'
import data from '@/assets/data.png'
import bigdata from '@/assets/bigdata.png'
import Course from '@/components/course'
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";
import Footer from "@/components/footer"
export default {
data(){
return{
arrList: [],
array: []
}
},
mounted() {
this.arrList = [{
imgUrl: webApp,
name: '前端开发'
},
{
imgUrl: webservice,
name: '后端开发'
},
{
imgUrl: move,
name: '移动开发'
},
{
imgUrl: webservice,
name: '数据库'
},
{
imgUrl: webservice,
name: '云端开发'
}];
this.array = [
{
imgUrl: course1,
title: '实例妙解Sed和Awk的秘密',
msg: '中级 · 330人在学'
},
{
imgUrl: course2,
title: '实例妙解Sed和Awk的秘密',
msg: '中级 · 330人在学'
},
{
imgUrl: course3,
title: '实例妙解Sed和Awk的秘密',
msg: '中级 · 330人在学'
},
{
imgUrl: course4,
title: '实例妙解Sed和Awk的秘密',
msg: '中级 · 330人在学'
},
{
imgUrl: course5,
title: '实例妙解Sed和Awk的秘密',
msg: '中级 · 330人在学'
},
{
imgUrl: course1,
title: '实例妙解Sed和Awk的秘密',
msg: '中级 · 330人在学'
},
{
imgUrl: course1,
title: '实例妙解Sed和Awk的秘密',
msg: '中级 · 330人在学'
}
];
},
components: {
'v-header': Header,
'v-course': Course,
'v-footer': Footer
}
}
</script>
<style scoped>
.home-page .nav{
height: 100px;
padding-top: 44px;
background: #f3f5f7;
white-space: nowrap;
overflow-x: scroll;
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;
}
</style>
自定义组件 header
注意：使用display: inline-block; 行之间的换行将会产生一个空隙。可以使用缩进为一行解决。也可以对齐父元素进行设置font-size: 0;就可以解决
<template>
<div class="c-header">
<ul class="header-ul">
<li>推荐</li>
<li>课程</li>
<li>实战</li>
<li>职业路径</li>
<li class="header-seach">
<img src="../../assets/seach.png">
</li>
<li class="header-history">
<img src="../../assets/history.png">
</li>
</ul>
</div>
</template>
<style scoped>
.c-header{
position: fixed;
z-index: 3;
width: 375px;
top: 0;
background: #fff;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.10);
}
.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 .header-seach{
padding-left: 60px;
}
</style>自定义组件 course
<template>
<ul class="c-course">
<router-link to="/detail" >
<li v-for='(item, index) in arrList' v-bind:key='index'>
<img :src="item.imgUrl">
<h1>{{item.title}}</h1>
<p>{{item.msg}}</p>
</li>
</router-link>
</ul>
</template>
<script>
export default {
props:{
arrList: Array
}
}
</script>
<style scoped>
.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;
color: #2B333B;
}
.c-course li p{
font-size: 12px;
padding: 8px 0 0 124px;
color: #71777D;
}
</style>自定义组件 footer
<template>
<div class="c-footer">
<ul class="footer-ul">
<li>
<img src="../../assets/home.png">
<span>首页</span>
</li>
<li>
<img src="../../assets/sea.png">
<span>发现</span>
</li>
<li>
<img src="../../assets/download.png">
<span>下载</span>
</li>
<li>
<img src="../../assets/me.png">
<span>我的</span>
</li>
</ul>
</div>
</template>
<style scoped>
.c-footer{
position: fixed;
z-index: 3;
width: 375px;
background: #fff;
border-top: 1px solid #f3f6f7;
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;
}
</style>详情页
detail.vue
<template>
<div class="detail-page">
<div class="video">
<video src="http://v3.mukewang.com/shizhan/59f8498ae420e5be578b459b/H.mp4" controls="controls"></video>
<router-link to="/">
<div class="video-back"><</div>
</router-link>
</div>
<ul class="nav">
<li v-for="item in arr" v-bind:key='item'>{{item}}</li>
</ul>
<div class="title">
<h1>{{title}}</h1>
<p>{{des}}</p>
</div>
<ul class="question">
<li v-for="(item, index) in arrQuestion" v-bind:key="index">
<h1>{{arrTitle[index]}}</h1>
<p v-html="item"></p>
</li>
</ul>
</div>
</template>
<script>
export default{
data(){
return{
arr: [],
title: '',
des: '',
arrQuestion:[],
arrTitle: ["课程须知", "老师告诉你能学到什么？"]
}
},
mounted(){
this.arr = ["章节", "详情", "评论", "问答", "记录"];
this.title = "iOS基础教程之-Camera摄像头";
this.des = "从实例出发介绍我们的Camera，可以实现Camera属性检测，照片拍摄，视频录制，图片展示，录制视频";
this.arrQuestion = ["本课程适合客户端产品经理，研发人员以及对iOS新特性感兴趣的人群", `
(1)数码相机相关的所有API<br/>
(2)利用Camera实现相机的各种属性检测<br/>
(3)利用Camera拍照、保存、遍历相册等功能<br/>
(4)利用Camera拍摄视频、视频剪切功能`];
}
}
</script>
<style scoped>
.video{
position: relative;
height: 191px;
}
.video video{
width: 100%;
height: 100%;
}
.video-back{
position: absolute;
top: 21px;
left: 16px;
text-align: center;
color: #fff;
font-size: 18px;
line-height: 32px;
border-radius: 3px;
width: 32px;
height: 32px;
background: rgba(0,0,0,.5);
}
.nav{
position: relative;
z-index: 1;
display: flex;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.10);
}
.nav li{
flex: 1;
text-align: center;
height: 44px;
line-height: 44px;
background: #fff;
font-size: 14px;
}
.title{
padding: 24px 0 0 20px;
margin-bottom: 8px;
}
.title h1{
font-size: 16px;
color: #2B333B ;
}
.title p{
font-size: 14px;
color: #71777D;
padding : 16px 0 34px;
width: 335px;
}
.question{
padding: 20px;
background: #fff;
}
.question li h1{
font-size: 14px;
color: #2B333B;
}
.question li p{
padding:12px 0 0 30px;
font-size: 14px;
color: #71777D ;
}
.question li:nth-child(1){
padding-bottom: 24px;
}
</style>vue-cli 移动端项目如何在手机上调试预览
- 电脑和手机连接到同一个WIFI
- 查询本地IP地址 ( WIN+R，输入cmd回车，打开命令提示符，输入ipconfig，查看本地IPv4 )
- 修改本地项目中IP地址 ( 找到项目中config文件夹，下面index.js文件打开。 找到host: ‘localhost’, 改为0.0.0.0 )
- 重新启动项目( 重新启动项目后，浏览器地址输入本机地址http://192.168.0.107:8080 访问项目PC端项目； )
资源下载
联系方式
+ V 17664082698
806
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
