Vue详解知识概括

Vue详解知识概括

• Vue CLI
• Vue-router
• Promise
• Vuex
• axios
• Vue高级
• Vue总结

Vue CLI

什么是Vue CLI:

• 如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI.
• 如果你在开发大型项目, 那么你需要, 并且必然需要使用Vue CLI
  ①使用Vue.js开发大型应用时，我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。
  ②如果每个项目都要手动完成这些工作，那无疑效率比较低效，所以通常我们会使用一些脚手架工具来帮助完成这些事情。
• CLI是什么意思
  ①CLI是Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架.
  ②Vue CLI是一个官方发布 vue.js 项目脚手架
  ③使用 vue-cli 可以快速搭建Vue开发环境以及对应的webpack配置.

Vue CLI使用前提：

• 安装NodeJS
  ①默认情况下自动安装Node和NPM
  ②NPM的全称是Node Package Manager
  ③是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准。
• Vue.js官方脚手架工具就使用了webpack模板
  ①对所有的资源会压缩等优化操作
  ②它在开发过程中提供了一套完整的功能，能够使得我们开发过程中变得高效。

Vue CLI的使用：

• 安装Vue脚手架：npm install -g @vue/cli
  ①查看vue版本：vue --version
  ②注意：上面安装的是Vue CLI3的版本，如果需要想按照Vue CLI2的方式初始化项目时不可以的。
  ③拉取2.X模板(旧版本)：npm install -g @vue/cli-init
• Vue CLI2初始化项目：vue init webpack my-project
• Vue CLI3初始化项目：vue create my-project

Vue CLI2详解：

• 初始化命令使用：
  
• 目录简介：
  ①build.js：构建入口
  ②index.js：变量，配置信息
  ③webpack.base.conf.js：公共webpack配置信息
  ④webpack.dev.conf.js：部署配置信息
  ⑤webpack.prod.conf.js：构建配置信息
  

(运行时+编译器)Runtime-Compiler和(只含有运行时版本)Runtime-only的区别：

• 如果你需要在客户端编译模板(例如， 向template 选项传入一个字符串,或者需要将模 板中的非DOM的HTML挂载到一个元素)，你需要带有编译器的版本，因而需要完整构建版本。

• 在使用vue-loader或vueify 时，* . vue文件中的模板会在构建时(build time)预编译(pre-compile)为JavaScript.最终生成的bundle中你不再需要编译器(compiler)，因此可以直接使用只含有运行时的构建版本(runtime- only)。

  //这种情况需要编译器(compiler)
  new Vue({
  template: ‘

  ({ hi }}
  ’
  )

  //这种情况不需要
  new Vue({
  render (h) {
  return h(‘div’, this.h1)
  }
  })

• 由于只含有运行时构建版本(runtime-only)比完整构建版本(ull-build)轻量大约30%，你应该尽可能使用只含有运行时的构建版本。如果你还是希望使用完整构建版本，则需要在打包器中配置别名。

• 简单总结：
  ①如果在之后的开发中，你依然使用template，就需要选择Runtime-Compiler。
  ②如果你之后的开发中，使用的是.vue文件夹开发，那么可以选择Runtime-only。

render和template区别：

//Runtime-Compiler
new Vue({
	el :'#app',
	components: { App },
	template: '<App/>'
})

//Runtime-only
new Vue({
	el : '#app',
	render: h => h(App)
})

• 为什么存在这样的差异呢？
  ①我们需要先理解Vue应用程序是如何运行起来的。
  ②Vue中的模板如何最终渲染成真实DOM。
  ③我们来看下面的一幅图。
  

npm run build与npm run dev详解：

• npm run build：
  
• npm run dev：
  

webpack.base.conf.js起别名：

resolve: {
	extensions: ['.js', '.vue', '.json'],
	alias: {
		'@':resolve('src'),
		'pages': resolve('src/pages'),
		'common': resolve('src/common'),
		'components':resolve('src/components'),
		'network': resolve('src/network')
	}
},

Vue CLI3详解：

• vue-cli 3 与 2 版本有很大区别：
  ①vue-cli 3 是基于 webpack 4 打造，vue-cli 2 还是 webapck 3
  ②vue-cli 3 的设计原则是“0配置”，移除的配置文件根目录下的，build和config等目录
  ③vue-cli 3 提供了 vue ui 命令，提供了可视化配置，更加人性化
  ④移除了static文件夹，新增了public文件夹，并且index.html移动到public中
• 初始化使用：
  
• 目录结构详解：
  
• 配置去哪里了：
  ①UI方面的配置：启动配置服务器：vue ui
  
  ②一大堆配置文件去哪里了？
  

Vue-router

什么是路由？

• 路由（routing）就是通过互联的网络把信息从源地址传输到目的地址的活动
• 路由器提供了两种机制: 路由和转送.
  ①路由是决定数据包从来源到目的地的路径.
  ②转送将输入端的数据转移到合适的输出端.
• 路由中有一个非常重要的概念叫路由表。路由表本质上就是一个映射表, 决定了数据包的指向。

后端路由阶段:

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

前端路由阶段：

• 前后端分离阶段：
  ①随着Ajax的出现, 有了前后端分离的开发模式.
  ②后端只提供API来返回数据, 前端通过Ajax获取数据, 并且可以通过JavaScript将数据渲染到页面中.
  ③这样做最大的优点就是前后端责任的清晰, 后端专注于数据上, 前端专注于交互和可视化上.
  ④并且当移动端(iOS/Android)出现后, 后端不需要进行任何处理, 依然使用之前的一套API即可.
  ⑤目前很多的网站依然采用这种模式开发.
• 单页面富应用阶段:
  ①其实SPA最主要的特点就是在前后端分离的基础上加了一层前端路由.
  ②也就是前端来维护一套路由规则.
• 前端路由的核心是什么呢？
  ①改变URL，但是页面不进行整体的刷新。

URL的hash：

• URL的hash也就是锚点(#), 本质上是改变window.location的href属性.

• 我们可以通过直接赋值location.hash来改变href, 但是页面不发生刷新

  执行：location.hash = ‘/foo’
  返回：“/foo”

  执行：location. href
  返回：“http: //192.168.1.101: 8000/examples/urlChange/#/foo”

HTML5的history模式：

• history接口是HTML5新增的, 它有五种模式改变URL而不刷新页面。
• history接口底层的数据结构是栈。
• 函数：
  ①history.pushState()：插入锚点，改变url，支持前进后退。
  ②history.replaceState()：插入锚点，改变url，不支持前进后退。
  ③history.go()
• 补充说明：
  ①上面只演示了三个方法
  ②因为 history.back() 等价于 history.go(-1)
  ③history.forward() 则等价于 history.go(1)
  ④这三个接口等同于浏览器界面的前进后退
• 与URL的hash相比，没有了#符号。

vue-router认识：

• 目前前端流行的三大框架, 都有自己的路由实现:
  ①Angular的ngRouter
  ②React的ReactRouter
  ③Vue的vue-router
• 当然, 我们的重点是vue-router，vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。
• vue-router是基于路由和组件的：
  ①路由用于设定访问路径, 将路径和组件映射起来.
  ②在vue-router的单页面应用中, 页面的路径的改变就是组件的切换.

安装和使用vue-router：

• 安装vue-router：npm install vue-router --save

• 在模块化工程中使用它(因为是一个插件, 所以可以通过Vue.use()来安装路由功能)
  ①导入路由对象，并且调用 Vue.use(VueRouter)
  ②创建路由实例，并且传入路由映射配置
  ③在Vue实例中挂载创建的路由实例

• 使用vue-router的步骤:
  ①创建路由组件
  ②配置路由映射: 组件和路径映射关系
  ③使用路由: 通过和

• 路由标签详解：
  ①: 该标签是一个vue-router中已经内置的组件, 它会被渲染成一个标签.
  ②: 该标签会根据当前的路径, 动态渲染出不同的组件。
  ③网页的其他内容, 比如顶部的标题/导航,或者底部的一些版权信息等会和处于同一个等级。
  ④在路由切换时, 切换的是挂载的组件,其他内容不会发生改变。

  ----创建router文件夹,然后创建index.js文件,创建router实例,配置组件和路径的映射关系：----
  import Vue from ‘vue’
  import VueRouter from ‘vue-router’
  // 1.注入插件
  Vue.use(VueRouter)
  // 2.定义路由
  const routes = [
  {
  path: ‘/home’,
  component: Home
  }
  {
  path: ‘/about’,
  component: About
  }
  ]

  // 3.创建router实例
  const router = new VueRouter({
  routes
  })
  // 4.导出router实例
  export default router

  ----main.js文件中挂载到Vue实例中：----
  import Vue from ‘vue’
  import App from ‘./App’
  import router from ‘./router’
  new Vue({
  el: ‘#app’,
  router,
  render: h => h(App)
  })

  ----创建About和Home路由组件----

  ----使用路由：----
  
  

  
  

  我是网站的标题< /h1>
  首页
  关于
  
  

  我是APP中一些底部版权信息

  
  
  
  

  ----最终效果如下：----
  一、当路径是根路径时,router-view没有渲染试图
  二、点击首页，路径切换，router-view渲染home组件
  伞、点击关于，路径切换，router-view渲染about组件

vue-router细节处理：

• 路由的默认路径：
  ①默认情况下, 进入网站的首页, 我们希望渲染首页的内容，但是我们的实现中, 默认没有显示首页组件, 必须让用户点击才可以。
  ②如何可以让路径默认跳到到首页, 并且渲染首页组件呢，非常简单, 我们只需要配置多配置一个映射就可以了。
  ③我们在routes中又配置了一个映射，path配置的是根路径: /，redirect是重定向, 也就是我们将根路径重定向到/home的路径下, 这样就可以得到我们想要的结果了。

  const routes =[
  {
  path: ‘/’
  redirect: ‘/home’
  }
  ]

• HTML5的History模式：
  ①我们前面说过改变路径的方式有两种:URL的hash，HTML5的history。默认情况下, 路径的改变使用的URL的hash，如果希望使用HTML5的history模式, 非常简单, 进行如下配置即可:

  const rout