详解windows下vue-cli及webpack 构建网站(三)使用组件


Posted in Javascript onJune 17, 2017

1、本文章是建立在《windows下vue-cli及webpack 构建网站(一)环境安装》和《windows下vue-cli及webpack 构建网站(一)导入bootstrap样式》两篇文章之上的。

2、在src\components文件夹下面新建两个组件,分别为 header.vue、footer.vue,打开header.vue文件粘贴下面的代码作为网站的头部。

<template> 
 <!-- Fixed navbar --> 
 <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
  <div class="container"> 
  <div class="navbar-header"> 
   <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
   <span class="sr-only">Toggle navigation</span> 
   <span class="icon-bar"></span> 
   <span class="icon-bar"></span> 
   <span class="icon-bar"></span> 
   </button> 
   <a class="navbar-brand" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >{{ msg }}</a> 
  </div> 
  <div id="navbar" class="navbar-collapse collapse"> 
   <ul class="nav navbar-nav"> 
   <li class="active"><a href="/" rel="external nofollow" >首页</a></li> 
   <li><a href="/list" rel="external nofollow" >文章</a></li> 
   <li class="dropdown"> 
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="dropdown-toggle" data-toggle="dropdown">会员 <span class="caret"></span></a> 
    <ul class="dropdown-menu" role="menu"> 
    <li><a href="/user/login" rel="external nofollow" >登录</a></li> 
    <li><a href="/user/register" rel="external nofollow" >注册</a></li> 
    </ul> 
   </li> 
   </ul> 
  </div><!--/.nav-collapse --> 
  </div> 
 </nav> 
</template> 
<script> 
export default { 
 name: 'header', 
 data () { 
 return { 
  msg: 'LOGO' 
 } 
 } 
} 
</script>

打开footer.vue文件,粘贴以下代码作为网站底部:

<template>
 <div class="blog-footer">
  <p>版权所有 盗版必究.</p>
  <p>
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Back to top</a>
  </p>
 </div>
</template>

保存

3、打开src文件夹下面的app.vue文件,修改模板代码为

<template>
<div id="app">
 <HtmlHeader></HtmlHeader>
 <div class="jumbotron">
  <h1>hello word!</h1>
 </div>
 <HtmlFooter></HtmlFooter>
</div>
</template>

<script>
import HtmlHeader from './components/header'
import HtmlFooter from './components/footer'
export default {
 components: {
 HtmlHeader,
 HtmlFooter
 }
}
</script>

可以看到代码中我们引入了新创建的两个组件,并且加载到模板当中了,我们保存之后启动一下项目看看。

详解windows下vue-cli及webpack 构建网站(三)使用组件

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于jquery css的使用介绍
Apr 18 Javascript
js 动态修改css文件的方法
Aug 05 Javascript
浅谈javascript中的DOM方法
Jul 16 Javascript
JavaScript数组对象赋值用法实例
Aug 04 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
Sep 15 Javascript
javascript简单判断输入内容是否合法的方法
May 11 Javascript
JS实现的RGB网页颜色在线取色器完整实例
Dec 21 Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
Mar 15 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
Mar 13 Javascript
JavaScript继承定义与用法实践分析
May 28 Javascript
webpack+vue-cli项目中引入外部非模块格式js的方法
Sep 28 Javascript
Angular8 简单表单验证的实现示例
Jun 03 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
Jun 17 #Javascript
js简易版购物车功能
Jun 17 #Javascript
Webpack如何引入bootstrap的方法
Jun 17 #Javascript
Webpack执行命令参数详解
Jun 17 #Javascript
JS实现留言板功能
Jun 17 #Javascript
利用vscode编写vue的简单配置详解
Jun 17 #Javascript
JavaScript用二分法查找数据的实例代码
Jun 17 #Javascript
You might like
PHP+FLASH实现上传文件进度条相关文件 下载
2007/07/21 PHP
php+html5基于websocket实现聊天室的方法
2015/07/17 PHP
php数组冒泡排序算法实例
2016/05/06 PHP
thinkphp3.2.0 setInc方法 源码全面解析
2018/01/29 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
解决PHP使用CURL发送GET请求时传递参数的问题
2019/10/11 PHP
模仿jQuery each函数的链式调用
2009/07/22 Javascript
原生javascript实现图片轮播效果代码
2010/09/03 Javascript
THREE.JS入门教程(2)着色器-上
2013/01/24 Javascript
jQuery图片滚动图片的效果(另类实现)
2013/06/02 Javascript
jQuery.holdReady()方法用法实例
2014/12/27 Javascript
Javascript中innerHTML用法实例分析
2015/01/12 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
2015/11/17 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
2016/06/20 Javascript
EditPlus中的正则表达式 实战(4)
2016/12/15 Javascript
BootStrap实现带关闭按钮功能
2017/02/15 Javascript
node.js操作mongodb简单示例分享
2017/05/25 Javascript
Vue.extend构造器的详解
2017/07/17 Javascript
JavaScript基于面向对象实现的猜拳游戏
2018/01/03 Javascript
Angular Material Icon使用详解
2018/11/07 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
2019/09/26 Javascript
[48:24]完美世界DOTA2联赛循环赛LBZS vs Forest 第一场 10月30日
2020/10/31 DOTA
[32:47]完美世界DOTA2联赛 GXR vs IO 第二场 11.07
2020/11/09 DOTA
[52:52]完美世界DOTA2联赛PWL S3 LBZS vs access 第一场 12.10
2020/12/13 DOTA
django模型中的字段和model名显示为中文小技巧分享
2014/11/18 Python
遗传算法之Python实现代码
2017/10/10 Python
浅谈Python中的异常和JSON读写数据的实现
2020/02/27 Python
python中return如何写
2020/06/18 Python
Python3爬虫ChromeDriver的安装实例
2021/02/06 Python
Visual-Click葡萄牙:欧洲领先的在线眼镜商
2020/02/17 全球购物
信息部岗位职责
2013/11/12 职场文书
商务专员岗位职责
2013/11/23 职场文书
关于期中考试的反思
2014/02/02 职场文书
马智宇婚礼主持词
2014/03/22 职场文书
县政府领导班子四风问题对照检查材料思想汇报
2014/09/26 职场文书
2015年教师业务工作总结
2015/05/26 职场文书