vue框架

---

npm install axios --save
npm install mockjs --save
npm install vue-lazyload --save
cnpm i element-ui -S
//新版本有bug 写死版本号  3.1.3
cnpm install vue-awesome-swiper --save

main

// 全局引入axios 配合mock
import Axios from 'axios';
Vue.prototype.$axios = Axios;
import './mock/index'; //引入mock数据，关闭则注释该行

v-lazy图片懒加载

npm install vue-lazyload --save

main

//图片懒加载
import VueLazyLoad from 'vue-lazyload'
Vue.use(VueLazyLoad, {
  loading: '/imgs/loading-svg/loading-bars.svg'
})

http://www.jerrybro.cn:90/imgs/logo-footer.png
<img v-lazy="$target+'/imgs/nav-img/nav-3-3.png'">
<img :src="`${$target}/imgs/nav-img/nav-3-1.jpg`">  

element模块

cnpm i element-ui -S

//全局载入Element 框架   饿了吗
import 'element-ui/lib/theme-chalk/index.css';
import ElementUI from 'element-ui';
Vue.use(ElementUI);

vue-awesome-swiper 轮播图

网址 网址

//新版本有bug 写死版本号  3.1.3
cnpm install vue-awesome-swiper --save

全局挂载

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

// require styles
import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper, /* { default global options } */)

局部挂载===>组件挂载

// require styles
import 'swiper/dist/css/swiper.css'

import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
  components: {
    swiper,
    swiperSlide
  }
}

data(){
  return{
    swiperOption: {
		autoplay: true,
		loop: true,
		effect: 'cube',
		cubeEffect: { //阴影效果
			shadowOffset: 100,
			shadowScale: 0.6
		},
		pagination: { // 分页器配置
			el: '.swiper-pagination',
			clickable: true
		},
		navigation: {// 箭头配置
			nextEl: '.swiper-button-next',
			prevEl: '.swiper-button-prev'
		}
	} 
 }
}

sass 全局引用

npm install sass-resources-loader 

可以引用全局变量 官网

// vue.config.js
module.exports = {
    chainWebpack: config => {
        const oneOfsMap = config.module.rule('scss').oneOfs.store
        oneOfsMap.forEach(item => {
            item
                .use('sass-resources-loader')
                .loader('sass-resources-loader')
                .options({
                    // Provide path to the file with resources
                    // 要公用的scss的路径 但单独文件 多个文件[]
                    resources: './src/assets/css/base.scss'
                })
                .end()
        })
    }
}

局部引入

 @import "~@/assets/css/var.scss";
 @import './../assets/scss/config.scss';

mixinx (混合开发)

utils/mixins.js

export default {
    data () {
        return {
            name: 'mixins',
            minixName: 'minixObj',
            flag: false
        }
    },
    mounted() {
        console.log('minixMounted');
    },
    methods: {
        speak() {
            console.log('this is minix');
        },
        getData() {
            return '100';
        }
    }
}

views/page.vue 局部引入mixins

import Minix from '../utils/mixnins';

export default {
    data () {
        return {
            name: 'page',
            lists: [1, 2, 3, 4]
        }
    },
    
    mounted() {
        console.log('todoMounted');
    },
    minixs: [Minix], // page.vue 中声明minix 进行混合
    methods: {
        speak () {
            console.log('this is page');
        },
        submit() {
            console.log('submit');
        },
    }
}

最终编辑后的vue

export default {
    data () {
        return {
            name: 'page', // 共同有的data， 最后保留自己的data
            lists: [1, 2, 3, 4], // 自己独有的，保留
            minixName: 'minixObj', // todo没有的，会被添加进来
            flag: false // todo没有的，会被添加进来
        }
    },
    
    mounted() {
        // 在钩子函数中的， 会被合并到page.vue 的钩子函数中， 
        // minix中的代码在前，自己的在后
        console.log('minixMounted');
        console.log('todoMounted');
    },
    methods: {
        // 同时有的方法， 会被封装为一个数组， 
        // 先执行minix中的，后执行todo自己的
        speak () {
            [
                function() {
                    console.log('this is minix');
                },
                function() {
                    console.log('this is page');
                }
            ].forEach(item => {
                item();
            })
        },
        // 自己独有的，保留
        submit() {
            console.log('submit');
        },
        // 自己没有的方法会被添加进来
        getData() {
            return '100';
        }
    }
}

全局引入 mixins 在src/main.js文件加入以下两行

import Mixin from './mixins';
Vue.mixin(Mixin);