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: '<div>({ hi }}</div>')//这种情况不需要new Vue({render (h) {return h('div', this.h1)}})

• 由于只含有运行时构建版本(runtime-only)比完整构建版本(ull-build)轻量大约30%，你应该尽可能使用只含有运行时的构建版本。如果你还是希望使用完整构建版本，则需要在打包器中配置别名。
• 简单总结：
  ①如果在之后的开发中，你依然使用template，就需要选择Runtime-Compiler。
  ②如果你之后的开发中，使用的是.vue文件夹开发，那么可以选择Runtime-only。

render和template区别：

//Runtime-Compilernew Vue({el :'#app',components: { App },template: '<App/>'})//Runtime-onlynew 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页面, 返回给客户端进行展示.
• 但是一个网站, 这么多页面服务器如何处理呢” />执行：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 Vuefrom 'vue'import App from './App'import router from './router'new Vue({el: '#app',router,render: h => h(App)})----创建About和Home路由组件--------使用路由：----<template><div id="app"><h1>我是网站的标题<router-link to="/home">首页</router-link><router-link to="/about">关于</router-link><router-view></router-view><h2>我是APP中一些底部版权信息</h2></div></template>----最终效果如下：----一、当路径是根路径时,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 router =new VueRouter({routes,mode: 'history'})

  • router-link补充：
    ①在前面的中, 我们只是使用了一个属性: to, 用于指定跳转的路径。
    ②还有一些其他属性:
    tag: tag可以指定之后渲染成什么组件, 比如上面的代码会被渲染成一个
  • 元素, 而不是。
    replace: replace不会留下history记录, 所以指定replace的情况下, 后退键返回不能返回到上一个页面中。
    active-class: 当对应的路由匹配成功时, 会自动给当前元素设置一个router-link-active的class, 设置active-class可以修改默认的名称。在进行高亮显示的导航菜单或者底部tabbar时, 会使用到该类。但是通常不会修改类的属性, 会直接使用默认的router-link-active即可。
  • 修改linkActiveClass：
    ①该class具体的名称也可以通过router实例的属性进行修改。

  const router = new VueRouter({routes,mode: 'history',linkActiveClass:'active'})

  • 路由代码跳转：
    ①有时候, 页面的跳转可能需要执行对应的JavaScript代码, 这个时候, 就可以使用第二种跳转方式了。

  <template><div id="app"><h1>我是网站的标题<button @click="li nkToHomel">首页</button><button @click="l inkToAbout">关于</button><router-view></router-view><h2>我是APP中一些底部版权信息</h2></div><template><script>export default{name:'App',methods: {linkToHome() {this.$router.push('/home')}linkToAbout() {this.$router.push('/about')}}</script>

  • 动态路由：
    ①在某些情况下，一个页面的path路径可能是不确定的，比如我们进入用户界面时，希望是如下的路径：/user/aaaa或/user/bbbb。除了有前面的/user之外，后面还跟上了用户的ID。这种path和Component的匹配关系，我们称之为动态路由(也是路由传递数据的一种方式)。

  -----路由配置页面---{path: '/user/:id',component: User}----使用页面----<div> <h2>{{$route.params.id}}</h2> </div>----组件页面----<router-link to="/user/123">用户</router-link>

  路由懒加载：

  • 官方给出了解释:当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了
  • 官方在说什么呢?首先, 我们知道路由中通常会定义很多不同的页面.这个页面最后被打包在哪里呢? 一般情况下, 是放在一个js文件中.但是, 页面这么多放在一个js文件中, 必然会造成这个页面非常的大.如果我们一次性从服务器请求下来这个页面, 可能需要花费一定的时间, 甚至用户的电脑上还出现了短暂空白的情况.
  • 如何避免这种情况呢? 使用路由懒加载就可以了.路由懒加载做了什么?路由懒加载的主要作用就是将路由对应的组件打包成一个个的js代码块.只有在这个路由被访问到的时候, 才加载对应的组件。
  • 懒加载的方式：

  方式一: 结合Vue的异步组件和Webpack的代码分析.const Home = resolve => { require.ensure(['../components/Home.vue'], () => { resolve(require('../components/Home.vue')) })};方式二: AMD写法const About = resolve => require(['../components/About.vue'], resolve);方式三: 在ES6中, 我们可以有更加简单的写法来组织Vue异步组件和Webpack的代码分割.const Home = () => import('../components/Home.vue')

  //使用懒加载const routes =[{path: '/home', component: () => import(' ../components/Home')},path: '/about', component: () => import('../components/About')},];

  路由嵌套：

  • 嵌套路由是一个很常见的功能。比如在home页面中, 我们希望通过/home/news和/home/message访问一些内容。一个路径映射一个组件, 访问这两个路径也会分别渲染两个组件。路径和组件的关系如下:

  /home --------> Home/home/news --------> News/home/message --------> Message/about --------> About

  • 实现嵌套路由有两个步骤:
    ①创建对应的子组件, 并且在路由映射中配置对应的子路由。
    ②在组件内部使用标签。

  -----一、定义两个组件----------二、配置嵌套路由映射-----import Vue from 'vue'import VueRouter from 'vue-router'const Home = () => import('../components /Home')const Message = () => import('../components/message')const News = () => import('../components/news')const About = ( ) => import('../components/About')// 1.注入插件Vue.use (VueRouter)// 2.定义路由const routes = [{path: '/home',component: Home,children: [{path: 'message'component: Message},{path: 'news',component: News}]}]-----三、在父组件模板中使用-----<template><div id="home"><h2>我是首页标题</h2><router-link to="/home/message">消息</router-link><router-link to="/home/news">新闻<router-view></router-view></div></template>

  • 嵌套路由也可以配置默认的路径, 配置方式如下:

  {path: '',redirect:'message'}

  路由传递参数：

  • 传递参数主要有两种类型: params和query
  • params的类型:
    ①配置路由格式: /router/:id
    ②传递的方式: 在path后面跟上对应的值
    ③传递后形成的路径: /router/123, /router/abc
  • query的类型:
    ①配置路由格式: /router, 也就是普通配置
    ②传递的方式: 对象中使用query的key作为传递方式
    ③传递后形成的路径: /router?id=123, /router?id=abc
  • 如何使用它们呢? 也有两种方式: 的方式和JavaScript代码方式

  ----传递参数方式一: <router-link>：----<router-link :to="{path: '/profile/' + 123,query: { name:'why',age: 18}}">档案</router-link>----传递参数方式二: JavaScript代码：----export default {name:'App',methods: {toProfile() {this.$router.push({path: '/profile/' + 123,query: {name: 'why',age: 18}})}}}

  • 获取参数:
    ①获取参数通过$route对象获取的，在使用了vue-router 的应用中，路由对象会被注入每个组件中，赋值为 this.$route，并且当路由切换时，路由对象会被更新。
    ②通过$route获取传递的信息如下:

  <p>params: {{ $route.params}}</p><p>query: {{$route.query}}</p>

  • $route和$router是有区别的：
    ①$router为VueRouter实例，想要导航到不同URL，则使用$router.push方法
    ②$route为当前router跳转对象里面可以获取name、path、query、params等

  路由导航守卫：

  • 我们来考虑一个需求: 在一个SPA应用中, 如何改变网页的标题呢?
    ①网页标题是通过