- 构建vue 应用
npm install -g vue-cli
vue init webpack
在构建vue应用的有问题可以参考
点这里构建vue应用
- 进入index.html修改子引用的id 不能与主应用重复
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>childapp</title>
</head>
<body>
<div id="app1"></div>
<!-- built files will be auto injected -->
</body>
</html>
3.修改webpack.dev.config.js允许启动的服务跨域
设置
devServer: {
headers: {
'Access-Control-Allow-Origin':'*'
},
其他配置... ...
}
注意此处是在devServer中新增
headers: {
'Access-Control-Allow-Origin':'*'
}
- 进入src/main.js
注意： 这里的修改主要是添加钩子函数，已经vue程序的渲染rander 房子钩子中执行
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
function render () {
new Vue({
el: '#app1',
router,
components: { App },
template: '<App/>'
})
}
// 挂载钩子
window.vue0 = {}
window.vue0.bootstrap = async function (props) {
console.log('vue bootstrap');
}
// 生命周期 - 挂载后
window.vue0.mount = async function (props) {
console.log('vue mount 子应用', props);
Object.keys(props.fn).forEach(method =>{
Vue.prototype[`$${method}`] = props.fn[method]
})
render()
// 渲染
}
// 生命周期 - 解除挂载
window.vue0.unmount = async function (){
console.log('vue unmount');
}
- 为了看起来更加的直观修改src/App.vue
<template>
<div class="dfg">
VUE 应用
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
.dfg{
color: red;
}
</style>
至此vue子应用改造完成！！！
允许一下现在可以看到效果了。
网友评论