rvue-async-component
vue-async-component 异步远端组件
用于 vue 项目中通过远程链接加载异步模块(异步模块不随项目一同打包), 依赖 vue v2.4+。
Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
url | 组件远程地址 | string | — | — |
Installation
npm:
npm i vue-async-component -S
基于Node.js的开发环境:
import SyncComponent from 'vue-async-component';
<sync-component
url="http://localhost:8083/static/app.js">
</sync-component>
浏览器环境:
<script type="text/javascript" src="SyncComponent.min.js"></script>
<script type="text/javascript">
Vue.use(SyncComponent);
</script>
注意:vue组件没有什么特别限制,唯独在webpack打包过程中需要注意引入项目是否包含当前组件中的依赖,如果有需要排除掉依赖,webpack 配置输出采用
libraryTarget: "var"
,并且关闭 UglifyJsPlugin 的压缩功能compress: false
, vue-loader v13+ 需要配置options{ esModule: false }
。
Dependencies
Dependencies
@ant-design/colors: ^3.2.1autoprefixer: ^7.1.2babel-core: ^6.22.1babel-eslint: ^7.1.1babel-loader: ^7.1.1babel-plugin-transform-runtime: ^6.22.0babel-preset-env: ^1.3.2babel-preset-stage-2: ^6.22.0babel-register: ^6.22.0chalk: ^2.0.1connect-history-api-fallback: ^1.3.0copy-webpack-plugin: ^4.0.1css-loader: ^0.28.0element-ui: ^1.4.6eslint: ^3.19.0eslint-config-standard: ^10.2.1eslint-friendly-formatter: ^3.0.0eslint-loader: ^1.7.1eslint-plugin-html: ^3.0.0eslint-plugin-import: ^2.7.0eslint-plugin-node: ^5.2.0eslint-plugin-promise: ^3.4.0eslint-plugin-standard: ^3.0.1eventsource-polyfill: ^0.9.6express: ^4.14.1extract-text-webpack-plugin: ^3.0.0file-loader: ^1.1.4friendly-errors-webpack-plugin: ^1.6.1html-webpack-plugin: ^2.30.1http-proxy-middleware: ^0.17.3opn: ^5.1.0optimize-css-assets-webpack-plugin: ^3.2.0ora: ^1.2.0portfinder: ^1.0.13rimraf: ^2.6.0semver: ^5.3.0shelljs: ^0.7.6url-loader: ^0.5.8vue-loader: ^13.0.5vue-router: ^2.7.0vue-style-loader: ^3.0.1vue-template-compiler: ^2.4.2less: ^3.0.4less-loader: ^5.0.0vuex: ^3.1.1webpack: ^3.6.0webpack-bundle-analyzer: ^2.9.0webpack-dev-middleware: ^1.12.0webpack-hot-middleware: ^2.18.2webpack-merge: ^4.1.0