用vue构建项目笔记2(引入自定义头部组件)
2017-07-14 13:49
706 查看
当我们创建好项目以后,前端的工作就是开始切图了,头部导航和尾部导航以及最底部的网站声明都是每个网页必备的,不可能每个网页去写一遍,
用iframe或者load方法去加载,都有非常大的弊端,在vue中,可以用组件功能方便的实现这一需求。下面是我项目中创建头部的过程:
1、找到vue-cli项目中src/components目录,创建文件header.vue。
2、在header.vue中的<template></template>中编写头部代码。
3、在其他页面中引用:
在script标签中写入import topBar from "@/components/common/header" //引入header组件
export default {
data (){
return{}
},
components:{
topBar //注册该组件
}
}
然后在页面中任意位置加入<topBar></topBar>即可引入头部组件
用iframe或者load方法去加载,都有非常大的弊端,在vue中,可以用组件功能方便的实现这一需求。下面是我项目中创建头部的过程:
1、找到vue-cli项目中src/components目录,创建文件header.vue。
2、在header.vue中的<template></template>中编写头部代码。
3、在其他页面中引用:
在script标签中写入import topBar from "@/components/common/header" //引入header组件
export default {
data (){
return{}
},
components:{
topBar //注册该组件
}
}
然后在页面中任意位置加入<topBar></topBar>即可引入头部组件
相关文章推荐
- Vue-cli构建项目, 组件中js代码引入图片路径问题
- 用vue构建项目笔记3(引入jquery和bootstrap)
- Vue-cli项目中,引入css、js或者引入组件,检查后未发现错误,npm红叉报错原因
- 如何在vue-cli+webpack构建的项目引入jquery和bootstrap
- 详解vue-cli快速构建项目以及引入bootstrap、jq
- 如何在 Vue-cli 创建的项目中引入 iView组件UI
- vue-cli快速构建项目>>>>及引入jquery、jquery插件、this的指向 mounted钩子函数应用
- Vue 项目 引入第三方饿了吗组件(ElementUI)
- 从新建vue项目到引入组件Element流程
- 构建vue全家桶项目-引入vue-resource
- vue项目建立一个head组件-vue项目初见存储笔记
- 用vue构建项目笔记1(用vue脚手架创建项目)
- 用vue构建项目笔记6(在vue中使用vue resource)
- vue-cli项目中单文件组件引入bootstrap.js异常的解决方案
- 用vue构建项目笔记4(在vue中使用sass的配置)
- vue全家桶+element-UI搭建后台管理系统(1)“:构建项目并引入element-ui”
- 详解从新建vue项目到引入组件Element的方法
- 饿了么项目---1、vue-cli快速构建项目(包括兼容老项目时需引入bootstrap、jquery的方法)
- vue-cli中如何创建并引入自定义组件
- vue自定义组件和列表循环--vue学习笔记