页面拆分公共模板与组件化

• App.vue

首先我们要明白的是，页面是在 App.vue 开始启动的

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

上面的代码是 App.vue 的初始状态，需要注意的是 <template> 下还必须有一个父元素 <div> 包裹住页面的元素，然后页面中的所有元素都注入到这个 div 中；

其中的 <router-view/> 对应的是 routers 中不同的路由(模块)页面，切换到不同的路由，就把当前的路由页面 vue 结构替换 App.vue 中的 <router-view/>。

• 组件化

如果项目中存在相似的地方，例如页面的 header，不只在单个页面存在，而且大致相同，我们可以将其封装成组件。

那么该如何封装组件呢？我们可以在 components 文件夹里新建文件 组件.vue 并写好想要的结构样式等；

接下来就是如何去使用封装好的组件呢？我们只需要在使用的地方将其引入并加入 component 属性即可：

<template>
  <div id="app">
  <Header></Header>  // 使用组件
    <router-view/>
  </div>
</template>

<script>
  import Header from '@/components/header'   // 将组件引入

export default {
  name: "App",   // 这里是 App.vue
  components: {
	Header       // 加入到 components 属性中
  }
}
</script>

这里需要注意的是：vue 本身存在 <header> 标签，所以如果是将组件直接命名为 header 应该会出错，所以这里使用了 <Header> 大写来区分。

项目中公用的样式和基础样式可以提取出来放到 assets 文件夹中，然后再在页面中引入：

<style lang="less">
@import url("./assets/common.less");
// 等价于
@import "./assets/common.less";  
</style>

最后

以上就是飞快手链最近收集整理的关于页面拆分公共模板与组件化的全部内容，更多相关页面拆分公共模板与组件化内容请搜索靠谱客的其他文章。