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

vue小项目整理—main.js（一）相关推荐

适合初学者练手的vue小项目（附github源码）
vue慢慢的成为了前端最受欢迎的框架之一,在很多项目之中开发都能用得到,如今也已经发展到3.0了,可能是因为这个框架可以提高工作效率,因此受到大家的追捧,在之前的文章里面也说过,2019年,大前端学习 ...
vue小项目总结与笔记【五】——一个轮播图插件vue-awesome-swiper
本次使用github上的一个开源插件,使用的是2.6.7稳定版本.安装指定版本的方法:在插件名后面加@版本号 ,即可 npm install vue-awesome-swiper@2.6.7 --sa ...
Vue小项目Mock.js的学习
前后端分离项目前后端约定好API接口&数据&参数前后端并行开发,前端工程师只需要编写HTM页面,通过HTTP请求调用后端提供的接口服务即可.后端只要愉快的开发接口就行了.无强依赖, ...
Vue Cli项目使用PDF.js预览pdf无法访问到viewer.html
今天在开发移动端项目中有个需求是手机端预览pdf,ios可以直接在浏览器预览,安卓不行,所以使用pdf.js来解决,之前项目用过该插件很好用,但是今天使用的时候发现根本没有访问到viewer.html ...
适合初学者练手的vue小项目
1:Vue2.0入门项目 https://github.com/SD-Gaming/Vue2.0_to_do_list-addName- 2:慕课网Vue2.0购物车教程(注释版) https://g ...
初学者练手的vue小项目
1:Vue2.0入门项目 https://github.com/SD-Gaming/Vue2.0_to_do_list-addName- 2:慕课网Vue2.0购物车教程(注释版) https://g ...
签到APP：android入门级小项目，Node.js 提供服务端接口。
2019独角兽企业重金招聘Python工程师标准>>> ###一.项目描述实验室小伙伴们通过APP连接实验室路由器,比对路由器Mac地址进行签到.此外小伙伴们还可通过APP进行 ...
vue小项目总结与笔记【六】——使用axios发送ajax请求
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 安装: npm install axios --save 引入: import axios from ...
bbs小项目整理（八）（总结、源码分享）
前面的几个模块基本上完成了,剩下的几个模块操作过程基本相似. 这里就不在赘述了:直接上源代码吧. 百度网盘:链接:http://pan.baidu.com/s/1b6UaGA 密码:s1di GItH ...

vue小项目整理—main.js（一）

vue小项目整理—main.js（一）相关推荐

最新文章

热门文章