VUE-5:脚手架Vuecli、调试devTools、路由1vue-router、router-view

脚手架

    https://cli.vuejs.org/zh/

    vue-cli 是 vue 提供的一个用于自动化构建和开发项目的工具,也称为:脚手架,它是一系列工具的集合,它主要有:

                - 根据配置选项自动构建项目,并安装所需要的依赖

                - 启动一个本地开发服务器,通过这个服务器可以基于服务器环境访问本地项目,同时提供了跨域代理服务

                - 项目的自动编译、打包

                - 项目测试(单元测试、e2e测试)


安装

VUE-5:脚手架Vuecli、调试devTools、路由1vue-router、router-view_第1张图片

        npm install -g @vue/cli

        yarn global add @vue/cli


查看版本

    vue --version

    vue -V

帮助

    vue --help

    vue -h


创建项目

    vue-cli 提供了两种方式来创建项目

        - 命令行 - cli

        - 图形界面(基于浏览器) - ui


命令行方式创建项目

基于浏览器图形界面方式创建项目

        运行命令以后,根据提示进行选择


运行

项目创建成功以后,进入项目根目录,打开 package.json 文件,我们可以看到

VUE-5:脚手架Vuecli、调试devTools、路由1vue-router、router-view_第2张图片
https://cli.vuejs.org/zh/guide/cli-service.html#使用命令

打包

        build    打包完成后生成到dist文件夹里

        yarn build打包的命令,我们在后期项目开发完成以后再说


项目目录结构文件说明

VUE-5:脚手架Vuecli、调试devTools、路由1vue-router、router-view_第3张图片

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

组成

        一个单文件组件的 结构、样式、行为 分别通过三个标签来进行定义和划分

VUE-5:脚手架Vuecli、调试devTools、路由1vue-router、router-view_第4张图片
VUE-5:脚手架Vuecli、调试devTools、路由1vue-router、router-view_第5张图片

        单文件组件把一个组件所包含的 结构、样式、行为 分别通过 template、style、script 进行分离包含,然后统一组织在一个文件中

        一个单文件组件最少必须包含 template,可以不需要 script 和 style

lang 属性

        无论是 template、script 还是 style,都可以通过 lang 属性来指定它们所使用的语言

VUE-5:脚手架Vuecli、调试devTools、路由1vue-router、router-view_第6张图片

src 属性

        我们还可以通过 src 属性把文件分离到单独的文件中

        这里的 src 同样遵循模块化的导入规则,`./` 开头的表示相对路径,`/` 开头表示 NPM 包中的资源


scoped 属性(有作用域的 CSS)

        当 `style` 标签有 `scoped` 属性时,它的 CSS 只作用于当前组件中的元素。这类似于 Shadow DOM 中的样式封装

VUE-5:脚手架Vuecli、调试devTools、路由1vue-router、router-view_第7张图片
VUE-5:脚手架Vuecli、调试devTools、路由1vue-router、router-view_第8张图片

混用本地和全局样式

VUE-5:脚手架Vuecli、调试devTools、路由1vue-router、router-view_第9张图片

资源路径处理

        在项目开发中,我们经常会碰到要引入外部资源的需求,vue 单文件系统中,对资源引入路径有一定的特殊处理

                - 绝对路径前缀

                - 相对路径前缀

                - 特殊前缀

VUE-5:脚手架Vuecli、调试devTools、路由1vue-router、router-view_第10张图片

vue-devTools 调试

        为了更方便的在开发过程中对 Vue 程序进行调试,除了传统的浏览器自带的 debug 工具以外,我们还可以通过一些专门为 Vue 提供

        的扩展插件来进行调试

        参考:https://github.com/vuejs/vue-devtools

Vue.js-devtools,[点击下载](./assets/Vue.js-devtools_v3.1.6.crx)

安装步骤

1、首先进入浏览器设置,点击 `扩展程序`

VUE-5:脚手架Vuecli、调试devTools、路由1vue-router、router-view_第11张图片

2、开启 `开发者模式`,点击 `加载已解压的扩展程序` 或者 直接拖拽已解压的扩展程序

​      注:已解压的扩展程序就是上面下载的 Vue.js-devtools_v3.1.6.crx

VUE-5:脚手架Vuecli、调试devTools、路由1vue-router、router-view_第12张图片

3、安装成功以后就可以看到:

VUE-5:脚手架Vuecli、调试devTools、路由1vue-router、router-view_第13张图片

        点击红框处开启

4、通过 `npm run serve` 启动应用以后,即可看到浏览器右上角的 Vue 插件图片,图 `红框一` 处,表示 `Vue.js devtools` 已启动,

      点击图 `红框二` 的 vue 一项


路由

        当应用变得复杂以后,我们就需要通过一种便捷、高效的方式来管理应用,最常见的就是通过路由

        路由:把 url 与 应用中的对应的组件进行关联,通过不同的 url 访问不同的组件

VUE-5:脚手架Vuecli、调试devTools、路由1vue-router、router-view_第14张图片

vue-router 的安装

        npm i vue-router

            OR

        yarn add vue-router

Vue.use()

        通过前面提到的 Vue.use 方法,把 vue-router 安装到指定的 Vue 实例中

VUE-5:脚手架Vuecli、调试devTools、路由1vue-router、router-view_第15张图片

创建路由对象

        通过 vue-router 提供的 Router 构造函数(类)创建路由对象,路由对象包含了当前使用的模式(hash、history)、路由信息

        (url 与 组件的对应关系)等信息

VUE-5:脚手架Vuecli、调试devTools、路由1vue-router、router-view_第16张图片

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 组件所在的位置

VUE-5:脚手架Vuecli、调试devTools、路由1vue-router、router-view_第17张图片

// App.vue


路由配置案例:

VUE-5:脚手架Vuecli、调试devTools、路由1vue-router、router-view_第18张图片
main.js
VUE-5:脚手架Vuecli、调试devTools、路由1vue-router、router-view_第19张图片
index.js
VUE-5:脚手架Vuecli、调试devTools、路由1vue-router、router-view_第20张图片
app.vue

异步请求

        在实际的应用开发中,与后端交互,进行异步请求是很常见的需求

axios安装

        npm i axios

请求

VUE-5:脚手架Vuecli、调试devTools、路由1vue-router、router-view_第21张图片

跨域

        vue-cli 提供了一个内置基于 node 的 webserver ,我们可以使用它提供的 proxy 服务来进行跨域请求代理

vue.config.js

        在项目的根目录下创建一个 vue.config.js 的文件,通过 `npm run serve` 启动服务的时候,会读取该文件

跨域请求代理配置

VUE-5:脚手架Vuecli、调试devTools、路由1vue-router、router-view_第22张图片

// vue.config.js

module.exports = {

  devServer: {

    proxy: {

      '/api': {

        target: 'http://localhost:7777',

        pathRewrite: {

          '^/api': ''

        }

      }

    }

  }

}

        修改配置文件,需要重启服务:`npm run serve`

VUE-5:脚手架Vuecli、调试devTools、路由1vue-router、router-view_第23张图片

// home.vue



动态路由

        有的时候,我们需要把满足某种规则的路由全部匹配到同一个组件,比如不同的商品的 url

VUE-5:脚手架Vuecli、调试devTools、路由1vue-router、router-view_第24张图片

        我们不可能为每一个商品都定义一个独立的组件,而是把它们都映射到同一个组件,同时 url 后面的部分为动态变化的部分,我们会

        在设计路由的时候进行特殊的处理

VUE-5:脚手架Vuecli、调试devTools、路由1vue-router、router-view_第25张图片

        其中 `:itemId` 表示匹配的 url 中动态部分内容,如上面的 1,2,3 等,同时该值将被赋值给路由的变量 itemId

路由对象

        vue-router 会在组件中添加(注入)两个属性

                - $router

                - $route

$router 对象

        该对象其实就是 new VueRouter(...) 得到的路由对象,通过该对象我们可以访问全局路由信息,调用路由下的方法,

        比如:`go`、`back`、`push` 等

$route 对象

        通过该对象可以访问与当前路由匹配的信息

$route.params

        获取动态路由有关的信息


VUE-5:脚手架Vuecli、调试devTools、路由1vue-router、router-view_第26张图片
Detail.vue


router/index.js
VUE-5:脚手架Vuecli、调试devTools、路由1vue-router、router-view_第27张图片
router/index.js


VUE-5:脚手架Vuecli、调试devTools、路由1vue-router、router-view_第28张图片
apis.js

queryString(?后面的东西)

        有的时候,我们可能也会用到 queryString

VUE-5:脚手架Vuecli、调试devTools、路由1vue-router、router-view_第29张图片

$route.query

        我们可以通过路由对象 $route 的 query 属性来获取 queryString

VUE-5:脚手架Vuecli、调试devTools、路由1vue-router、router-view_第30张图片

编程式导航

        有的时候,我们可能需要用到编程的方式来导航(跳转),而不是点击链接。如:当 `sort` 发生改变的时候跳转

VUE-5:脚手架Vuecli、调试devTools、路由1vue-router、router-view_第31张图片

路由组件的复用

        为了提高性能,增强路由组件的复用,当路由切换使用的是同一个组件的时候,则会复用该路由组件,而不是销毁重建,这个时候,

        我们就需要通过 watch 或者 路由相关的生命周期函数来处理切换路由导致的变化

watch

        如果切换的路由复用了组件,这个时候,我们可以使用 watch 监听 $route

VUE-5:脚手架Vuecli、调试devTools、路由1vue-router、router-view_第32张图片

                to : 改变之后的 $route 对象

                from : 改变之前的 $route 对象

        但是我们可以使用 vue-router 提供路由守卫 (路由有关的生命周期函数)来处理路由有关的业务逻辑


路由守卫

        当导航发生改变的时候,vue-router 会在多个不同的地方调用指定的函数,也就是与路由有关的生命周期函数,也称为:路由守卫

                - 组件内守卫

                - 路由独享守卫

                - 全局守卫

组件内守卫

        定义在组件内的与路由有关的生命周期函数(守卫)

                - beforeRouteEnter

                - beforeRouteUpdate

                - beforeRouteLeave

beforeRouteEnter

        当路由解析完成,并中指定的组件渲染之前(组件 `beforeCreate`  之前),这里不能通过 `this` 访问组件实例,需要通过

         `next` 回调来进行调用

VUE-5:脚手架Vuecli、调试devTools、路由1vue-router、router-view_第33张图片
VUE-5:脚手架Vuecli、调试devTools、路由1vue-router、router-view_第34张图片
Home.vue

beforeRouteUpdate

        在当前路由改变,但是该组件被复用时调用

beforeRouteLeave

        导航离开该组件的对应路由时调用

路由守卫参数

to

        即将要进入的目标 路由对象($route)

from

        当前导航正要离开的路由对象($route)

next

        路由确认回调函数,类似 Promise 中的 resolve 函数,一定要确保调用 next 函数,但是后续的导航行为将依赖 next 方法的调用参数

路由独享的守卫

        可以在路由配置上直接定义 `beforeEnter` 守卫,相对来说,应用不多

VUE-5:脚手架Vuecli、调试devTools、路由1vue-router、router-view_第35张图片
router/index.js

全局守卫

        全局守卫是注册在 router 对象(new VueRouter({...}))上的

                - beforeEach

                - beforeResolve

                - afterEach

beforeEach

        注册在路由对象上,当一个导航触发时,全局前置守卫按照创建顺序调用

router/index.js
VUE-5:脚手架Vuecli、调试devTools、路由1vue-router、router-view_第36张图片

beforeResolve

        在所有组件内守卫和异步路由组件被解析之后被调用

afterEach

        导航被确认后调用

        因为导航已经被确认,所以没有 `next`


嵌套路由

        一些比较复杂的应用会有多层嵌套的路由和组件组成

        在应用增加一个用户个人中心,用户中心又是由多个页面组成,如:

VUE-5:脚手架Vuecli、调试devTools、路由1vue-router、router-view_第37张图片

添加路由与子路由

children 属性

        一个路由中的 `children` 表示嵌套的子路由

VUE-5:脚手架Vuecli、调试devTools、路由1vue-router、router-view_第38张图片

子路由视图

        有了子路由以后,还需要在视图组件中设置 `router-view` 

VUE-5:脚手架Vuecli、调试devTools、路由1vue-router、router-view_第39张图片

重定向redirect

        有的时候,我们会根据某种需求对用户请求的页面进行重新定位

案例

        现有一小说网站,提供了 男生频道 和 女生频道 的两个入口,用户首次进入页面的时候,会出现选择,并记住用户的选择,以后

        该用户进入网站直接根据记录的选择进入对应的频道

组件

VUE-5:脚手架Vuecli、调试devTools、路由1vue-router、router-view_第40张图片
VUE-5:脚手架Vuecli、调试devTools、路由1vue-router、router-view_第41张图片
VUE-5:脚手架Vuecli、调试devTools、路由1vue-router、router-view_第42张图片

路由配置

redirect

VUE-5:脚手架Vuecli、调试devTools、路由1vue-router、router-view_第43张图片

别名alias

        重定向,是从一个路由切换到另外一个路由,而别名是不同的路由显示同一个页面,比如:`/user` 是用户中心的路由,`/member` ,

        我们也可以给这个页面定义另外一个路由,虽然在某些时候,重定向与别名有类似的效果,但是,别名不存在跳转,浏览器地址栏上

        显示的 URL 并不会切换

VUE-5:脚手架Vuecli、调试devTools、路由1vue-router、router-view_第44张图片

404

VUE-5:脚手架Vuecli、调试devTools、路由1vue-router、router-view_第45张图片

你可能感兴趣的:(VUE-5:脚手架Vuecli、调试devTools、路由1vue-router、router-view)