内容：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. JN_0009：win下快捷键注销，关机，重启
			
    注销:  wn + x  + U  再按 I 键 关机: win + x  + U  再按 U 键 重启: win + x  + U  再按 R 键
    
			
    2. 
						
  2. （三）运用Python模块和包
			
    1 引言 为了能够在Python项目中高效地运用Python模块和包,我们需要进一步地来了解它们是如何在Python项目中进行定义.使用和工作的. 2 Python模块和包 Python模块和包的基本 ...
    
			
    3. 
						
  3. JavaSE学习笔记（1）---数据类型、运算符、控制结构
			
    javaSE学习笔记(1) 数据类型和运算符 1.注释可以提高程序的可读性.可划分为 单行注释 // 多行注释 /.../ 文档注释 /**...*/ 2.标识符的命名规则: 标识符必须以字母.下划线 ...
    
			
    4. 
						
  4. 在java中调用mockjs生成模拟数据
			
    一.手写版 在前端有个模拟数据的神器 Mock.js 能生成随机数据,拦截 Ajax 请求,然后我觉得他的这个生成随机数据不错.然后我就到度娘一顿操作,没找到类似的java实现,于是就有了下面的代码: ...
    
			
    5. 
						
  5. centos6离线安装apache2.4
			
    在/usr/local中新建文件夹 Apache2.4,将httpd安装包放入该文件夹, 解压:tar xvf httpd-2.4.41.tar.gz 进入httpd-2.4.41文件夹中,对Apac ...
    
			
    6. 
						
  6. 主机名由localhost变成bogon是怎么回事，怎样变回localhost这个名字？
			
    如何解决这个问题修改你的 DNS 为公共 DNS,例如 114.114.114.114 或者谷歌的 8.8.8.8.然后修改你的主机名: sudo hostname localhost 出现这个问题的 ...
    
			
    7. 
						
  7. pymysql 连接池
			
    pymysql连接池 import pymysql from DBUtils.PooledDB import PooledDB, SharedDBConnection ''' 连接池 ''' clas ...
    
			
    8. 
						
  8. C++-hihoCoder-1142-三分求极值[三分]
			
    #include <bits/stdc++.h> using namespace std; typedef double db; ; db a,b,c,x,y; db dis2(db X) ...
    
			
    9. 
						
  9. 题解【AcWing10】有依赖的背包问题
			
    题面 树形 DP 的经典问题. 我们设 \(dp_{i,j}\) 表示当前节点为 \(i\),当前节点的子树(包含当前节点)最多装的体积是 \(j\) 的最大价值. 我们遍历节点的过程就相当于做了一遍 ...
    
			
    10. 
						
  10. 网络编程UDP、TCP详解
			
    网络编程   网络编程主要用于解决计算机与计算机(手机.平板-)之间的数据传输问题. 1.InetAddress(IP类)   方法: 方法 描述 getLocalHost() 获取本机的IP地址对象 ...
    
			
    11.