利用webpack引入Vue的两种方式

首先局部安装webpack以及Vue

npm i webpack -D

npm i vue -D

第一种 直接引入

在入口js文件中 直接引入

import Vue from '../node_modules/vue/dist/vue.js';

引入后就可以直接在入口js文件中使用

//入口文件写入

    import Vue from '../node_modules/vue/dist/vue.js';

//然后就可以直接用

var app =new Vue({

    el:"#app",

    data:{

        msg:"123"

    }

})

第二种方式 配置文件的方式--推荐使用

在webpack.config.js文件中的module.exports中写入

resolve: {

alias: {

vue:"vue/dist/vue.js"

    }

}

然后第再到入口js文件中引入

import Vuefrom 'vue';

var app =new Vue({

el:"#app",

    data:{

msg:"123"

    }

})

上面这两种方式都是可以实现Vue引入的，如果控制台报错找不到元素 那么可能需要在入口js中加一句入口函数 如下

import Vuefrom 'vue';

window.onload=function () {

var app =new Vue({

el:"#app",

        data:{

msg:"123"

        }

})

}

以上就是webpack引入Vue的两种方式啦