Vue CLI、Vue Router、Vuex学习笔记

最新推荐文章于 2021-01-27 16:19:34 发布

weixin_43571751

最新推荐文章于 2021-01-27 16:19:34 发布

阅读量324

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_43571751/article/details/105624583

版权

本文详述了Vue CLI的安装与项目创建，包括Vue CLI2与Vue CLI3的区别。接着介绍了Vue-Router的各个阶段，展示了如何配置路由、使用路由守卫以及路由懒加载。随后讲解了Vuex的状态管理，包括state、getters、mutations和actions的使用。最后，简单提及了axios的使用，包括安装、配置和拦截器的应用。

摘要由CSDN通过智能技术生成

Vue CLI

介绍

CLI是Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架。
Vue CLI是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速搭建Vue开发环境以及对应的webpack配置。

前提

Vue.js官方脚手架工具就使用了webpack模板对所有的资源会压缩等优化操作，它在开发过程中提供了一套完整的功能，能够使得我们开发过程中变得高效。

安装

执行命令：npm install -g @vue/cli。这里安装的是最新版本的vue cli。
在这里插入图片描述

如果要使用Vue CLI2，需要拉去脚手架2的模板：npm install -g @vue/cli-init

脚手架创建项目

Vue CLI2初始化项目

命令： vue init webpack my-project。
目录结构：
启动开发模式：

查看package.json：
dev 是启动开发服务器; start也是指向dev命令；build是生产环境打包代码。
在这里插入图片描述

Vue CLI2 Runtime+compiler 和Runtime-only的区别

官方文档： https://cn.vuejs.org/v2/guide/installation.html#%E8%BF%90%E8%A1%8C%E6%97%B6-%E7%BC%96%E8%AF%91%E5%99%A8-vs-%E5%8F%AA%E5%8C%85%E5%90%AB%E8%BF%90%E8%A1%8C%E6%97%B6

如下，创建项目时会有Vue build的选项： runtime + compiler 和runtime-only。
两者的区别主要在于main.js中，选择runtime-only的主app中会使用render函数：
vue中主app渲染模板的流程：
使用runtime + compiler 创建项目时：实例化vue实例化采用传入将App传入template模板的方式。
```
   new Vue({
     
	  el: '#app',
	  components: {
      App },
	  template: '<App/>'
	})
```
① 传入template参数传入子组件模板，会赋值给vue实例的options参数。
② 将模板解析为为ast（abstract syntax tree 抽象语法树）。
③ 将ast编译为render函数。
④ 通过render函数生成virtual DOM。
⑤ 将Virtual DOM 更新到真实UI页面上。

使用runtime-only创建项目时：实例化vue实例化时，将App传入render函数，没有经过解析模板和编译ast，相当于少了以上①②步。
所以使用runtime-only时效率更高，源代码更少，这就是少的6kb代码的原因。
```
	new Vue({
     
	  el: '#app',
	  render: h => h(App)
	})
```

render函数：
实例化vue对象时，render函数的入参实际是createElement函数。
如下：可以用render函数代替传入compnents和template的方式对vue进行实例化。
createElement函数有两种用法：① 传入三个参数，创建标签。 ② 直接传入组件。创建的标签或者组件会替换掉index.html中id是#app的标签。

	import Vue from 'vue'
	import App from './App'
	
	Vue.config.productionTip = false
	// 打印App，查看App中是否有template
	console.log(App)
	
	new Vue({
     
	  el: '#app',
	  // components: { App },
	  // template: '<App/>',
	  render: function (createElement) {
     
	    // 1. 普通用法 createElement('标签名', {属性key：value}, [标签内容])
	    // return createElement(
	    //   'h2',
	    //   {'class': 'box'},
	    //   ['h2 message', createElement('button', {}, ['按钮'])])
	    // 2. 传入组件
	    return createElement(App)
	  }
	})

如上代码中，有对App进行打印，可以看到App中不包含template，这是因为项目通过vue-template-compiler编译，已经将template转换为了render函数。
在这里插入图片描述

npm run build 流程

在这里插入图片描述

npm run build 流程

在这里插入图片描述

Vue CLI3初始化项目

命令： vue create “项目名称”

在这里插入图片描述

项目目录：
CLI3的设计理念就是“零配置”，所以创建完项目后，已经看不到CLI2创建项目的build和config目录。
index.html移入了public目录，对应于CLI2创建的static目录。
修改配置的三种方式：
项目实际的配置是隐藏在了cli-server下的webpack.config.js中，如果要修改默认配置，可以通过以下两种方式:

① 命令行执行vue ui，打开UI页面，导入项目后，在页面上可以配置项目：

② 创建vue.config.js文件：
在项目目录下创建vue.config.js文件，项目运行时会自动合并该配置文件与默认配置文件。

Vue-Router

官网：https://router.vuejs.org/zh/

路由的发展阶段

后端路由阶段

早期的网站开发整个HTML页面都是由服务器来渲染的，服务器直接生产渲染好对应的HTML页面, 返回给客户端进行展示。
一个网站中每个页面有自己对应的URL，URL会发送到服务器, 服务器会通过正则对该URL进行匹配, 并且最后交给一个Controller进行处理，Controller进行各种处理, 最终生成HTML或者数据, 返回给前端，这就完成了一个IO操作。这种操作就是后端路由。
优点：当我们页面中需要请求不同的路径内容时，交给服务器来进行处理，服务器渲染好整个页面，并且将页面返回给客户端。这种情况下渲染好的页面不需要单独加载任何的js和css，可以直接交给浏览器展示，也有利于SEO的优化。
缺点：整个页面的模块由后端人员来编写和维护的，前端开发人员如果要开发页面，需要通过PHP和Java等语言来编写页面代码。而且通常情况下HTML代码和数据以及对应的逻辑会混在一起，编写和维护都是非常糟糕的事情。

前后端分离阶段

随着Ajax的出现，有了前后端分离的开发模式。
后端只提供API来返回数据，前端通过Ajax获取数据，并且可以通过JavaScript将数据渲染到页面中（需要通过js操作DOM）。这样做最大的优点就是前后端责任的清晰，后端专注于数据上，前端专注于交互和可视化上。并且当移动端(iOS/Android)出现后，后端不需要进行任何处理，依然使用之前的一套API即可。目前很多的网站依然采用这种模式开发。

单页面富应用阶段

其实SPA（Single Page Application）最主要的特点就是在前后端分离的基础上加了一层前端路由，也就是前端来维护一套路由规则。前端路由的核心是：改变URL，但是页面不进行整体的刷新。

修改URL，不刷新页面的方法

Location.hash

URL的hash也就是锚点(#)，本质上是改变window.location的href属性。我们可以通过直接赋值location.hash来改变href，但是页面不发生刷新。
初始状态：在这里插入图片描述
通过location.hash修改url，页面没有刷新：

HTML5的history模式

history接口是HTML5新增的，它有五种模式改变URL而不刷新页面。

history.pushState、history.back()和history.forward():
pushState()类似于压栈的方式，可以用**history.back()**返回上一个页面，**history.forward()**进入下一个页面。
history.replaceState(): 与pushState区别就是replace是替换url，不能返回。
history.go()：需要搭配pushState(）使用
history.back() 等价于 history.go(-1)，history.forward() 则等价于 history.go(1)，这三个接口等同于浏览器界面的前进后退。

安装路由插件

vue-router是基于路由和组件的，路由用于设定访问路径，将路径和组件映射起来。在vue-router的单页面应用中，页面的路径的改变就是组件的切换。
步骤一：安装vue-router：
npm install vue-router --save
步骤二：在模块化工程中使用它(因为是一个插件, 所以可以通过Vue.use()来安装路由功能)
第一步：导入路由对象，并且调用 Vue.use(VueRouter)；
第二步：创建路由实例，并且传入路由映射配置；
第三步：在Vue实例中挂载创建的路由实例；
在这里插入图片描述

路由插件使用

使用vue-router的步骤

第一步：创建路由组件；

在这里插入图片描述
第二步：配置路由映射—组件和路径映射关系；

第三步：使用路由—通过和；

router-link：该标签是一个vue-router中已经内置的组件，它会被渲染成一个a标签。
router-view：该标签会根据当前的路径，动态渲染出不同的组件。网页的其他内容，比如顶部的标题/导航，或者底部的一些版权信息等会和router-view处于同一个等级。
在路由切换时，切换的是router-view挂载的组件，其他内容不会发生改变。
在这里插入图片描述

配置默认路由和修改history模式

默认路由

首次进入页面时要加载首页，可以将“/”重定向到“/home”
在这里插入图片描述

修改history模式

默认情况下，路由为hash模式，即锚点（#）。
如果想修改为H5的history模式，只需要在实例化路由对象时，传入mode参数为history即可。
在这里插入图片描述

router-link其他属性

tag：tag可以指定router-link之后渲染成什么组件，比如上面的代码会被渲染成一个li元素，而不是a。
在这里插入图片描述

replace：replace不会留下history记录，所以指定replace的情况下，后退键返回不能返回到上一个页面中。

active-class：当router-link对应的路由匹配成功时，会自动给当前元素设置一个router-link-active的class，设置active-class可以修改默认的名称。在进行高亮显示的导航菜单或者底部tabbar时，会使用到该类。但是通常不会修改类的属性，会直接使用默认的router-link-active即可。
如下图，被点击中会加上router-link-active类。
在这里插入图片描述
如果需要在选中时触发不同的样式，可以创建router-link-active样式类。

如果不想使用router-link-active这个名称，可以在实例化路由对象时，传入linkActiveClass参数，value设置为active，在使用时，就可以定义名称为active的样式类。
在这里插入图片描述

通过代码进行路由跳转

定义button点击事件，在点击事件中通过this.

最低0.47元/天解锁文章

weixin_43571751

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue CLI、Vue Router、Vuex学习笔记

Vue CLI介绍CLI是Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架。Vue CLI是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速搭建Vue开发环境以及对应的webpack配置。前提Vue.js官方脚手架工具就使用了webpack模板对所有的资源会压缩等优化操作，它在开发过程中提供了一套完整的功能，能够使得我们开发过程中变...
复制链接

扫一扫

专栏目录