vue加载本地数据+全局挂载插件

一、vue加载本地数据

1.img标签中的src绑定数据

<img :src=bannerImg_3 alt="希望">

在组件数据中声明

export default {
    data(){
        return {
            bannerImg_1: require("./images/banner_1.png"),
            bannerImg_2: require("./images/banner_2.jpg"),
            bannerImg_3: require("./images/banner_3.jpg")
        }
    }
}

2.css中的路径

可以直接使用正确的相对路径

background-image: url("./images/logo.png");

二、全局挂载插件

webpack.ProvidePlugin

说明：bootstrap.js基于jQuery(类似)，使用bootstrap.js前必须先加载jQuery

2.1 webpack.config.js配置文件

先导入webpack

const  webpack = require('webpack');

在module.exports的plugin中添加

    plugins: [
        /* 全局挂载插件 */
        new webpack.ProvidePlugin({  
            $:"jquery",  
            jQuery:"jquery",  
            "windows.jQuery":"jquery"  
        })
    ]

 

在module.exports的resolve添加

resolve: {
        /* 别名 */
        alias: {
            "jquery": "jquery/src/jquery"  
        }
    }

2.2 在入口.js文件导入

import $ from "jquery"