内容：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. mysql 获取当前时间加上一个月
			
    select DATE_ADD(NOW(), interval 1 MONTH) NOW()此处必须为时间格式 date_add() 增加 date_sub()减少 month 月份 minute 分 ...
    
			
    2. 
						
  2. dva-loading 实践用法
			
    dva 中页面过渡效果封装的很好,下面介绍常用的两个 js 库. 之前对 dva-loading 理解存在误区,认为只要在 index.js 中配置一下就没事了,事实上 dva-loading 只是提 ...
    
			
    3. 
						
  3. js前后端交互
			
    1.前后端交互模式 2.promise用法 (1)异步调用 (2)ajax回顾 (3).promise 优点:可以解决回调地狱(多层异步调用嵌套问题)(解决代码可读性低的问题) 提供简洁的api (4 ...
    
			
    4. 
						
  4. LaTeX技巧010：LaTtex中如何给每个句子加序号？
			
    效果图: 代码: \documentclass{article} \newcounter{sentence} \renewcommand\thesentence{\textsuperscript{\a ...
    
			
    5. 
						
  5. Codeforce 230A - Dragons （sort）
			
    Kirito is stuck on a level of the MMORPG he is playing now. To move on in the game, he's got to defe ...
    
			
    6. 
						
  6. Codeforce 588A - Duff and Meat （贪心）
			
    Duff is addicted to meat! Malek wants to keep her happy for n days. In order to be happy in i-th day ...
    
			
    7. 
						
  7. 杭电oj_2035——人见人爱A^B（java实现）
			
    原题链接:http://acm.hdu.edu.cn/showproblem.php?pid=2035 思路:(网上学来的,偏向数学的不咋懂/捂脸)每次乘法的时候都取后三位(可能有些含糊,直接看代码吧 ...
    
			
    8. 
						
  8. Java中8进制数和16进制数的表示方法
			
    由于数据在计算机中的表示,最终以二进制的形式存在,所以有时候使用二进制,可以更直观地解决问题.  但,二进制数太长了.比如int   类型占用4个字节,32位.比如100,用int类型的二进制数表达将 ...
    
			
    9. 
						
  9. PHP实现微信公众号授权获取用户信息
			
    class WxAuthModel extends BaseModel { var $appId = APPID; var $appSecret = APPSECRET; /*微信x小程序,获取微信o ...
    
			
    10. 
						
  10. davinci入门必读
			
    http://www.usr.cc/forum.php/static/image/smiley/tiger/archiver/forum.php?mod=viewthread&action=p ...
    
			
    11.