内容: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. Codeforces 1304F2 Animal Observation (hard version) 代码(dp滑动窗口线段树区间更新优化)

    https://codeforces.com/contest/1304/problem/F2 #include<bits/stdc++.h> using namespace std; ; ...

  2. "Chrome的network中无法显示OPTIONS请求"的解决方案

    目录 #事故现场 #分析及解决方法 #参考 #事故现场 在前端发送一个跨域请求的时候,要先发送个options请求,从而获知服务端是否允许该跨域请求. 跨域资源共享标准新增了一组 HTTP 首部字段, ...

  3. CentOS MySQL自动备份shell脚本

    先执行  vim/mysqlBack/back.sh 然后添加以下内容 ## 记录日志 # 以下配置信息请自己修改 mysql_user="root" #MySQL备份用户 mys ...

  4. laravle中常见的数据库加密

    // 1.md5加密 $str=md5('123456'); // 2.base64_decode加密 $str2=base64_encode('123456'); // 2.1 base64_解密 ...

  5. Java_Day4(下)

    Java learning_Day4(下) 本人学习视频用的是马士兵的,也在这里献上 <链接:https://pan.baidu.com/s/1qKNGJNh0GgvlJnitTJGqgA> ...

  6. Mapped Statements collection does not contain value for xxx

    这是我第二次遇到的这个问题了,总结下. 第一次的问题是 mybatis的sqlSessionFactory的mapperLocations,配置的是这个路径下的所有映射文件,但是我没写的没有在该路径下 ...

  7. 机器学习作业(三)多类别分类与神经网络——Python(numpy)实现

    题目太长了!下载地址[传送门] 第1题 简述:识别图片上的数字. import numpy as np import scipy.io as scio import matplotlib.pyplot ...

  8. jqgrid中分页和搜索,jqgrid loadonce:true后trigger("reloadGrid")无效

      第一次接触jqgrid,发现项目中好多地方都用到.   jqgrid是典型的B/S架构(浏览器/服务器模式),服务器端只需提供数据管理,浏览器只需负责数据显示.   jqGrid是用ajax实现对 ...

  9. 'ssh-keygen' 不是内部或外部命令,也不是可运行的程序

    右键我的电脑,点击环境变量,设置系统配置里面的Path 新增一个 D:\ruanjiananzhuangdizhi\Git\usr\bin 路径就可以了

  10. Vue+ESLint+Git钩子函数pre-commit配置教程

    一.创建Vue项目eslint-standard vue create eslint-standard 二.创建.eslintrc.* 删除package.json中的eslintConfig配置 我 ...