项目使用中vue知识点整理

@符号代表的是vue项目的src目录

import HelloWorld from '@/components/HelloWorld'

vue组件的template对外只能暴露一个标签，所以最外层得用一个div进程包裹

写移动端访问页面的时候，需要做一些初始配置

不允许手指放大

需要在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">

引入reset.css文件

一个重置页面的样式表，因为在不同的手机浏览器上面，默认的样式是不统一的

引入boder.css文件

解决1像素的边框问题 使用方式 如果需要加下边框，则在需要的控件里面添加border-bottom类名

引入fasetclick库解决300ms点击延迟的问题

因为部分手机浏览器在点击的时候有个300ms的延时，体验不是很好

npm install fastclick --save

代码中fastclick使用如下

// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' import fastClick from 'fastclick' Vue.config.productionTip = false fastClick.attach(document.body) /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' })

安装stylus样式

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

使用示例： scoped限制样式只对当前组件有效

<style lang="stylus" scoped> </style> height 和line-height的区别 height指的是块级别元素的高度,line-height指的是元素内容的高度. 当line-height的值和height的值相同的时候,元素会自动上下居中,一般常用于文字中.

iconfont在vue工程中的引用

在iconfont官网下载自己创建的工程包，将安装包解压并拷贝文件到如下目录结构 修改iconfont里路径相关的内容 在main.js里面引入iconfont import './asseets/styles/iconfont.css' 使用 在组件模板里面调用，示例代码如下 <div class="iconfont">&#xe624;</div>

全局变量的创建和使用

在styles文件夹下创建个varibles.styl文件在文件中定义需要使用的全局样式变量 示例$bgColor = #00bcd4 $darkTextColor = #333 $headerHeight = .86rem在组件style中引入样式并使用 <style lang="stylus" scoped> @import '~styles/varibles.styl' .header display: flex line-height: $headerHeight background: $bgColor </style>

注意：在import的时候前面得加~符号

全局函数的创建和使用

在styles文件夹下面创建函数文件mixins.styl定义一个函数 ellipsis() overflow: hidden white-space: nowrap text-overflow: ellipsis 函数的调用 <style lang="stylus" scoped> @import '~styles/mixins.styl' .icons margin-top: .1rem .icon .icon-desc position: absolute left: 0 right: 0 bottom: 0 height: .44rem line-height: .44rem text-align: center color: $darkTextColor ellipsis() </style>

为使用的比较深的路径创建别名

修改webpack.base.conf.js文件，在resolve下面添加自己需要创建的路径，如下图所示 注意：在修改配置项相关的文件的时候，得重启服务，不然无法生效且会报错

防止界面抖动的处理方式

界面有时候加载图片的时候比较慢，可能下面的文字已经加载成功了，而图片的div还在加载，会导致界面会有个抖动的现象 处理方式是在图片还没加载好的时候div的大小位置先确定好，这个得在样式中实现，具体实现如下：

<style lang="stylus" scoped> .wrapper overflow: hidden width: 100% height: 0 padding-bottom: 31.25% background: #eee .swiper-img width: 100% </style>

样式穿透

有时候stylus样式里面用到其它样式里面的类的时候，在style里面无法生效，需要通过样式穿透来实现

<style lang="stylus" scoped> .wrapper >>> .swiper-pagination-bullet-active background: #fff </style>

上面这句话的意思是只要遇到swiper-pagination-bullet-active，其背景色就改成白色

css的position字段使用

position 属性被指定为从下面的值列表中选择的单个关键字。

static 该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。relative 该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。absolute 元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。fixed 元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform, perspective 或 filter 属性非 none 时，容器由视口改为该祖先。sticky 元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和 containing block (最近块级祖先 nearest block-level ancestor)，包括table-related元素，基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。 该值总是创建一个新的层叠上下文（stacking context）。注意，一个sticky元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的overflow 是 hidden, scroll, auto, 或 overlay时），即便这个祖先不是最近的真实可滚动祖先。这有效地抑制了任何“sticky”行为（详情见Github issue on W3C CSSWG）。