vue新手技巧之区分组件

由于 vue 的组件文件可以是一个页面, 一个插槽, 也可以是一个局部内容, 所以将组件区分开来更便于后期维护.

可以通过文件名的结尾来区分

• 页面组件（一整个页面）以 views 结尾

• 容器/插槽组件（有 slot）以 items 结尾

• 内容组件（图标）以 icons 结尾

• 通用内容组件（按钮、输入框、标题）以 common 结尾

• 布局组件（整个页面结构）以 layout 结尾

• 局部内容组件则不用加结尾, 如何导航菜单模块, 侧边栏模块.

vue 的各模块与 HTML CSS JS 的对应关系

<template> <!-- 结构：页面长啥样（HTML） --> </template> 
<script> // 逻辑：数据、方法、交互（JavaScript） </script> 
<style> /* 样式：长得好不好看（CSS） </style>