1.VueCLI2中目录结构的解析

1.1 build和config

build和config文件是对项目webpack的一些配置的封装，可以不用细看，主要关注的是package.json文件中的内容。

1.2 package.json

package.json文件可以对项目的信息和依赖进行配置。

name 项目名称 version 版本号 description 项目描述 author 作者 private 是否私人 scripts ※ 是对脚本起个别名。例："start":"npm run dev"代表执行npm run dev和npm run start效果是一样的。 dependencies 运行时依赖 devDependencies 开发时依赖

1.3 dist

写完项目的代码后，在终端输入npm run build，会将所有的项目代码打包成dist文件，最后提交给服务器的也是dist文件。

dist文件中：

app.hash.js是你编写的vue文件打包，存放的是业务逻辑。

mainfest是底层组件的打包。

vendor是第三方插件提供的打包。

1.4 node_modules

安装的依赖文件。

1.5 src

项目开发的资源文件。

assets:存放的类似图片这样的静态资源。

components:存放的组件资源。

router:存放的是路由文件。

views:存放的是页面。

其余的本文暂时没有涉及。

2.router使用

2.1 main.js

main.js挂载了最大的根组件App.vue，如果想要使用router路由，需要将项目中的router文件引入。

import router from './router'
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

 el绑定挂载根组件id：app，router注册路由，render将App.vue加载展示。

2.2 router/index.js

index是router最重要的配置文件，接下来将详细说明如何使用router。

1.做相关引入

import Vue from "vue";
import VueRouter from "vue-router";

2.将vue页面导入，推荐使用懒加载，路由懒加载，只有使用时才会加载，加快速度。

懒加载示例

const Home = () =>import('../components/Home')
const About = () =>import('../components/About')
const User = () =>import('../components/User')
const HomeNews = () =>import("../components/HomeNews")
const HomeMessage = () =>import("../components/HomeMessage")
const Profile = () =>import('../components/Profile')

3.通过Vue.use(插件)，安装插件

Vue.use(Router)

4.创建VueRouter对象

const router =new Router({
  routes,
  mode:'history',
　//mode默认的模式是哈希，这样跳转的路由会显示'xx/#/xx'的形式，可以改成history去掉#，更加美观。

})

将routes单独抽出，这样方便修改，条例更加清晰。

5.配置路由和组件之间的应用关系，即编写routes数组

const routes = [
  {
    //一开始进入到页面的时候的页面内容
    //redirect表示重定向，直接显示/home的内容
    path:'/',
    redirect:'/home',
  },
  {
    //path表示网页路径
    path:'/home',
    name:'首页',
    //component表示对应组件
    component:Home,
    children:[
      {
        path: '/',
        name:'新闻',
        redirect:'news',
      },
      {
        //里面孩子组件说明的是/home/xxx
        //path路径无需加/会直接默认
        path:'news',
        name:'新闻',
        component:HomeNews,
      },
      {
        path:'message',
        name:'消息',
        component:HomeMessage,
      }
    ]
  },
  {
    path:'/about',
    name:'关于',
    component:About,
  },
  {
    //动态绑定一个uerId
    path:'/user/:id',
    name:'用户',
    component:User,
  },
  {
    path:'/profile',
    component:Profile, 
  }
]

6.导出router

export default router

2.3 App.vue

2.3.1 vue框架

template模板，里面放的是网页代码。

script，存放的是对象，里面有name、data、methods、computed属性等。

style里面写的是样式相关的代码。

2.4 router-link和router-view

2.4.1 router-link 一般使用方法

首页

生成一个可供点击的字段。

to属性表示转到的页面，

tag表示组件的种类是按钮类型，

replace表示不能通过返回回到上一页面，重置了历史，如果不填，则默认可以返回。

2.4.2 动态绑定

用户

用v-bind语法糖，使用对象中的userid数据，例如userid=‘zhangsan’，那么最后的导向的地址是xxx/user/zhangsan

当跳转页面输入了动态的数据时，转向的vue页面也可以使用数据。

在computed属性中，可以对数据进行一些简单计算，通过this.$route.params.id获取。

route表示正处于活跃状态下的路由。

如果有多个数据需要获取，可以通过：

 档案

to后面可以绑定一个对象，path是跳转页面，query放的是键值对。

在导向页面中，可以通过：

$route.query

获取到整个query对象

 

2.4.3 通过点击事件实现页面跳转

首页

首先在button中绑定一个click方法。

 homeClick(){
      //通过代码的方式修改路由vue-router
      //push => pushState
      //this.$router.replace 同上面的replace属性设置
      this.$router.push('/home')
    },

使用this.$router.push加入跳转页面，push方法使用的是可返回的页面跳转。

this.$router.replace使用的是不可返回的。

类似的，如果有数据需要跳转，在方法中应该这样写：

profileClick(){
      this.$router.push({
        path:'/profile',
        query:{
          name:'zhangsan',
          age:18,
          height:1.88,
        }
      })
    }

2.4.4 router-view 的用法

router-view 表示组件内容显示在哪个位置

必须有router-view才能把跳转的路由显示出来。

2.4.5 keep-alive 的用法

keep-alive表示组件不被销毁 exclude属性表示将profile排除在外，如果要多个页面之间加“，”

2.5 router跳转的嵌套

const routes = [
    {
    //path表示网页路径
    path:'/home',
    name:'首页',
    //component表示对应组件
    component:Home,
    children:[
      {
        path: '/',
        name:'新闻',
        redirect:'news',
      },
      {
        //里面孩子组件说明的是/home/xxx
        //path路径无需加/会直接默认
        path:'news',
        name:'新闻',
        component:HomeNews,
      },
      {
        path:'message',
        name:'消息',
        component:HomeMessage,
      }
    ]
  },
]

routes数组里面对象中有个children属性，chilren里面与外层总体一致，但是path路径无需加/会直接默认