vue 引入组件方式

vue开发,单页面应用,即一个组件就是一个模块,可以互相引入;

这里提供两种方式引入组件;

1 import导入所需组件(正常加载)

 vue 引入组件方式

2 require方法导入组件

用于路由配置页面:

(1)实现(懒加载)

vue 引入组件方式

vue 引入组件方式

注意:这里的@ 相当于..

(2)路由配置页面使用require引用组件

1)原因:

import:打包后,会将路由配置里面的所有component打包到一个js文件中,导致部署后,跳转时加载的文件太大,加载缓慢;

require:打包后, 每个组件都是单独的文件,可实现按需加载,提高性能

2)如此,只有当用户点击了某页面,才会加载对应页面的 js 文件,实现了按需加载的功能。

加载了几个js文件,代表此项目中有几个组件

vue 引入组件方式

(3)require懒加载,按组

vue 引入组件方式

(4)import 懒加载,按组

...

可参考文章:

https://router.vuejs.org/zh/guide/advanced/lazy-loading.html

https://cn.vuejs.org/v2/guide/components-dynamic-async.html#%E5%BC%82%E6%AD%A5%E7%BB%84%E4%BB%B6