betway必威-betway必威官方网站
做最好的网站

【必威官方网站】构建网站

详解windows下vue-cli及webpack 塑造网址(三)使用组件,vue-cliwebpack

1、本小说是创立在《windows下vue-cli及webpack 构建网址(一)遇到设置》和《windows下vue-cli及webpack 营造网址(一)导入bootstrap样式》两篇小说之上的。

2、在srccomponents文件夹上面新建多个零件,分别为 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"> 
   Toggle navigation 



   </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">会员 </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>

能够看来代码中大家引进了新创造的多个零部件,况且加载到模板当中了,大家保留之后运营一下项目看看。

必威官方网站 1

以上正是本文的全体内容,希望对大家的学习抱有帮忙,也期望大家多多辅助帮客之家。

营造网址(三)使用组件,vue-cliwebpack 1、本小说是创制在《windows下vue-cli及webpack 构建网址(一)情况设置》和《windo...

1、本文章是起家在《windows下vue-cli及webpack 创设网址(一)碰到设置》和《windows下vue-cli及webpack 营造网址(一)导入bootstrap样式》两篇小说之上的。

详解windows下vue-cli及webpack 构建网址(四) 路由vue-router的运用,vue-clivue-router

windows下vue-cli及webpack 创设网址(一)情况设置

 windows下vue-cli及webpack 创设网址(二)导入bootstrap样式

windows下vue-cli及webpack 营造网站(三)使用组件 

1、本篇小说是确立在上述三篇小说的根底上的。

2、安装 vue-router 插件,运营cmd踏向到品种目录上边,运营以下命令:

cnpm install vue-router --save-dev 

必威官方网站 2

3、在src文件夹下边新建贰个文件夹page用于贮存模板文件,然后分别在这些文件夹上边新建 index.vue、list.vue八个公文,然后打开index.vue粘贴以下代码:

<template> 

 <div class="jumbotron"> 
    <h1>这里是首页!</h1> 
 </div> 

</template> 

保留之后再张开list.vue粘贴以下代码:

<template> 

  <div class="list-group"> 
   <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="list-group-item active"> 
    这里是列表页 
   </a> 
   <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="list-group-item">Dapibus ac facilisis in</a> 
   <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="list-group-item">Morbi leo risus</a> 
   <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="list-group-item">Porta ac consectetur ac</a> 
   <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="list-group-item">Vestibulum at eros</a> 
  </div> 

</template> 

好了,几个页面的内容都策动好了,接下去我们修改入口文件app.vue的剧情呢

4、展开src文件夹下边包车型客车app.vue文件,修改代码为

<template> 
 <div> 
 <HtmlHeader></HtmlHeader> 
   <router-view 
    class="view" 
    keep-alive 
    transition 
    transition-mode="out-in"> 
   </router-view> 
<HtmlFooter></HtmlFooter>   
  </div> 

</template> 


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

此地用了 router-view 来把刚刚新建的四个页面加载到此处来

修改了入口文件接下去便是要拓宽路由准则的配置了。

5、在src文件夹上面新建三个文件夹config用来存放路由安顿,在config文件夹上边新建routes.js文件并开垦,然后粘贴以下代码并保存:

//加载模板文件 
import index from '../page/index' 
import list from '../page/list' 
//路由规则设置 
export default [ 
  { 
    path: '/', 
    component: index 
  }, 
  { 
    path: '/list', 
    component: list 
  } 
] 

未来路由配置文件也曾经安插好了,我们接下去正是要开采sec文件夹下边包车型地铁main.js文件设置路由使用了

6、张开main.js 文件,在头顶加入以下代码

// 引用路由插件 
import VueRouter from 'vue-router' 
// 试用路由插件 
Vue.use(VueRouter) 
//引入路由配置文件 
import routes from './config/routes' 
// 使用配置文件规则 
const router = new VueRouter({ 
 mode: 'history', 
 base: __dirname, 
 routes: routes }) 

本条是引进路由插件并且利用,然后加载路由准绳

接着把

new Vue({ 
 el: '#app', 
 template: '<App/>', 
 components: { App } 
}) 

修改为

const app = new Vue({ 
   router: router, 
   render: h => h(App) 
}).$mount('#app') 

必威官方网站 3

安装完之后全体页面代码如图

7、加载开端运转 npm run dev 查看效果啊,张开  和  就足以观望分歧的遵守了

以上正是本文的全体内容,希望对大家的读书抱有支持,也期望大家多多支持帮客之家。

构建网站(四) 路由vue-router的应用,vue-clivue-router windows下vue-cli及webpack 营造网址(一)境况设置 windows下vue-cli及webp...

2、在srccomponents文件夹下边新建多个零部件,分别为 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"> 
   Toggle navigation 



   </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">会员 </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文件,粘贴以下代码作为网址尾巴部分:

本文由betway必威发布于网页设计,转载请注明出处:【必威官方网站】构建网站

Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。