浅谈Vue的文件和路由的懒加载

Belief in our hearts means strength in our legs.

Vue项目文件理解

• index.html介绍及场景使用 ：

所有组件（后缀.vue）都通过该文件，进行渲染加载（貌似其他的组件就是html的templetes模板）；

• App.vue介绍：

后缀.vue的组件，相比其他的.vue组件，该组件级别最高（可以来理解它是所有其他组件的~父亲）。

• main.js介绍及使用场景：

项目的入口文件：将Vue项目中所使用第三方的图标、axios、elementUi、等插件进行引入，并配置给Vue项目使用.

结语：我的理解是项目启动后，先执行入口文件main.js，其次index.html，最后是执行App.vue找到具体加载哪一个.vue组件（ 单页面组件）。

懒加载

• 必要性：用户首次进入项目，当项目执行到.router路由文件，普通的一次性引入组件，让系统会一次性将所有的组件进行加载，加载过程中，让用户一直在白屏页面等待加载，这会影响用户体验感。

这里只记录一种懒加载的使用方式，因为一种就够用了！

vue组件使用懒加载：采用路由懒加载方式（import）
const 组件名=() => import(‘组件路径’);

写在最后：简单的文字，希望能让你有些收获或产生思考，也不枉白走一遭。