加载vue远程代码的组件实例详解_远程加载vue文件,vue远程组件 - CSDN文库

5星 · 超过95%的资源 140 浏览量更新于2023-03-16 评论收藏 76KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

加载加载 vue 远程代码的组件实例详解远程代码的组件实例详解

vue-cli 作为 Vue 官方推荐的项目构建脚手架，它提供了开发过程中常用的，热重载，构建，调试，单元测试，

代码检测等功能。我们本次的异步远端组件将基于 vue-cli 开发

在我们的 vue 项目中（特别是后台系统），总会出现一些需要多业务线共同开发同一个项目的场景，如果各业务团队向框架

中提供一些私有的展示组件，但是这些组件并不能和框架一起打包，因为框架不能因为某个私有模块的频繁变更而重复构建发

布。在这种场景下我们需要一个加载远程异步代码的组件来完成将这些组件加载到框架中。

vue-cli 作为 Vue 官方推荐的项目构建脚手架，它提供了开发过程中常用的，热重载，构建，调试，单元测试，代码检测等功

能。我们本次的异步远端组件将基于 vue-cli 开发。

需求分析需求分析

1. 如何加载远端的代码?

2. 如何注册加载后的代码到框架中。

3. 父组件如何和远端引入的组件通信。

4. 远端代码如何复用框架中已引入的库。

5. 避免因远端代码被类似 v-for 多次调用导致的不必要请求。

加载远端代码加载远端代码

远端代码应该存储在一个可访问的 URL 上，这样我们通过 Axios 类似的 HTTP client 请求这个链接拿到源码。

import Axios from 'axios';

export default {

name: 'SyncComponent',

props: {

// 父组件提供请求地址

url: {

type: String,

default: ''

}

},

data() {

return {

resData: ''

};

},

async mounted() {

if (!this.url) return;

const res = await Axios.get(this.url); // 我们在组件挂载完成时，请求远端代码并存储结果。

this.resData = res.data;

}

};

以上是基础代码为了方便一下例子中我将省略重复的代码部分。

注册代码到框架中注册代码到框架中

这部分有些繁琐，涉及到多个问题：

浏览器并不支持 .vue 模板或 ES.next 语法，模块需要编译后才可以使用。

处理这部分比较简单，我们自己定义一个webpack配置文件来打包这些模板。

// 在 build 目录下新建 webpack.sync-components.prod.conf.js 文件

const webpack = require('webpack');

const path = require('path');

const utils = require('./utils');

const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')

function resolve(dir) {

return path.join(__dirname, '..', dir)

}

module.exports = {

// 此处引入要打包的组件

entry: {

componentA: resolve('/src/views/component-a.vue')

},

// 输出到静态目录下

output: {

path: resolve('/static/'),

filename: '[name].js',

},

resolve: {

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

评论1

lyh99999999

2021-04-23

比较详细，很受用

weixin_38545332

粉丝: 6
资源: 979

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈