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.引入组件