基于vue2创建项目 + vant 框架
运行命令如下:
vue init webpack 项目名称 下面会询问一些问题:是否安装一下插件,按需选择安装即可。 然后根据提示信息,操作就可以完成项目创建。 安装vant框架:https://youzan.github.io/vant/#/zh-CN/ npm i vant -S 引入组件:方式一. 自动按需引入组件 (推荐) 第一步:安装插件 npm i babel-plugin-import -D 第二步:在.babelrc 中添加配置 { "plugins": [ ["import", { "libraryName": "vant", "libraryDirectory": "es", "style": true }] ] } 第三步:在入口文件 main.js中,按需引入vant里面的组件,这样全局就可以使用了 // 引入vant组件 import { Button, Cell, CellGroup, Col, Row, Search, Loading, Toast } from 'vant'; Vue.use(Button); Vue.use(Cell); Vue.use(CellGroup); Vue.use(Col); Vue.use(Row); Vue.use(Search); Vue.use(Loading); Vue.use(Toast);
移动端适配问题:rem. js
首先:在index.html中,添加 viewport
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1,user-scalable=no">
然后在入口文件main.js 引入:
import './assets/rem'
/**
* 设置根元素font-size
* 当设备宽度为375(iPhone6)时,根元素font-size=16px;
*/
(function (doc, win) {
var docEl = win.document.documentElement;
var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
var refreshRem = function () {
var clientWidth = win.innerWidth
|| doc.documentElement.clientWidth
|| doc.body.clientWidth;
// console.log(clientWidth)
if (!clientWidth) return;
var fz;
var width = clientWidth;
fz = 16 * width / 375; // 可以根据项目需要,自行修改
docEl.style.fontSize = fz + 'px'; //这样每一份也是16px,即1rem=16px
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, refreshRem, false);
doc.addEventListener('DOMContentLoaded', refreshRem, false);
refreshRem();
})(document, window);
移动端样式初始化:reset.css
在入口文件main.js中引入:
import './assets/reset.css'
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}