学习总结----vue 组件使用

• swiper 图片轮播图使用

引入：

// import VueAwesomeSwiper from 'vue-awesome-swiper'

import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'

import 'swiper/dist/css/swiper.css'

使用：

 this.imgSwiper= new Swiper('.swiper-container', {
                direction:'horizontal',
                slidesPerView: 5, //每行同时可显示的个数
               // slidesPerGroup:10,//多少为1组
                slidesPerColumn: 2,//每列数量 行数
                spaceBetween: 10,
                slidesPerColumnFill : 'row', //先按行排
                pagination: {
                  el: '.swiper-pagination',
                  clickable: true,
                },
                // navigation: {
                //   nextEl: '.swiper-button-next',
                //   prevEl: '.swiper-button-prev',
                // }
            });

 

• element-ui 使用

打包时，自定义的样式会被覆盖，解决办法 

import App from './App' 放在引入element-ui之后

 

• vue 样式覆盖问题

在Vue中写样式时，颜色值前后不能加引号 ''，否则颜色设置会无效，被外层的覆盖

 

• vue 全局函数问题

在用了exports.install方法时，运行报错exports is not defined，解决方法：

export default {
    install(Vue)  {
        Vue.prototype.customFun =function(params){
           ...
        }
    }
}

• vue  IE内核兼容性问题

 npm 安装bebel-polyfill
npm install --save-dev babel-polyfill
在webpack.base.conf.js文件中将

module.exports = {
    context: path.resolve(__dirname, '../'),
    entry: {
        app: './src/main.js',
      }

改为：

module.exports = {
    context: path.resolve(__dirname, '../'),
    entry: {
        app: ["babel-polyfill", "./src/main.js"],
  }

然后在module: {

    rules: []

}中找到 

{
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'),resolve('static'),resolve('node_modules/webpack-dev-server/client')]   //ie内核兼容性问题 加static
      },

其中 resolve('static')为新增部分，来源

 

div 点击穿透实现:添加属性pointer-events:none;