vue 引入组件方式

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

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

1 import导入所需组件（正常加载）

 

2 require方法导入组件

用于路由配置页面：

（1）实现（懒加载）

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

（2）路由配置页面使用require引用组件

1）原因：

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

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

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

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

（3）require懒加载，按组

（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