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的大小渲染。