内容：node.js，vue-cli，vuex，axios，postcss-pxtorem，lib-flexible，vant ，babel-plugin-import

1.安装脚手架工具：

npm install -g @vue/cli

版本检测：vue -V

2.创建项目

vue init webpack projectname

3.安装vant

npm install vant -S

4.安装babel-plugin-import，此组件用于实现按需加载

npm i babel-plugin-import -D


babelrc中添加配置

["import",

    {

       "libraryName": "vant",

       "libraryDirectory": "es",

       "style": true

    }

] 

main.js中按需引入vant组件
import {

    DatetimePicker,

    Button,

    List

} from 'vant';


// 挂载到vue实例上，使用vant组件

Vue.use(DatetimePicker)

    .use(Button)

    .use(List);


//使用组件
<van-button type="primary">按钮</van-button>




5、rem像素适配，安装两个插件


postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem




npm install postcss-pxtorem --save-dev

在.postcssrc.js中的plugins添加配置


'autoprefixer': {
  browsers: ['Android >= 4.0', 'iOS >= 7']
},
'postcss-pxtorem': {
  rootValue: 37.5,
  propList: ['*']
}



然后在项目中直接使用PX


.box{

   width: 300px;

 }
浏览器中自动解析成rem
.box{
　　width: 8rem
}




postcss-px2rem会将px转换为rem，rem单位用于适配不同宽度的屏幕，根据<html>标签的font-size值来计算出结果，1rem=html标签的font-size值。


lib-flexible 用于设置 rem 基准值




npm i  lib-flexible -S

在main.js中引入


import 'lib-flexible'




flexible会为页面根据屏幕自动添加<meta name='viewport' >标签，动态控制initial-scale，maximum-scale，minimum-scale等属性的值。


注意事项（important）: 由于flexible会动态给页面header中添加<meta name='viewport' >标签，所以务必请把目录 public/index.html 中的这个标签删除！！！


温馨提示： remUnit这个配置项的数值是多少呢？？？ 通常我们是根据设计图来定这个值，原因很简单，便于开发。假如设计图给的宽度是750，我们通常就会把remUnit设置为75，这样我们写样式时，可以直接按照设计图标注的宽高来1:1还原开发。


那为什么你在这里写成了37.5呢？？？那我们后面专门来讲！


之所以设为37.5，是为了引用像mint-ui这样的第三方UI框架，因为第三方框架没有兼容px2rem ，将remUnit的值设置为设计图宽度（这里为750px）75的一半，即可以1:1还原mint-ui的组件，否则会样式会有变化，例如按钮会变小。


既然设置成了37.5 那么我们必须在写样式时，也将值改为设计图的一半。


文章部分来源于https://www.cnblogs.com/lml2017/p/9953429.html
												


											
Vue-移动端开发全家桶的更多相关文章
	

    
						
  1. vue移动端开发全家桶
		
     一句命令搞定全家桶:  npm install vue-router vue-resource vuex --save  main.js配置: import Vue from 'vue' impor ...
    
		
    2. 
								
  2. vue 移动端开发
		
    1.vue开发中的路由: 关于require 与import 的区别 2.vue中的mock数据 3.
    
		
    3. 
						
  3. RxJava Android（RxAndroid） 开发全家桶
		
    RxJava 在 Android 应用开发中越来越流行,但是由于其门槛稍高,初次使用不免遇到很多问题,例如在 RxJava 常见的错误用法 和 不该使用 RxJava 的一些情况 中所描述的情况.为了 ...
    
		
    4. 
						
  4. [转]vue全面介绍--全家桶、项目实例
		
    慢慢了解vue及其全家桶的过程 原文http://blog.csdn.net/zhenghao35791/article/details/67639415 简介 “简单却不失优雅,小巧而不乏大匠”.  ...
    
		
    5. 
						
  5. vue全面介绍--全家桶、项目实例
		
    简介 “简单却不失优雅,小巧而不乏大匠”. 2016年最火的前端框架当属Vue.js了,很多使用过vue的程序员这样评价它,“vue.js兼具angular.js和react.js的优点,并剔除了它们 ...
    
		
    6. 
						
  6. Vue全家桶
		
    简介 “简单却不失优雅,小巧而不乏大匠”. Vue.js 是一个JavaScriptMVVM库,是一套构建用户界面的渐进式框架.它是以数据驱动和组件化的思想构建的,采用自底向上增量开发的设计. 为什么 ...
    
		
    7. 
						
  7. Vue 全家桶介绍
		
    Vue有著名的全家桶系列,包含了vue-router(http://router.vuejs.org),vuex(http://vuex.vuejs.org), vue-resource(https: ...
    
		
    8. 
						
  8. Vue全家桶介绍
		
    一直不清楚全家桶是什么玩意,上网搜了一下,才知道就是平时项目中使用的几个依赖包,下面分享一下 Vue 全家桶介绍 Vue有著名的全家桶系列,包含了vue-router(http://router.vu ...
    
		
    9. 
						
  9. Nuxt + Vue 全家桶
		
    引子 情由无中有,一旦有了,便万劫不复 简介 “简单却不失优雅,小巧而不乏大匠”. Vue.js 是一个JavaScriptMVVM库,是一套构建用户界面的渐进式框架.它是以数据驱动和组件化的思想构建 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 1级搭建类110-Oracle 18c SI FS（Windows Server 2019）公开
			
    Oracle 18c 单实例文件系统在Windows Server 2019上的安装 在线查看
    
			
    2. 
						
  2. 0级搭建类011-Oracle Linux 7.x安装(OEL 7.7) 公开
			
    项目文档引子系列是根据项目原型,制作的测试实验文档,目的是为了提升项目过程中的实际动手能力,打造精品文档AskScuti. 项目文档引子系列目前不对外发布,仅作为博客记录.如学员在实际工作过程中需提前 ...
    
			
    3. 
						
  3. 《Python学习手册 第五版》 -第14章 迭代和推导
			
    承接上一章for循环的讲解,迭代和推导,是对for循环的一种深入的探索和扩展 本章重点内容 1.迭代 1)什么是迭代?都有哪些分类 2)常规的使用方法 3)多遍迭代器VS单遍迭代器 2.列表推导 1) ...
    
			
    4. 
						
  4. jQuery---scrollTop和scrollLeft的方法
			
    scrollTop和scrollLeft的方法 <script src="jquery-1.12.4.js"></script> <script> ...
    
			
    5. 
						
  5. java中拦截器与过滤器
			
    注:文摘自网络,仅供自己参考 1.首先要明确什么是拦截器.什么是过滤器 1.1 什么是拦截器: 拦截器,在AOP(Aspect-Oriented Programming)中用于在某个方法或字段被访问之 ...
    
			
    6. 
						
  6. 我的翻译--GSMem:通过GSM频率从被物理隔离的计算机上窃取数据
			
    抽象概念 AG网络是指在物理上与公共互联网断开的网络.虽然近几年人们验证了入侵这类网络系统的可行性,但是从这种网络上获取数据仍然是一个有挑战的任务.在本文中,我们介绍GSMem,它是一个可以在蜂窝数据 ...
    
			
    7. 
						
  7. [转]shallow heap & retained heap
			
    所有包含Heap Profling功能的工具(MAT, Yourkit, JProfiler, TPTP等)都会使用到两个名词,一个是Shallow Size,另一个是 Retained Size.  ...
    
			
    8. 
						
  8. IntelliJ WebStorm 最新版 安装永久破解教程【最强，可用至2099年】
			
    IntelliJ WebStorm 2018.3.6安装永久破解[最强]  一. 在官网下载WebStorm安装包  链接:http://www.jetbrains.com/webstorm/down ...
    
			
    9. 
						
  9. 浅谈radis
			
    1.概述 Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API 从2010年3月15日起,Redis的开发工作由VM ...
    
			
    10. 
						
  10. VS2017连接MySQL数据库
			
    vs默认无法直接连接mysql,需要我们自己配置环境. 1.下载mysql-installer-community-8.0.18.0.msi 下载地址:https://dev.mysql.com/do ...
    
			
    11.