vuejs学习——vue+vuex+vue-router项目搭建(二)

前言

 最近比较忙,所有第二章发布晚了,不好意思各位。

vuejs学习——vue+vuex+vue-router项目搭建(一) 中我们搭建好了vue项目,我相信大家已经体验了vue其中的奥妙了,接下来我们结合vue-router来玩玩路由吧!在使用vue-router的同时也要熟悉官方api

准备

  进入项目文件

    打开Node.js command prompt  命令方式进入上章我们创建的VueProject文件夹

  npm下载安装vue-router

    cnpm install vue-router  --save  (--save :安装后放在package.json 的dependencies,这样方便我们查看等)

  运行完上面代码,我们打开项目文件在根目录下找到package.json文件打开

    vuejs学习——vue+vuex+vue-router项目搭建(二)

    这里面会看到我们很多插件的版本号,在dependencies中你会看见我们刚刚安装的 vue-router,进入vue-router的github 看见一句 This is vue-router 2.0 which works only with Vue 2.0  瓦特我明明安装vue-router1的官网跑的为什么变成了vue-router2版本了,万能的网友帮助了我原来也要像webpack的时候加上版本号

vue-router1

cnpm install vue-router@0.7.  --save

  上面安装完成 我们查看以下package.json文件

  vuejs学习——vue+vuex+vue-router项目搭建(二)

  版本号变了,ok 曲折的道路,我们安装完成了,我们接下来新建几个页面试试.npm run dev  go!

  vuejs学习——vue+vuex+vue-router项目搭建(二)

  欧,报错了!大概看看了 需要我们安装vue-loader,

  

 cnpm install vue-loader  --save

  

  npm run dev 走起! 这下成功了我们接下来开始玩吧。

引入vue-router

  打开mian.js  引入路由

import VueRouter from 'vue-router'

Vue.use(VueRouter)

var router = new VueRouter()

  挂载路由

router.start(App, "#app")

 路由重定向:除了路由配置的地址全部跑/main页面

router.redirect({
'*': '/main'
})

下图是我引入搭建好的结果

vuejs学习——vue+vuex+vue-router项目搭建(二)

  引入了vue-router接下来我们新建页面玩玩吧。

登陆页

  首先我们的目录结构大概放上图,新手画不出结构数,按照这个结构我们新建出对应的文件夹。

  vuejs学习——vue+vuex+vue-router项目搭建(二)

  接下来我们在main文件夹里面新增Login.vue。

  大概布局为下图,我们粗略走流程,样式不好看请多包含。

  vuejs学习——vue+vuex+vue-router项目搭建(二)

  布局完后接下来,给用户名和密码绑定对应属性

  

data() {
return {
name: '', //用户名
password: '', //密码
}
},

  登陆方法实现:

login() {if(this.name != '' && this.password != '') {
this.$route.router.go({
  path: 'main' //mian页面下面搭建
})
} else {
layer.msg('账号或密码不能为空!')//我们判断下账号密码是否为空
}
}

mian页面

  接下来我们在view文件夹里新建mian页面,mian页面主要放主体组件的,如

vuejs学习——vue+vuex+vue-router项目搭建(二)

  我们搭建一个常用的后台管理界面:组件分为:头像 user  导航 MenuLeft  顶部导航  AsideHead  都新建在view文件夹里 最近文件结构树如下

vuejs学习——vue+vuex+vue-router项目搭建(二)

  样式界面我就不和大家一起实现 大概实现完界面如下

  vuejs学习——vue+vuex+vue-router项目搭建(二)

content页面

  content页面一共分为三个页面 默认页面 主页 导航 这是哪个页面 内容随便,结构如下

  vuejs学习——vue+vuex+vue-router项目搭建(二)

路由配置

  界面大概都搭建好了,接下来我们进入mian.js 配置路由 ,首先 login登陆调整到mian页面  mian页面中的menu导航点击 调整其余content页面 ,者mian页面下面有子路由,代码如下

router.map({
'/login': {
name: "login",
component: function(resolve) {
require(['./components/main/Login'], resolve)
}
},
'/main': {
component: function(resolve) {
require(['./components/view/main'], resolve)
},
subRoutes: {
'/': { //进入mian页面中 子路由默认显示
name: 'viewone',
component: function(resolve) {
require(['./components/content/ViewOne'], resolve)
}
},
'/hello': {
name: 'hello',
component: function(resolve) {
require(['./components/content/Hello'], resolve)
}
},
'/userHome': {
name: 'userHome',
component: function(resolve) {
require(['./components/content/UserHome'], resolve)
}
},
}
},
})

  ok,路由配置好了, 现在我们可以实现登陆调转到mian页面,点击菜单调整子路由了。

  浏览器输入http://localhost:8080/#!/login  走起

  vuejs学习——vue+vuex+vue-router项目搭建(二)

  成功跑起来了,第二章可能有点乱,但思路按照常见后台管理系统走的,官方文档是最好的老师了,所有很多东西请大家参考一下官网,第三章 VUEX 我们见吧!

  

上一篇:cocos2d-x mac os启动 android helloworld


下一篇:SDUT 3401 数据结构实验之排序四:寻找大富翁.!