本篇文章主要介绍了详解windows下vue-cli及webpack 构建网站(三)使用组件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
1、本文章是建立在《windows下vue-cli及webpack 构建网站(一)环境安装》和《windows下vue-cli及webpack 构建网站(一)导入bootstrap样式》两篇文章之上的。
2、在src\components文件夹下面新建两个组件，分别为 header.vue、footer.vue，打开header.vue文件粘贴下面的代码作为网站的头部。
<!-- 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"> <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>{{ msg }}</div><div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active">首页</li><li>文章</li><li class="dropdown"> 会员 <span class="caret"></span><ul class="dropdown-menu" role="menu"> <li>登录</li><li>注册</li></ul></li></ul></div><!--/.nav-collapse --></div></nav>
打开footer.vue文件，粘贴以下代码作为网站底部：
<div class="blog-footer"> <p>版权所有 盗版必究.</p><p> Back to top</p></div>
保存
3、打开src文件夹下面的app.vue文件，修改模板代码为
<div id="app"> <div class="jumbotron"> <h1>hello word!</h1></div></div>
可以看到代码中我们引入了新创建的两个组件，并且加载到模板当中了，我们保存之后启动一下项目看看。
以上就是详解windows下vue-cli及webpack 构建网站(三)使用组件的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：详解windows下vue-cli及webpack 构建网站(三)使用组件
转载请注明原文链接：详解windows下vue-cli及webpack 构建网站(三)使用组件
