基于Vue-CLI 2.9模板

npm install vue-cli -g

vue init webpack mall

.eslintrc.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
rules: {
    // allow async-await
    'generator-star-spacing': 'off',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
   'semi': ['error', 'always'],
   // 把默认的eslintrc 代码风格 格式关闭
   'indent': 'off',
   // 用vue定义我们的代码风格 中间的2*baseIndent的值 代码空几格
   'vue/script-indent': ['error', 2, {
     'baseIndent': 1
   }],
   // 函数括号之前的空格 error
   // anonymous 匿名函数总是要空格
   // named 有名字的函数不要空格
   // asyncArrow 异步的箭头函数要空格
   'space-before-function-paren': ['error', {
     'anonymous': 'always',
     'named': 'never',
     'asyncArrow': 'always'
   }]

config/index.js

1
2
3
host: '0.0.0.0',//同一局域网手机可以访问，使用PC的ip
 autoOpenBrowser: true,//打包自动打开游览器

npm i -s babel-polyfill fastclick

npm i -S node-sass sass-loader

1
2
3
4
//main.js
import 'babel-polyfill';
import fastclick from 'fastclick';//移动端300ms 延迟
fastclick.attach(document.body);

webpack配置

1
2
3
4
5
6
7
8
9
10
11
12
//build/webpack.base.conf.js
resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '@': resolve('src'),
      'api': resolve('src/api'),
      'assets': resolve('src/assets'),
      'base': resolve('src/base'),
      'components': resolve('src/components'),
      'pages': resolve('src/pages')
    }
  },

插槽的if判断

1
2
3
<div class="mine-navbar-left" v-if="$slots.left">
     <slot name="left"></slot>
   </div>

flex 和 ellipsis 冲突 在flex 内部添加ellipsis

1
2
3
4
5
 <h1 class="mine-navbar-title" v-if="title">
    <span class="mine-navbar-text" v-text="title"></span>
  </h1>
h1 flex-center
span ellipsis

npm i vue-awesome-swiper 基于swiper的vue插件

npm i -S jsonp jsonp插件

实现图片正方形

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<p class="recommend-pic">
            <img class="recommend-img" :src="item.baseinfo.picUrlNew" />
          </p>

 &-pic {
    width: 100%;
    padding-top: 100%;
    position: relative;
    }
  &-img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }

图片的懒加载

npm install --save vue-lazyload

标签属性v-lazy

为元素绑定属性有3种方式的写法

类名： v-bind:class=”focus”

类名数组：v-bind:class=”[‘focus’, ‘shine’]”

样式对象：v-bind:classs=”{‘focus’: true/false, ‘shine’: true/flase }”，这种方式会根据样式名作为键的值来决定是否采用，如果值为：false，则不采用该样式，否则应用该样式。