vue小项目整理—main.js(一)

1、在main.js中引入vue-router插件(引用组件地址)和vue-resource(为了使用外部json数据)插件。

import vueRouter from 'vue-router'
import vueResource from 'vue-resource'

2、在main.js中启用两个插件。

Vue.use(vueRouter)
Vue.use(vueResource) 

3、如果在components中的新建的vue组件需要被使用的话,那么同样也是需要先引用再注册的。注意:1、引用后面是没有“,”的。2、BooksInfo、AddBooks这些是可以自己命名的。3、“components/BooksInfo”这里的BookInfo只是省略了.vue的后缀,别想咋咋地。

import BooksInfo from './components/BooksInfo'
import AddBooks from './components/AddBooks'
import AboutUs from './components/AboutUs'
import BooksDetails from './components/BooksDetails'
import ChangeBooks from './components/ChangeBooks'

4、在main.js中实例化一个路由,并配置路由(可能点不准确),注意:1、如果你在components中的其他vue组件没有建立就不要引用了。2、{path:"/",component:BooksInfo}中的component没有s不要画蛇添足。3、在每个{path:"/",component:BooksInfo}后面如果有注册组件的行为记得加“,”。4、注意跨组件传输数据的格式。

const router=new vueRouter({
    mode:"history",
    base:__dirname,
    routes:[
    // 注册显示信息的根组件
    {path:"/",component:BooksInfo},
    // 注册添加图书信息组件
    {path:'/AddBooks',component:AddBooks},
    // 注册关于我们组件
    {path:"/AboutUs",component:AboutUs},
    // 注册书籍详细信息组件,注意:因为需要跨组件传输数据,所以在路由地址上需要有所改变,下同
    {path:"/BooksDetails/:id",component:BooksDetails},
    // 注册书籍修改组件
    {path:'/ChangeBooks/:id',component:ChangeBooks}
    ]
})

5、我的项目引用了bootstrap框架,所以需要在程序的入口index.html中引用对应的数据

    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
6、在main.js的实例vue对象中,像下面这样。注意:1、“templete:”后面的符号是tab键上面的按键(英文状态下)。2、代码中的<router-link>类似a标签,但是它必须和to配套在一起,不写会报错,to里面的是组件的注册的path。3、<router-view>是为了渲染<router-link>组件。4、$mount("#app")表示手动挂载带id为app的组件中。
new Vue({
  router,
  template: `
  <div id="app">
      <nav class="navbar navbar-default">
      <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>
          <router-link class="navbar-brand" to="/">图书馆信息管理平台</router-link>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li><router-link to="/">首页</router-link></li>
            <li><router-link to="/AboutUs">关于我们</router-link></li>
          </ul>
          <ul class="nav navbar-nav navbar-right"> 
            <li><router-link to="/AddBooks">添加书籍</router-link></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
      </nav>
      <router-view></router-view>
  </div>
  `
}).$mount("#app")

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值