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")