webpack + vue-cli 搭建 vue 项目的流程

一、webpack + vue-cli 搭建 vue 项目的流程

保证先安装 Node 环境,然后使用下载Node时自带的 npm (node 的包管理工具) 下载各种依赖,比如:vue-cli,安装 vue-cli后才能使用 vue 命令来初始化项目

1.全局安装vue的脚手架:vue-cli

   npm install vue-cli -g

2.使用初始化 vue 项目: (使用 webpack模板搭建项目)

   vue init webpack 假如名字:my-project

3.进入刚刚新建的项目文件:

   cd

4.安装vue项目所需要的依赖

   npm install

5.运行启动项目:

   npm run dev
    
6.将代码push到git仓库上
  
   git仓库新建一个名称相同的项目(my-project),然后将代码push到git上。

到此为止整个项目基本结构搭建完成。

二、移动web页面的书写

1.静态资源放在statis里面
2.移动web的适配使用rem

var designWidth=750;//ui稿纸的大小
var fontSize=100;//先在设计稿取100px,然后计算在真正的屏幕上显示多少px
function fontsize(){
    var relWidth=document.documentElement.clientWidth;//获得屏幕实际大小
    if(relWidth<320){
        relWidth=320;//小于320的按320适配
    }
    else if(relWidth>640){
        relWidth=640;//大于640的按640的适配
    }
    var relfontSize=fontSize*relWidth/designWidth;//计算100px在真正的屏幕上显示多少px
    document.getElementsByTagName("html")[0].style.fontSize=relfontSize+"px";
}
fontsize();
window.onresize=fontsize;
//1rem等于稿纸的100px,问宽70是多少rem?那不就是70/100rem
//然后之后在实际的用,用测量的高度100/100=1rem.  宽 高 字体 margin padding 都可以使用。

将改文件封装成adapter.js,在html的head里面调用,防止页面一开始按照原始的html的大小渲染。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值