Vue-Cli3_mobile_1

239 阅读1分钟

项目准备:

由于是做web移动端的项目

1.找到index.html,设置meta 标签

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

2.设置重置样式

reset.css + border.css(度娘)

border是为了解决IE1px的问题

在min.js 中引入

import './assets/style/reset.css'

import './assets/style/border.css' 

3.解决click点击事件300ms延迟

npm install fastclick --save

*检查,在package.josn中会发现,faseclick 的版本,即安装成功。


在main.js 中引用并且以document.body为参数带入使用。


4.预处理语言

npm install stylus --save                      //stylus 

npm install stylus-loader --save        //stylus loader

*less ||  sass 均可,看自己喜好。而stylus 不拘于格式,很灵活。子类缩进编写,非子类请对齐编写。


*注意,rem的设计是通过设置html的font-size:50px;来获取的。

1rem = 50px  = 设计稿(量取 86px / 2倍图 / 43px) = 0.86rem

量多少就写多少rem,不需mixin的写法。

5.css的通用配置

在项目中,主题颜色永远都是更新最频繁的。为了简单且不重复@import引入css文件。可配置config文件达到目的。先在项目根目录新建vue.config.js,做如下配置。


npm install style-resources-loader --save     //下载插件

*注意 patterns 是一个数组,可以添加多个。

1)新建stylus文件。


2)使用


6.iconfont 的使用

下载svg格式,并删除源文件width/height。img标签src地址引入