内容：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. 小总结：快速幂+贪心————Bit Mask____UVA 10718 多多去理解去温习哦！
			
    传送门:https://vjudge.net/problem/UVA-10718 Preview: bitstream:a flow of data in binary form. in bit-wi ...
    
			
    2. 
						
  2. Dubbo-服务注册中心之AbstractRegistry
			
    在dubbo中,关于注册中心Registry的有关实现封装在了dubbo-registry模块中.提供者(Provider)个消费者(Consumer)都是通过注册中心进行资源的调度.当服务启动时,p ...
    
			
    3. 
						
  3. git配置多仓库
			
    git配置多仓库 github , gitee , coding , gitlab , gitlab.company ..... 真TM多 . 真TM多 . 真TM多 . 生成ssh 生成ssh 密钥 ...
    
			
    4. 
						
  4. AI: Uninformed search
			
    What is a search problem: A solution to a search problem is a sequence of actions (a path) from s0 t ...
    
			
    5. 
						
  5. MyEclipse 运行弹出A Java Exception has occurred.
			
    问题描述 A Java Exception has occurred. 问题原因 这个问题是由较高版本的JDK编译的java class文件试图在较低版本的JVM上运行而产生的错误
    
			
    6. 
						
  6. 添加Usb3.0驱动到win7/8/10的usb安装光盘
			
    文章中所有需要使用到的软件和资源在文章末尾的网盘连接中有下载 Run the DISM GUI Tool Right-click on DISM GUI.exe and select Run as A ...
    
			
    7. 
						
  7. 零基础学习Python web开发、Python爬虫、Python数据分析，从基础到项目实战！
			
    随着大数据和人工智能的发展,目前Python语言的上升趋势比较明显,而且由于Python语言简单易学,所以不少初学者往往也会选择Python作为入门语言. Python语言目前是IT行业内应用最为广泛 ...
    
			
    8. 
						
  8. 【资源分享】Gmod日志记录脚本
			
    *----------------------------------------------[下载区]----------------------------------------------*  ...
    
			
    9. 
						
  9. Oracle用户权限授权以及索引、同义词、分区
			
    本文为原创,如需转载,请标明出处 http://www.cnblogs.com/gudu1/p/7601765.html ---- 用户权限 1.创建表空间 (创建用户之前需要创建表空间和临时表空间, ...
    
			
    10. 
						
  10. java  List 排序，升序，降序
			
    import java.util.*; public class EntrySets { public static void main(String[] args) { Map<Object, ...
    
			
    11.