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 // 项目配置信息
.
