- 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-polyfillnpm 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;