内容: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. vue 移动端开发

    1.vue开发中的路由: 关于require 与import 的区别 2.vue中的mock数据 3.

  3. RxJava Android(RxAndroid) 开发全家桶

    RxJava 在 Android 应用开发中越来越流行,但是由于其门槛稍高,初次使用不免遇到很多问题,例如在 RxJava 常见的错误用法 和 不该使用 RxJava 的一些情况 中所描述的情况.为了 ...

  4. [转]vue全面介绍--全家桶、项目实例

    慢慢了解vue及其全家桶的过程 原文http://blog.csdn.net/zhenghao35791/article/details/67639415 简介 “简单却不失优雅,小巧而不乏大匠”.  ...

  5. vue全面介绍--全家桶、项目实例

    简介 “简单却不失优雅,小巧而不乏大匠”. 2016年最火的前端框架当属Vue.js了,很多使用过vue的程序员这样评价它,“vue.js兼具angular.js和react.js的优点,并剔除了它们 ...

  6. Vue全家桶

    简介 “简单却不失优雅,小巧而不乏大匠”. Vue.js 是一个JavaScriptMVVM库,是一套构建用户界面的渐进式框架.它是以数据驱动和组件化的思想构建的,采用自底向上增量开发的设计. 为什么 ...

  7. Vue 全家桶介绍

    Vue有著名的全家桶系列,包含了vue-router(http://router.vuejs.org),vuex(http://vuex.vuejs.org), vue-resource(https: ...

  8. Vue全家桶介绍

    一直不清楚全家桶是什么玩意,上网搜了一下,才知道就是平时项目中使用的几个依赖包,下面分享一下 Vue 全家桶介绍 Vue有著名的全家桶系列,包含了vue-router(http://router.vu ...

  9. Nuxt + Vue 全家桶

    引子 情由无中有,一旦有了,便万劫不复 简介 “简单却不失优雅,小巧而不乏大匠”. Vue.js 是一个JavaScriptMVVM库,是一套构建用户界面的渐进式框架.它是以数据驱动和组件化的思想构建 ...

随机推荐

  1. Java知识点题集

    一.红黑树的特性 (1)每个节点或者是黑色,或者是红色. (2)根节点是黑色. (3)每个叶子节点(NIL)是黑色. [注意:这里叶子节点,是指为空(NIL或NULL)的叶子节点!] (4)如果一个节 ...

  2. Java工程师的必备知识点

    最近参加了一次公司内部的调岗计划,打算加入一个更核心的部门.调岗计划有面试环节,为了不让自己搞砸,悉心准备了将近一个月,请教了百度和腾讯的有过面试官经验的大学同学,系统性的总结了Java工程师的核心知 ...

  3. C# LINQ学习笔记一:走进LINQ的世界

    本笔记摘抄自:https://www.cnblogs.com/liqingwen/p/5832322.html,记录一下学习过程以备后续查用. LINQ 简介:     语言集成查询(LINQ)是Vi ...

  4. pycharm+anaconda在Mac上的配置方法 2019.11.29

    内心os: 听人说,写blog是加分项,那他就不是浪费时间的事儿了呗 毕竟自己菜还是留下来东西来自己欣赏吧 Mac小电脑上进行python数据开发环境的配置 首先下载Anaconda,一个超好用的数据 ...

  5. ContestHunter 1201 最大子序和

    描述 输入一个长度为n的整数序列,从中找出一段不超过m的连续子序列,使得整个序列的和最大. 例如 1,-3,5,1,-2,3 当m=4时,S=5+1-2+3=7当m=2或m=3时,S=5+1=6 输入 ...

  6. 第70届(2019)IMO中国国家队选拔考试试题

    (几何除外)1,几何,略2,给定n≥3,是否存在无穷个2n元集{a1,...,an,b1,...,bn}满足其中元素整体互素,a1,...,an成等差数列,b1,...,bn也成等差数列.3,给定k, ...

  7. 【你不知道的javaScript 上卷 笔记4】javaScript 中闭包的一些运用

    什么是闭包 闭包是javaScript语言的一种特性,在 javaScript 中以函数作为承接单元.当函数可以记住并访问所在的词法作用域时,就产生了闭包,即使函数是在当前词法作用域之外执行. fun ...

  8. JS调用函数的两种方式

    <script type="text/javascript"> window.onload = init; //onload 表示页面全部加载完毕后,再调用init() ...

  9. 使用ScrollRect制作翻页

    1.标准的层级结构 ScrollRect->ViewPort->Content,Viewport负责显示区域的大小一般和Mask一起配合使用,Content使用Layout来布局,如果想使 ...

  10. jQuery-File-Upload 使用,jQuery-File-Upload上传插件

    ================================ ©Copyright 蕃薯耀 2020-01-10 https://www.cnblogs.com/fanshuyao/ 一.官网地址 ...