Vue页面拆分以实现代码共享

Vue页面拆分以实现代码共享

将页面共享的侧边栏和头部代码单独分离出来，不仅可以减少代码篇幅，还方便修改和管理，按照网上的教程，先将侧边栏和头部的代码拆分出作为Aside.vue和Header.vue，当其他页面需要使用时，在<template></template>标签中引入<Header></Header>和<Aside></Aside>，再在<script></script>中引入

import Aside from "../../components/Aside.vue";
import Header from "../../components/Header.vue";

在export default {}中引入

components: {
  Aside,
    Header,
    },

主要import的语句不要写错文件，一开始写在了index.js文件中，结果发生了错误。

正确的三步：

1.页面拆分（这里命名有规定，也可以关闭拼写检查）关闭eslint校验

2.使用相应标签（和vue文件名保持一致）

3.引入组件