VUE搭建课程首页

目录

产品预览

环境搭建

初始化

VUE中移动端适配插件

​

sketch设计稿

首页 

home.vue

自定义组件 header

自定义组件 course

详情页

detail.vue

vue-cli 移动端项目如何在手机上调试预览

资源下载

联系方式

---

产品预览

 

环境搭建

初始化

app.vue页面改动

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: ''
})

在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 --save

main.js引入插件

import 'lib-flexible/flexible'

方法一、方法二成功后，改变窗口宽度，html上的字体大小会自动改变。如下

修改index.html  （增加meta name=viewport节点）

引入依赖包(自动将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

自定义组件 header

注意：使用display: inline-block; 行之间的换行将会产生一个空隙。可以使用缩进为一行解决。也可以对齐父元素进行设置font-size: 0;就可以解决

自定义组件 course

自定义组件 footer

详情页

detail.vue

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端项目； )

资源下载

webApp实战首页及详情(全知识点覆盖)

联系方式

+ V  17664082698