首先可以从https://github.com/fanqingyun/d3Util.git拉取dev分支下webpack的demo(记得切换到dev分支),具体可以参照上一篇,然后以下就可以整合vue了
安装依赖:
1, 安装vue
npm i vue
2, 安装vue相关
npm install --save-dev vue-loader vue-style-loader vue-template-compiler vue-h ot-reload-api
3, babel相关
npm i @babel/plugin-transform-runtime @babel/runtime @babel/plugin-proposal-cl ass-properties -D
修改babel配置文件.babelrc
{
"plugins": [
"@babel/plugin-transform-runtime",
"@babel/plugin-proposal-class-properties"
],
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "entry"
}
]
]
}
在配置文件webpack.base.conf.js里添加vue的配置
const VueLoaderPlugin = require('vue-loader/lib/plugin');
开始写测试例子:
在src文件夹下创建App.vue和main.js
App.vue
<template>
<div>{{test1}}</div>
</template>
<script>
export default {
name: 'App',
data () {
return {
test1: '测试vue与webpack的整合'
}
}
}
</script>
<style>
</style>
main.js
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})
然后在模板index.html下添加<div id="app"></div>
index.html
<!DOCTYPE html>
<html>
<head>
<title>模板</title>
<meta charset="utf-8"/>
<div id="app"></div>
</head>
<body>
</body>
</html>
运行得以下结果即整合成功