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中引用对应的数据

6、在main.js的实例vue对象中，像下面这样。注意：1、“templete:”后面的符号是tab键上面的按键（英文状态下）。2、代码中的类似a标签，但是它必须和to配套在一起，不写会报错，to里面的是组件的注册的path。3、是为了渲染组件。4、$mount("#app")表示手动挂载带id为app的组件中。

new Vue({
  router,
  template: `
  

      

      

        

          
            Toggle navigation
            
            
            
          
          图书馆信息管理平台
        
        

          

            
首页
            
关于我们
          
          
 
            
添加书籍
          
        

      
      
      
  
  `
}).$mount("#app")