AI专业者开发社区 1 号成员
  •  0 回帖  •  6 浏览  •  4 个月前
   

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 文件打开

　　　　

　　　　这里面会看到我们很多插件的版本号，在 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.13  --save

 

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

　　

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

　　

　　欧，报错了！大概看看了 需要我们安装 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'
})

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

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

登陆页

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

　　

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

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

　　

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

　　

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

 

 　　登陆方法实现：

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

 mian 页面

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

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

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

　　

content 页面

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

　　

路由配置

　　界面大概都搭建好了，接下来我们进入 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  走起

　　

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