VUE-5：脚手架Vuecli、调试devTools、路由1vu
脚手架
https://cli.vuejs.org/zh/
vue-cli 是 vue 提供的一个用于自动化构建和开发项目的工具，也称为：脚手架，它是一系列工具的集合，它主要有：
- 根据配置选项自动构建项目，并安装所需要的依赖
- 启动一个本地开发服务器，通过这个服务器可以基于服务器环境访问本地项目，同时提供了跨域代理服务
- 项目的自动编译、打包
- 项目测试（单元测试、e2e测试）
安装
npm install -g @vue/cli
yarn global add @vue/cli
查看版本
vue --version
vue -V
帮助
vue --help
vue -h
创建项目
vue-cli 提供了两种方式来创建项目
- 命令行 - cli
- 图形界面（基于浏览器） - ui
命令行方式创建项目
基于浏览器图形界面方式创建项目
运行命令以后，根据提示进行选择
运行
项目创建成功以后，进入项目根目录，打开 package.json 文件，我们可以看到
https://cli.vuejs.org/zh/guide/cli-service.html#使用命令
打包
build 打包完成后生成到dist文件夹里
yarn build打包的命令，我们在后期项目开发完成以后再说
项目目录结构文件说明
src
先来说一个最重要的目录 src ，这个就是存放的就是我们项目源码的目录，我们开发过程中大部分的时间就在这个目录中
- main.js
项目的入口文件
- App.vue
首先，这是 vue 提供的一种单文件组件的文件模式（后续会讲），一个 .vue 文件就是一个独立的组件，
这里的 App.vue 是应用的根组件
- components 目录
存放组件的目录
- assets 目录
存放静态资源的目录，比如：图片，css 等。这里的文件与外层 public 目录存放的静态资源的最大区别是：assets 存放的
资源是通过 import 等方式作为模块导入，最后打包处理的。而 public 中的资源并不通过模块方式导入，一般都是通过
script 、link 、img 等方式从浏览器引入的资源，比如无法通过模块化处理的 js 文件（这样的需求情况并不多）
public
一些并非通过模块方式引入的资源文件存放的位置，一般都是通过 script 、link 、img 等方式从浏览器引入的资源，比如无法通过
模块化处理的 js 文件（这样的需求情况并不多）
单文件组件
vue 也是基于组件的开发模式，我们知道一个 UI 组件包含
- 结构
- 样式
- 行为
vue 的单文件组件是官方提供的一种用来组织组件代码的形式，该文件以 `.vue` 为后缀，该文件会被 vue-cli 内置的 webpack
解析生成对应的 javascript、html、css 文件
https://vue-loader-v14.vuejs.org/zh-cn/start/spec.html
组成
一个单文件组件的 结构、样式、行为 分别通过三个标签来进行定义和划分
单文件组件把一个组件所包含的 结构、样式、行为 分别通过 template、style、script 进行分离包含，然后统一组织在一个文件中
一个单文件组件最少必须包含 template，可以不需要 script 和 style
lang 属性
无论是 template、script 还是 style，都可以通过 lang 属性来指定它们所使用的语言
src 属性
我们还可以通过 src 属性把文件分离到单独的文件中
这里的 src 同样遵循模块化的导入规则，`./` 开头的表示相对路径，`/` 开头表示 NPM 包中的资源
scoped 属性（有作用域的 CSS）
当 `style` 标签有 `scoped` 属性时，它的 CSS 只作用于当前组件中的元素。这类似于 Shadow DOM 中的样式封装
混用本地和全局样式
资源路径处理
在项目开发中，我们经常会碰到要引入外部资源的需求，vue 单文件系统中，对资源引入路径有一定的特殊处理
- 绝对路径前缀
- 相对路径前缀
- 特殊前缀
vue-devTools 调试
为了更方便的在开发过程中对 Vue 程序进行调试，除了传统的浏览器自带的 debug 工具以外，我们还可以通过一些专门为 Vue 提供
的扩展插件来进行调试
参考：https://github.com/vuejs/vue-devtools
Vue.js-devtools，[点击下载](./assets/Vue.js-devtools_v3.1.6.crx)
安装步骤
1、首先进入浏览器设置，点击 `扩展程序`
2、开启 `开发者模式`，点击 `加载已解压的扩展程序` 或者 直接拖拽已解压的扩展程序
注：已解压的扩展程序就是上面下载的 Vue.js-devtools_v3.1.6.crx
3、安装成功以后就可以看到：
点击红框处开启
4、通过 `npm run serve` 启动应用以后，即可看到浏览器右上角的 Vue 插件图片，图 `红框一` 处，表示 `Vue.js devtools` 已启动，
点击图 `红框二` 的 vue 一项
路由
当应用变得复杂以后，我们就需要通过一种便捷、高效的方式来管理应用，最常见的就是通过路由
路由：把 url 与 应用中的对应的组件进行关联，通过不同的 url 访问不同的组件
vue-router 的安装
npm i vue-router
OR
yarn add vue-router
Vue.use()
通过前面提到的 Vue.use 方法，把 vue-router 安装到指定的 Vue 实例中
创建路由对象
通过 vue-router 提供的 Router 构造函数（类）创建路由对象，路由对象包含了当前使用的模式（hash、history）、路由信息
（url 与 组件的对应关系）等信息
import Router from 'vue-router';
import Home from './views/Home.vue';
import Home from './views/About.vue';
const myRouter = new Router({
mode: 'history',
routes: [
{
path: '/',
component: Home
},
{
path: '/about',
component: About
}
]
});
...,
new Vue({
...,
router: myRouter
});
router-view 组件
配置了路由信息以后，我们还需要页面（组件）中指定路由对应的组件出现的位置，当当前访问的 url 与某个路由信息匹配的时候，
该组件就会出现在 router-view 组件所在的位置
// App.vue
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<hr>
<router-view/>
</div>
</template>
路由配置案例：
main.js
index.js
app.vue
异步请求
在实际的应用开发中，与后端交互，进行异步请求是很常见的需求
axios安装
npm i axios
请求
跨域
vue-cli 提供了一个内置基于 node 的 webserver ，我们可以使用它提供的 proxy 服务来进行跨域请求代理
vue.config.js
在项目的根目录下创建一个 vue.config.js 的文件，通过 `npm run serve` 启动服务的时候，会读取该文件
跨域请求代理配置
// vue.config.js
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:7777',
pathRewrite: {
'^/api': ''
}
}
}
}
}
修改配置文件，需要重启服务：`npm run serve`
// home.vue
<script>
...
created() {
axios({
url: '/api/items'
}).then(res => {
this.items = res.data;
});
}
...
</script>
动态路由
有的时候，我们需要把满足某种规则的路由全部匹配到同一个组件，比如不同的商品的 url
我们不可能为每一个商品都定义一个独立的组件，而是把它们都映射到同一个组件，同时 url 后面的部分为动态变化的部分，我们会
在设计路由的时候进行特殊的处理
其中 `:itemId` 表示匹配的 url 中动态部分内容，如上面的 1,2,3 等，同时该值将被赋值给路由的变量 itemId
路由对象
vue-router 会在组件中添加（注入）两个属性
- $router
- $route
$router 对象
该对象其实就是 new VueRouter(...) 得到的路由对象，通过该对象我们可以访问全局路由信息，调用路由下的方法，
比如：`go`、`back`、`push` 等
$route 对象
通过该对象可以访问与当前路由匹配的信息
$route.params
获取动态路由有关的信息
Detail.vue
router/index.js
router/index.js
apis.js
queryString（？后面的东西）
有的时候，我们可能也会用到 queryString
$route.query
我们可以通过路由对象 $route 的 query 属性来获取 queryString
编程式导航
有的时候，我们可能需要用到编程的方式来导航（跳转），而不是点击链接。如：当 `sort` 发生改变的时候跳转
路由组件的复用
为了提高性能，增强路由组件的复用，当路由切换使用的是同一个组件的时候，则会复用该路由组件，而不是销毁重建，这个时候，
我们就需要通过 watch 或者 路由相关的生命周期函数来处理切换路由导致的变化
watch
如果切换的路由复用了组件，这个时候，我们可以使用 watch 监听 $route
to : 改变之后的 $route 对象
from : 改变之前的 $route 对象
但是我们可以使用 vue-router 提供路由守卫 （路由有关的生命周期函数）来处理路由有关的业务逻辑
路由守卫
当导航发生改变的时候，vue-router 会在多个不同的地方调用指定的函数，也就是与路由有关的生命周期函数，也称为：路由守卫
- 组件内守卫
- 路由独享守卫
- 全局守卫
组件内守卫
定义在组件内的与路由有关的生命周期函数（守卫）
- beforeRouteEnter
- beforeRouteUpdate
- beforeRouteLeave
beforeRouteEnter
当路由解析完成，并中指定的组件渲染之前（组件 `beforeCreate` 之前），这里不能通过 `this` 访问组件实例，需要通过
`next` 回调来进行调用
Home.vue
beforeRouteUpdate
在当前路由改变，但是该组件被复用时调用
beforeRouteLeave
导航离开该组件的对应路由时调用
路由守卫参数
to
即将要进入的目标 路由对象（$route）
from
当前导航正要离开的路由对象（$route）
next
路由确认回调函数，类似 Promise 中的 resolve 函数，一定要确保调用 next 函数，但是后续的导航行为将依赖 next 方法的调用参数
路由独享的守卫
可以在路由配置上直接定义 `beforeEnter` 守卫，相对来说，应用不多
router/index.js
全局守卫
全局守卫是注册在 router 对象（new VueRouter({...})）上的
- beforeEach
- beforeResolve
- afterEach
beforeEach
注册在路由对象上，当一个导航触发时，全局前置守卫按照创建顺序调用
router/index.js
beforeResolve
在所有组件内守卫和异步路由组件被解析之后被调用
afterEach
导航被确认后调用
因为导航已经被确认，所以没有 `next`
嵌套路由
一些比较复杂的应用会有多层嵌套的路由和组件组成
在应用增加一个用户个人中心，用户中心又是由多个页面组成，如：
添加路由与子路由
children 属性
一个路由中的 `children` 表示嵌套的子路由
子路由视图
有了子路由以后，还需要在视图组件中设置 `router-view`
重定向redirect
有的时候，我们会根据某种需求对用户请求的页面进行重新定位
案例
现有一小说网站，提供了 男生频道 和 女生频道 的两个入口，用户首次进入页面的时候，会出现选择，并记住用户的选择，以后
该用户进入网站直接根据记录的选择进入对应的频道
组件
路由配置
redirect
别名alias
重定向，是从一个路由切换到另外一个路由，而别名是不同的路由显示同一个页面，比如：`/user` 是用户中心的路由，`/member` ，
我们也可以给这个页面定义另外一个路由，虽然在某些时候，重定向与别名有类似的效果，但是，别名不存在跳转，浏览器地址栏上
显示的 URL 并不会切换
404
