1.我被自己坑了(需求)
我想要的是 "异步加载组件",但是 根据以前的经验 搜索的关键字是"动态加载组件"
"动态加载组件" 在vue中有另外的意思.
另外 "打包单文件组件为独立js" 这个关键字搜索到的内容也不是我想要.
我的需求就是 把一个 单文件组件 打包成一个独立的js文件,然后再页面需要的时候加载,而不是加载全部
(2)解决方案
直接查看官方文档 "异步组件"相关文章
(3)一个简单的示例
坑逼啊非常简单,我搞了好几天,还专门找大神帮忙处理了(估计我描述有问题,他没有真正理解我的意思,也没有搞定)
cesi.vue 一个简单模块
<template>
<div>
测试模块
</div>
</template>
<script>
export default {
name: "cesi",
data(){
return{
}
},
methods: {
}
}
</script>
<style scoped>
</style>
其他需要动态引用的地方
<template>
<div class='LeftAd'>
<div @click="add">点击</div>
<!-- <img src="/static/img/LeftAd.png"/>-->
<component v-bind:is="name"></component>
</div>
</template>
<script>
import Vue from 'vue'
Vue.component('cesi', function (resolve) {
// 这个特殊的 `require` 语法将会告诉 webpack
// 自动将你的构建代码切割成多个包,这些包
// 会通过 Ajax 请求加载
require(['./cesi'], resolve)
})
export default {
name: "LeftAd",
data(){
return{
name:''
}
},
methods: {
add(){
this.name ='cesi'
}
}
}
</script>
<style>
</style>
关键代码:
(1)<component v-bind:is="name"></component> 这个是根据 name 动态加载不同的组件
(2)Vue.component('cesi', function (resolve) {require(['./cesi'], resolve)})
这行代码表示,这个组件会以ajax的形式 在适当的时候加载.
当运行 npm run build 的时候 cesi.vue 会被打包成一个独立的js文件.
只有当 点击div 后触发 this.name ='cesi' 的时候 cesi.vue 真正使用的时候,vue才会自动从服务器请求js文件 加载组件.完全不用关心如何加载的问题.