内容：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. Android View框架的layout机制
			
    概述 Android中View框架的工作机制中,主要有三个过程: 1.View树的测量(measure) Android View框架的measure机制 2.View树的布局(layout)Andr ...
    
			
    2. 
						
  2. 《图解HTTP》笔记
			
    web网络基础 概述 Web是建立在HTTP(超文本传输协议)上通信的 通常使用的网络(包括互联网)是在TCP/IP基础上运作的,HTTP属于它的内部子集 TCP/IP协议 协议族 计算机与网络设备要 ...
    
			
    3. 
						
  3. Csla  One or more properties are not registered for this type
			
    在实际运行中,好好运行的程序出现了以下问题: 2019-12-27 10:40:00,164 [DefaultQuartzScheduler_Worker-2] ERROR IBeam.BCPool. ...
    
			
    4. 
						
  4. 记录 Docker 的学习过程 （数据挂载）
			
    docker 存储篇 容器中的存储是分层的, 在容器中,如果我们要创建一个文件,会在文件的最上层(可写层)创建 容器中内置的文件,默认来讲是只读的,只有自己创建的文件才是可写状态 比如说 /etc/p ...
    
			
    5. 
						
  5. Unable to create initial connections of pool. spring boot mysql
			
    Unable to create initial connections of pool. 在链接url里添加 将useSSL=true改为useSSL=false 只能说明服务器没有打开SSL功能
    
			
    6. 
						
  6. 解决lucene更新删除无效的问题
			
    个人博客 地址:http://www.wenhaofan.com/article/20180921233809 问题描述 在使用deleteDocuments,updateDocument方法根据id ...
    
			
    7. 
						
  7. bootstrap资料索引
			
    中文手册  :  http://w3c.3306.biz/bootstrap_forms/show-25-64-1.html
    
			
    8. 
						
  8. Java实现图形界面的三部曲及IDE中的窗口设计
			
    设计和实现图形用户界面的工作主要有以下几点: • (1)创建组件(Component) • 创建组成界面的各种元素,如按钮.文本框等.• (2)指定布局(Layout) • 根据具体需要排列它们的位置 ...
    
			
    9. 
						
  9. 训练20191007 2017-2018 ACM-ICPC Latin American Regional Programming Contest
			
    2017-2018 ACM-ICPC Latin American Regional Programming Contest 试题地址:http://codeforces.com/gym/101889 ...
    
			
    10. 
						
  10. jQuery jqgrid 应用实例
			
    1.html <div class="ibox-content"> <div class=\"jqGrid_wrapper\"> < ...
    
			
    11.