在Vue的webpack中結合runder函式
阿新 • • 發佈:2018-11-12
在Vue的webpack中結合runder函式
1.引入:
<h1>下面是vue的內容:</h1>
<div id="app">
<login></login>
</div>
2.main.js
//預設無法打包vue檔案 需安裝vue-loader import Vue from 'vue' import login from './login.vue' var vm = new Vue({ el:"#app", data:{ msg:'123' }, // components:{ // 'login':login // }, render:function (createElement) { //在webpack中如果需要vue放到頁面中展示 vm例項中的render函式可以實現 return createElement(login) } })
3.拉取相關的loader
npm i vue-loader vue-template-compiler -D
4.在webpack.config.js中加入
const VueLoaderPlugin = require('vue-loader/lib/plugin'); module.exports = { devtool: "sourcemap", entry: './js/entry.js', // 入口檔案 output: { filename: 'bundle.js' // 打包出來的wenjian }, plugins: [ // make sure to include the plugin for the magic new VueLoaderPlugin() ], module : { ... } }