一：插件

1:better-scroll 插件实现左右轮播滚动

2:vue-lazyload 插件实现图片懒加载
4：vue-resource插件类似于axios插件
5:main.js中全局引入mint ui框架，页面里面随便使用该框架的组件

二：vuejs相关

1:实现移动端自适应:

方案一

1.1: postcss 插件引到项目里 功能：把你自己写的代码px转化为rem（对于引入的外部插件，不做单位转化)

1.2：main.js 中引入一段js代码，设置html标签中的font-size大小

window.onresize = setHtmlFontSize function setHtmlFontSize () { const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth const htmlDom = document.getElementsByTagName('html')[0] htmlDom.style.fontSize = htmlWidth / 10 + 'px' } setHtmlFontSize()

方案二：（vuecli3脚手架为例）

步骤一： 安装 lib-flexible

npm install lib-flexible --save

步骤二：  在main.js中引入lib-flexible

import 'lib-flexible/flexible.js'  (设置html标签中的font-size大小)

步骤二： 安装px2rem-loader (使用px2rem-loader自动将css中的 px 转换成 rem)

 npm install px2rem-loader --save-dev

步骤四： vue.config.js 里面添加配置

chainWebpack: config => {
config.module
.rule("css")
.oneOf("vue")
.use("px2rem-loader")
.loader("px2rem-loader")
.before("postcss-loader") // this makes it work.
.options({ remUnit: 75 })
.end();
config.module
.rule("less")
.oneOf("vue")
.use("px2rem-loader")
.loader("px2rem-loader")
.before("postcss-loader") // this makes it work.
.options({ remUnit: 75 })
.end();
}

2:Vue页面中，<script></script>代码中注释文字用 // 而不是 <!-- --> 这种格式  <template></template>模板中用 <!-- --> 注释

3: template模板里面  v-show/v-if=’item’,js 里面 if（item）{} else{}:   item 取值0, null ,'',undefined,NaN, 返回为false ,若返回true 表示 item 取值为：!0,   !null, !'', !undfined, !NaN, 空对象，空数组( !1  !2   !5  (等)返回 false)

4: vue-cli2:  vue init webapck 项目名称，按照这个方式创建的项目，此时 引入less，只需要 npm install less less-loader --save 即可，不需要再手动配置为webpack ,引入方式 

5：vue 项目引入juqery插件，App.vue 中使用 $ 会报错，其他vue页面中没问题   vue 项目中快捷键 <sc 之后 enter 键 ，整个vue项目大致结构就出来了 

6: <!-- indeterminate(不确定性) 取值为true ,表示选中项个数 >1 && < 总长度 ,取值为false，表示全选或者全不选-->

2:样式文件

vue页面样式文件引入方式如下:

1.1: <style lang='scss/less’>　　@important '~@/assets/scss/homr.scss/less'; (;很重要，一定要加上)</style>

1.2: <style lang='less' src='./xx.less'></style> (src一定要按照相对路径的方式引入)

1.3:引入图片的方式:

方法一：

scss / less样式文件中引入图片：

a{background-image:url('~@/assets/images/cat.png');} (@:表示src目录 ,vuecli框架自动配置的)

template 模板里面这样写：

 

<img   src="~@/index/header/carts.png" >

 

js引入图片用 rquire(),如下:require('../../assets/images/cat.png');

解析：<!-- 在别名前面加一个 ~ ，告诉加载器它是一个模块 而不是相对路径，在style静态文件里面 写背景图片的时候也这样写-->

 方法二:

在vue.config.js 里面 配置别名：

  chainWebpack: config => {
    // 配置别名
    config.resolve.alias
      .set("img", resolve("src/assets/images"))
}
样式文件里面这样写：
background: url('~img/dialogs/bg.png') no-repeat;
template 模板里面这样写：
<img   src="~img/index/header/carts.png" >
js 里面这样写:
perItems: [{ src: require("img/index/pSetting/person01.png"), name: "" }]

温馨提示：参考mint ui框架的demo(mint-ui-master),可以更快上手该框架哦！

word-break : 设置自动换行的处理方法

1.4: 父组件scoped 属性添加以后， 父组件内的样式 不会 影响子组件，若在父组件样式里，想修改子组件的样式，在某个元类名 添加 /deep/ 深度作用选择器以后， 子组件里面该类名也会起作用，如：

// 父组件(header.vue)

<template>
<div class="header">
       <Cart :imgType="true"></Cart> (子组件)
</div>
header.less:
.header{
　　/deep/ .carts{
　　      height: 60px;
    　}
}
// 子组件 (carts.vue)
<template>
  <div class="flex carts"></div></template>
carts.less:
.carts{
　　height: 80px;
}
// 此时 .carts 的高度为 60px；
vue中style样式文件设置为scoped 私有属性 所以在引用外界组件如 element ui中组件，修改该ui 框架中的样式时，只要在最外层父组件设置为 deep 即可
如：
/deep/ .el-table {
      margin-bottom: 80px;
      th {
        height: 50px;
        color: #fff;
        font-size: 14px;
        background: #2d3e50;
　　　td {
　　      .type {
       　　 flex-direction: column;
　　        justify-content: center;
       　　 p {
　　          line-height: 20px;
       　　 }
      　　}
　　　}
      }
    }
1.5：flex布局问题:

设置左边子元素固定宽度，右边自适应沾满剩余空间，但是左边固定宽度失效，设置该子元素的flex-grow:0;

flex-shrink:0; flex-shrink:是否自动缩小空间，默认值为1， 即自动缩小， 设置为0，不会自动缩小， flex-grow:是否自动增长空间，默认值为1,设置为0， 则不会自动增长空间；

应用：在main.less文件中，定义一个公共的类：.flex 

// flex布局
.flex {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  flex-grow: 0;
  flex-shrink: 0;
}
1.5.1:  父组件定义flex布局， align-items: stretch;  （stretch ：元素被拉伸以适应容器。 从而设置子元素高度与父元素一样，子元素不要设置 height:100% 这些，防止在ie浏览器出现的兼容性，即子元素不与父元素等高）
1.6: 要求：价格栏固定在页面底部，居中显示:
设计图：

 

css样式设置：

　position: fixed;
    width: 100%;
    max-width: 1200px;
    //注意：不要设置 min-width:1200px 否则，价格栏里面的内容会被遮挡
    // min-width: 1200px;
    bottom: 0;
    right: 0;
    left: 0;
　z-index: 9;

 1.7： 使用transfrom 水平垂直居中显示弹出层，导致弹出层字体模糊的问题:使用translate进行位移的时候，如果选择的值是不接近整数的小数（测试时，整数和接近整数的小数比如：1.89、1.9+的数不会出现模糊的情况），位移的元素字体和背景等都会出现模糊的情况；

  如：transform: translateX(-50%) translateY(-50%);