vue学习笔记（四）

一、vue-router

1、简介

我们经常使用vue开发单页面应用程序（SPA）。在开发SPA过程中，路由是必不可少的部分，vue的官方推荐是vue-router。单页面应用程序看起来好像是一个页面，其实是在一个页面中切换不同的html部分，从而达到所谓的单页面,在这切换之中，就需要使用路由来实现不同的页面内容的展现。

2、基本用法

（1）.使用步骤

vue-router的基本使用步骤如下：

• 定义需要切换的组件
• 配置路由，规定路径到组件的映射关系
• 创建路由实例
• 将路由挂载到vue实例

//1.定义组件，用于路由切换
var Home = {
    template: '<div>我是主页</div>'
}
var News = {
    template: '<div>我是新闻</div>'
}

//2.配置路由
const routes = [{
        path: '/home',
        component: Home
    },{
        path: '/news',
        component: News
    },{ //这一路由配置用于首次访问或者找不到所请求路由，自动跳转home页
        path: '*',
        redirect: '/home'
}];

//3.创建路由实例
var router = new VueRouter({
    routes  //传入配置好的路由信息
});

//4.挂载路由到根组件
new Vue({
    el: '#app',
    router
});

这样我们就配置好了一个完整的路由。在切换组件的时候会根据路由加载不同的组件。我们使用类似a标签的<router-link to="url"></router-link>触发组件的切换，to属性存放的是路径。使用<router-view></router-view>来显示所切换组件。

<div id="app">
    <router-link to="/home">主页</router-link>
    <router-link to="/news">新闻</router-link>

    <router-view></router-view>
</div>

这样我们就可以实现主页和新闻组件间的切换。

（2）.参数传递

可能我们需要向所切换组件传递参数。vue提供了两种向组件传递参数的方式。

• 查询字符串的形式
• • /home?name=dawei&pwd=666
• • 在组件内部使用{{$route.query}}接收参数
• rest风格
• • /news/param1/param2
• • 在组件内部使用{{$route.params}}接收参数

（3）.路由嵌套

路由还可以多层嵌套使用，使用children属性。

{
    path:'/user',
    component:User,
    children:[
        {
            path:'login',
            component:Login
        },
        {
            path:'regist',
            component:Regist
        }
    ]
}

子路由项路径不要使用/开头，以 / 开头的嵌套路径会被当作根路径。

在组件中就可以使用该路由：

<div>
    <h3>用户信息</h3>
    <ul>
        <router-link to="/user/login">用户登陆</router-link>
        <router-link to="/user/regist">用户注册</router-link>
    </ul>
    <router-view></router-view>
</div>

注意路径的写法。

3、路由实例的方法

这里学习两个路由实例的方法：router.push()和router.replace()。

• router.push()：添加路由，功能上与<route-link>相同

• router.replace()： 替换路由，不产生历史记录

  router.push({path:'home'})
  
  router.replace({path:'user'})

4、路由结合动画

路由结合动画使用很简单，我们可以用 <transition> 组件给它添加一些动画效果：

<transition>
  <router-view></router-view>
</transition>

二、单文件组件

1、.vue文件

.vue文件称为单文件组件，是Vue.js自定义的一种文件格式，一个.vue文件就是一个单独的组件，在文件内封装了组件相关的代码：html、css、js代码。

.vue文件由三部分组成：<template>、<style>、<script>:

<template>
    //html
</template>

<script>
    //js
</script>

<style>
    //css
</style>

2、vue-loader

浏览器本身并不认识.vue文件，此时需要vue-loader对.vue文件进行加载解析，。类似的loader还有许多，如：html-loader、css-loader、style-loader、babel-loader等。需要注意的是vue-loader是基于webpack的。

3、webpack

webpack是一个前端资源模板化加载器和打包工具，它能够把各种资源都作为模块来使用和处理。实际上，webpack是通过不同的loader将这些资源加载后打包，然后输出打包后文件。简单来说，webpack就是一个模块加载器，所有资源都可以作为模块来加载，最后打包输出。

三、vue-cli

1. 简介

vue-cli是一个vue脚手架，可以帮助我们快速构造项目结构，减少开发人员开发阻力。vue-cli集成了多种版本：

• simple ：比较简单
• webpack ：包含ESLint代码规范检查和unit单元测试等
• webpack-simple： 没有代码规范检查和单元测试
• browserify： 使用的也比较多
• browserify-simple

2.安装、操作步骤

//安装vue-cli，配置vue命令环境
    cnpm install vue-cli -g
    vue --version
    vue list

// 初始化项目，生成项目模板
    vue init 模板名  项目名

//进入生成的项目目录，安装模块包
    cd vue-cli-demo
    cnpm install

//运行
    npm run dev  //启动测试服务
    npm run build //将项目打包输出dist目录，项目上线的话要将dist目录拷贝到服务器上

3.文件介绍

.
|-- build                            // 项目构建(webpack)相关代码
|   |-- build.js                     // 生产环境构建代码
|   |-- check-version.js             // 检查node、npm等版本
|   |-- dev-client.js                // 热重载相关
|   |-- dev-server.js                // 构建本地服务器
|   |-- utils.js                     // 构建工具相关
|   |-- webpack.base.conf.js         // webpack基础配置
|   |-- webpack.dev.conf.js          // webpack开发环境配置
|   |-- webpack.prod.conf.js         // webpack生产环境配置
|-- config                           // 项目开发环境配置
|   |-- dev.env.js                   // 开发环境变量
|   |-- index.js                     // 项目一些配置变量
|   |-- prod.env.js                  // 生产环境变量
|   |-- test.env.js                  // 测试环境变量
|-- src                              // 源码目录
|   |-- components                     // vue组件
|   |-- store                          // 状态管理
|   |-- App.vue                        // 页面入口vue文件
|   |-- main.js                        // 程序入口文件，加载各种公共组件
|-- static                           // 静态文件
|   |-- data
|-- .babelrc                         // ES6语法编译配置
|-- .editorconfig                    // 定义代码格式
|-- .gitignore                       // git上传需要忽略的文件格式
|-- README.md                        // 项目说明
|-- favicon.ico                      //网页图标
|-- index.html                       // 入口页面
|-- package.json                     // 项目配置信息
.

此列表拷贝自：https://segmentfault.com/a/11...