Vue脚手架的安装,rem适配问题

191 阅读1分钟

了解vue的最新版本,和脚手架的最新版本;

vue最新版本:2.6 vue-cli:4.3.1;

创建项目的方式有两种:

第一种的就是用cmd命令框来下载;

vue create 项目名

还有一种的就是用我们的vue ui提供的可视化界面,用鼠标操作来下载;

vue ui自动弹出可视化页面

下载完后cd进入项目目录

并且,我们可以通过手机来检测我们的项目,但手机必须和电脑在同一域名下;

 http://192.168.0.104:8080/   这种域名来在手机上测试

通过liantu.com这个网站中可通过二维码来扫码测试;

还有就是说了手机端的适配问题:

主流适配方式:rem、vw、vh、flex、百分比、媒体查询来适配

rem老大也提供了自己封装的rem适配文件,

(function (doc, win) {
    var docEl = doc.documentElement,
            //检测横竖屏
        resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            //屏幕的宽度
            docEl.style.fontSize = 100 * (clientWidth / 375) + "px";
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener("DOMContentLoaded", recalc, false);
})(document, window);

也提供了网上的方案

github.com/amfe/lib-fl…