vue-cli3 开发移动端页面准备工作

先安装node 环境以及 @vue-cli

npm install -g @vue-cli
// 创建项目
vue create project-name

1. 先在/public/index.html 添加meta 标签

视口宽度等于设备宽度，初始缩放为1，最大最小缩放为1，禁止用户缩放页面
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">   

2. 移动端适配使用 vw + rem 去处理

// 如果设计稿为750 ，1rem = 100px
html{font-size:calc(100vw/7.5);}

// 适配pc端页面宽度，不至于页面布局混乱
@media only screen and (min-width: 1200px) {
			html {
					width: 520px;
					font-size: calc(520px/7.5);
					margin: 0 auto;
			}
	}

3. vue-cli3静态文件都放在 public文件中，使用绝对路径引用这些文件，这个取决于你vue.config.js中publicPath的配置，默认的是/。