Vue框架笔记

课程：VUE-coderwhy

学习VUE的前置知识：HTML、CSS、JavaScript、ES6、nodejs

Vue全家桶：VueCore+Vue-Router+Vuex

Vue指令

1. 内容绑定

• v-text :设置标签的内容textContent
• v-html :设置标签的innerHTML
• v-on :为元素绑定事件

2. 显示切换，属性绑定

• v-show :根据表达式的真假，切换元素显示和隐藏
• v-if :根据表达式的真假，切换元素显示和隐藏(操纵DOM元素)
• v-bind :设置元素的属性，如src，title，class

3. 列表循环，表单元绑定

• v-for :根据数据生成列表结构
• v-model :获取和设置表单元素的值,双向数据绑定。更改任何一边，都能同步更改对方的值。

v-model中的修饰符

v-model指令可以设置单选框/复选框/下拉列表

• v-model.lazy：懒加载
• v-model.number：转数字类型
• v-model.trim：过滤空格

计算属性computed

1. 计算属性的本质
   fullname:{set(),get()}
2. 计算属性computed和方法属性methods的对比

• 计算属性是有缓存的
• 计算属性在多次使用时，只会调用一次

ECMAScript 6

箭头函数

定义函数的三种方式

// 1.一般定义函数function
const a = function(){
    
}
// 2.通过在对象中定义函数
const obj ={
    b:function(){

    }
}
// 3.箭头函数定义函数
const c = () =>{
    
}

箭头函数中的参数和返回值问题

// 箭头函数中有多个参数
const sum = (sum1,sum2) =>{
    return sum1+sum2
}
// 箭头函数中只有一个参数
const power = num => { // 可以省略参数小括号
    return num * num
}

// 箭头函数中有多行代码
const test = () =>{
    console.log('Hello World');
    console.log('Hello Vuejs');
} 
// 箭头函数中只有一行代码
// const mul = (num1,num2) =>{
//     return num1*num2
// }
const mul = (num1,num2) => num1*num2; // 简略return和{}

const demo = () => console.log('Hello Demo');
console.log(demo());
// 返回值为console.log('Hello Demo')，类型为undefined.
// 控制台输出结果为 Hello Demo 和 undefined.

// const vue ={
//     render:function(h){
//         return h(App)
//     }
// }
const vue={
    render: h => h(App)
}

箭头函数中的this指向问题

在箭头函数中this指向与普通函数不同，箭头函数的{}不形成作用域，所以箭头函数中一般没有定义this，需要往外层寻找。
它是在当前作用域中向外层查找，一层层查找直到找到有this的定义的作用域，箭头函数中的this引用的就是其最近作用域中的this。

setTimeout(function(){
    console.log(this); //window
},1000)
setTimeout(() =>{
    console.log(this); //window
},1000)

const obj = {
    test1(){
        setTimeout(()=>{
            console.log(this);//window
        },1000)
    },
    test2(){
        setTimeout(()=>{
            console.log(this);//obj
        },1000)
    }
}

数组的解构

对象的解构

const obj={
    name:"zhangsan",
    age:18,
    height:1.80,
    weight:60
}

// 普通写法
// const name = obj.name;
// const age=obj.age;
// const height=obj.height;
// const weight=obj.weight;

// 对象解构写法
const {name,age,height,weight}=obj;

JavaScript高阶函数

filter过滤

        const nums=[10,20,30,40,101,200,5200];
        let newNums=nums.filter(function(n){//n为自定义参数
            return n<100;
        })
        console.log(newNums);

• filter中的回调函数有一个要求：必须返回一个boolean值
• TRUE：当返回true时，函数内部会制动将这次回调的值加入到新数组中；
• FALSE：当返回false时，函数内部会过滤掉这次的值。

map映射

        let newNums2=nums.map(function(n){
            return n*2;
        })
        console.log(newNums2);

reduce汇总

• reduce函数的作用是对数组中所有的内容进行汇总
• 数组.reduce(参数一，参数二);
• 参数一：累加操作
• 参数二：累加的初始值

        let newNums3= nums.reduce(function(preValue,n){
            return preValue+n;
        },0)
        console.log(newNums3);

Promise

Promise是异步编程的一种解决方案。
单线程运行时用户进行了网络请求=>JS代码处理=>发生阻塞=>开启异步请求=>异步请求完成=>回调函数=>返回结果

网络请求回调地狱

$.ajax('url1', function (datal) {
    $.ajax(datal('url2'), function (data2) {
        $.ajax(data2 ('url3'), function (data3) {
            $.ajax(data3('url4'], function (data4){ 
                console.log (data4);
            })
        })
    })
})

Promise网络请求

// promise( (resolve,reject)=>{函数名(){resolve()}} ).then(异步处理结果)
// promise参数：resolve(函数)和reject(函数)，内部构造函数
// promise异步网络请求过程为链式编程
new Promise((resolve,reject)=>{
    setTimeout(()=>{
        // 网络请求成功调用resolve
        resolve()
        // 网络请求失败调用reject
        // reject()
    },5000)
}).then(()=>{
    console.log("第一次网络请求结果");
    // 返回结果的同时，继续进行下一步网络请求
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve()
        },1000)
    }).then(()=>{
        console.log("第二次网络请求结果");
        return new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve()
            },1000)
        }).then(()=>{
            console.log("第三次网络请求结果");
            return new Promise((resolve,reject)=>{
                setTimeout(()=>{
                    // 网络请求成功调用resolve
                    // resolve()
                    // 网络请求失败调用reject
                    reject('erro message')
                },1000)
            }).then(()=>{
                console.log("第四次网络请求结果");
            }).catch(err=>{
                console.log(err);//网络请求失败结果
            })
        })
    })
})

Promise异步操作

• pending：等待状态。当正在进行网络请求时，或者定时器没有到时间时。
• fulfill：满足状态。当主动回调了resolve函数时，就处于满足状态，并且会执行.then()
• reject：拒绝状态。当主动回调了reject函数时，就处于拒绝状态，并且会执行.catch()

同步：synchronization ; 异步：asynchronization

Promise链式调用简写

new Promise((resolve,reject)=>{
    setTimeout(function(){
        resolve("第一次网络请求")
    },5000)
}).then(data=>{
    console.log(data);// =>第一次网络请求结果
    return data + '+第二次网络请求结果'
}).then(data=>{
    console.log(data);// =>第一次+第二次网络请求结果
    return data + '+第三次网络请求结果'
}).then(data=>{
    console.log(data);// =>第一+二+三次网络请求结果
    return Promise.reject(data + 'error')//返回第四次网络请求失败
}).then(data=>{//回调Promise.reject时，这部分代码不会执行
    console.log(data);// =>X 前三次+第四次网络请求结果没有输出
    return data + '+第四次网络请求结果'
}).catch(data=>{
    console.log(data);// =>前三次请求结果+error
    return data + '+第五次网络请求结果'
}).then(data=>{
    console.log(data);// =>前三次请求结果+error+第五次网络请求结果
})

组件化开发

• 将一个完整的页面分成跟多个组件。
• 每个组件都用于实现页面的一个功能块。
• 每一个组件又可以进行划分。

Vue组件化

1. 创建组件构造器：调用Vue.extend()方法
2. 注册组件：调用Vue.component()方法
3. 使用组件：在Vue实例的作用范围内使用

conponent,组件;extend,扩展;template,模板

全局组件和局部组件

父组件与子组件

父子组件通信

• 父组件向子组件传递数据props(属性)
• 子组件向父组件传递数据$emit(发射)

插槽slot(slät)

封装组件的时候，抽取共性，保留不同。
最好的封装方式就是将共性抽取到组件中，将不同暴露为插槽。一旦我们预留了插槽，就可以让使用者根据需求决定插槽中插入什么内容。插槽内容由调用者来决定。

具名插槽

<div>
    <cpn>cpn>
    <cpn><button slot='left'>button>
    <button slot='right'>button>cpn>
div>
<template id='templateid'>
    <div>
        <p>组件p>
        <slot>(插槽默认值)slot>
        
        <slot name='left'>左插槽slot>
        <slot name='center'>中间插槽slot>
        <slot name='right'>右插槽slot>
    div>
template>

Vue.conponent('cpn',{template:'#templateid'})

编译作用域

• 父组件模板的所有东西都会在父级作用域内编译
• 子组件模板的所有东西都会在子级作用域内编译

其中，isShow属性包含在父组件的作用域中，所以其是否显示由父组件来决定。

作用域插槽

父组件替换插槽的标签，但是内容由子组件来提供。

模块化开发

模块化开发的核心：导出和导入

模块化开发之匿名函数解决方案

我们可以将需要暴露到外面的变量使用一个模块作为出口，在模块内部给对象添加各种需要暴露到外面的属性和方法，最后将这个对象返回，在外面使用一个moduleX接受。

常见的模块化规范：CommonJS、AMD、CMD、Modules

// 在小明的ming.js工程文件里，模块名moduleA
var moduleA=(function(){
    var obj={};//定义一个对象
    var flag:true;
    obj.flag=flag;//在对象内部添加变量和方法
    return obj;//将对象返回
})
// 在小刚的gang.js工程文件里，模块名moduleB
var moduleB=(function(){
    var obj={};
    var flag:false;
    obj.flag=flag;
    return obj;
})
// 在项目经理的main.js文件里
moduleA.flag;
moduleB.flag;

模块化开发之CommonJS

CommonJS的导出

module.exports={
    sum:10,
    falg:false,
    sayHi:function(){
        console.log('Hello')
    }
}

CommonJS的导入

var ming=require(./ming.js)
var sum=ming.sum;//对象解构
var falg=ming.flag;//对象解构
// var {sum,flag}=require(./ming.js);//语法糖

模块化开发之ES6实现方案

依然是两个核心：导出export，导入import。
在实际开发中，ES6模块化开发是主要实现方案。

ES6的导出

// 导出属性和方法：先定义再导出
var name = 'xiaoming';
var age = 18;
var sayHi = function () {
    console.log('Hi');
}

export {
    name,
    age，
    sayHi
}
// 导出属性和方法：直接定义导出
export var height = 1.75;
export var weight = 120;
export var sayHello=function(){
    console.log('Hello')
}
// 导出函数或类
export function mul(num1, num2) {
    return num1 * num2
}
export class Person {
    run() {
        console.log('Running');
    }
}

ES6的导入

// 导入export中定义的变量
import {name,age,height,weight} from './ming.js';
// 导入export中的函数或类
import {mul} from './ming.js';

Webpack

从本质来讲，webpack是一个现代的JavaScript应用的静态模块打包工具。webpack不仅仅是对JavaScript文件进行模块化打包，对于CSS、.img.jpg图片、json文件都可以被当做模块使用进行打包。

打包

将webpack中的各种资源进行打包合并成一个或多个包(bundle)。在打包的过程中，将scss/less转成css，将.jsx/.vue转成JS，将TypeScript或者ES6语法转成ES5语法等等操作。

模块打包工具：gulp、vite、rollup、grunt

grunt/gulp和webpack的不同

1. 如果你的工程模块非常简单，只需要进行简单的合并、压缩就使用grunt/gulp即可；但是如果整个项目使用了模块化管理，而且各模块之间依赖性非常强，就需要使用webpack.
2. grunt/gulp更加强调前端流程自动化，模块化不是其核心；webpack更加强调模块化开发管理，其它都是附带功能。

搭建webpack环境

webpack：模块化打包工具。
webpack为了可以正常运行，必须依赖node环境。
node环境为了可以正常执行代码，必须依赖npm工具。

npm：(node packages manager)，node包管理工具

1. 安装node.js环境

node -v：Windows cmd中输入命令：“node -v” 查看node版本号。

2. 安装webpack

• （全局安装）cmd命令：npm install [email protected] -g
• （本地安装）cmd命令：npm install [email protected] --save-dev
  本地安装，开发时依赖，项目打包后不需要继续使用。

terminal：终端。Windows终端同步VSCode终端。

webpack --version：查看webpack版本cmd命令。

webpack的使用

• dist文件夹(distribution分发):打包后文件
• src文件夹(源文件)

webpack 入口文件 出口文件

• VSCode终端打包命令：

webpack ./src/main.js ./dist/bundle.js

• VSCode终端打包运行成功命令：

Hash: 58b68b0178a632f7cb8b
Version: webpack 3.6.0
Time: 69ms
    Asset     Size  Chunks             Chunk Names
bundle.js  2.79 kB       0  [emitted]  main      
   [0] ./src/main.js 94 bytes {0} [built]        
   [1] ./src/mathUtils.js 144 bytes {0} [built] 

总之，在处理完所有模块之间的关系后，将多个js(./src/main.js)打包到一个js(./dist/bundle.js)文件中，在HTML中引入就非常方便。

webpack配置

第一步需要创建文件夹：webpack.config.js（这个文件夹命名是固定的）。

npm init：初始化

npm init

npm install：安装

npm install

npm run：运行脚本(运行package.json中的scripts脚本代码)

git clone：克隆

dev：开发；
devDependence:开发时依赖

loader

loder的作用：帮助webpack扩展对应的loader使之能够转化更多的文件类型。
loder的使用过程：

• 步骤一：通过npm安装需要使用的loader
• 步骤二：在webpack.config.js中的module关键字下进行配置

webpack-css文件处理(css-loader,style-loader)

1. 命令终端安装相关loader

# 通过--save-dev开发时依赖安装相应Loader
npm install --save-dev css-loader
npm install --save-dev style-loader

2. 在file.js中导入css源代码

import css from 'file.css';

3. 在webpack.config.js中添加module:{}属性

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,// 正则表达式
        use: [ 'style-loader', 'css-loader' ] // 自右向左加载
      }
    ]
  }
}

4. 命令终端运行打包脚本

npm run build

webpack-less文件处理(less-loader)

webpack-图片文件处理(url-loader)

webpack-ES6转ES5(babel-loader)

webpack-Vuejs环境处理

安装vue.js的三种方式：

1. 直接下载引用

<script src='./vue.js'>script>

2. 通过CDN引入

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>

3. npm安装

# 最新稳定版。通过NPM安装Vue.js能够很好的和webpack打包器配合使用。
$ npm install vue

webpack中对于vue的配置

# 这里vue不止有在dev开发时依赖，在后续的实际项目中也会使用到。
npm install vue --save

引入打包后的vue

     <div id="app">
         <h1>{{message}}h1>
     div>

    <script src="./dist/bundle.js">script>

import Vue from 'vue'

const app = new Vue({
    el:'#app',
    data:{
        message:'Hello Webpack'
    }
})

对vue环境进行打包

npm run build

打包过程中会报错。原因：

1. runtime-only：代码中不可以有任何的template模板
2. runtime-compiler：代码中可以有template模板。其中compiler可以用于编译template模板。
   解决方案：在webpack.config.js中配置resolve

Vue终极使用方案

组件复用

在入口HTML文件(main.html)的body中，只保留id=‘app’挂载的div标签和通过webpack打包后src=’./dist/bundle.js’的js文件script标签。

 <body>
     
     <div id="app">div>
    <script src="./dist/bundle.js">script>
 body>

安装vue-loader和vue-template-compoiler

npm install vue-loader vue-template-compiler --save-dev

compiler：编译

plugin(普拉根)

• loader主要用于转换某些类型的模块，它是一个转换器。
• plugin是对webpack本身现有功能的扩展，它是一个插件。

plugin插件扩展

1. BannerPlugin，添加版权。

const path =require ('path')
const webpack = require ('webpack')

module.exports ={
    ...
    plugins:[newwebpack.BannerPlugin('版权说明')] // plugins跟数组类型，添加此插件可以在budle.js头部看到相关信息。
}

2. HtmlWebpackPlugin，自动生成index.html打包到dist文件夹中。
   2.1 安装HtmlWebpackPlugin插件

npm install html-webpack-plugin --save-dev

2.2 在webpack.config.js中添加配置

const path=require('path')
const webpack=require('webpack')

module.exports ={
    ...
    // publicPath:'dist/' 需要删掉
    plugins:[new HtmlWebpackPlugin({
        template:'index.html'//按照index.html自动生成模板并打包到dist文件夹中
    })]
}

2.3 从新打包

npm run build

3. uglifyjs-webpack-plugin，对打包的js文件进行压缩
   3.1 安装插件

npm install uglifyjs-webpack-plugin --save-dev

3.2 在webpack.config.js中配置

const path=require('path')
const webpack=require('webpack')
const uglifyJsPlugin=require('uglifyjs-webpack-plugin')

module.exports ={
    ...
    plugins:[new uglifyJsPlugin()]
    // 查看打包后的bundle.js是被压缩过的，发布阶段才需要压缩。
}

3.3 重新打包

npm run build

搭建本地服务器server

本地服务器基于node.js搭建，内部使用express框架，可以实现浏览器自动刷新。

npm install --save-dev webpack-dev-server

在webpack.config.js中配置

const path=require('path')
const webpack=require('webpack')

module.exports ={
    ...
    devserver:{ // devserwer对象属性，与entry{},module{},plugins[]同级
        contentBase:'./dist',//表示为哪一个文件夹提供本地服务，默认为根文件夹
        // port://端口号，默认为8080
        inline:true// 页面实时刷新，布尔值
        // historyApiFallback://在SPA页面中，依赖HTML5的history模式
    }
}

在本地服务器上运行

node_modules/.bin/webpack-dev-server

webpack配置开发环境和生产环境的分离

package.config.js中配置比较复杂，需要对开发时依赖配置和生产时配置分离。创建三个文件夹：

• base.config.js:公共环境(开发时和发布时都依赖)
• dev.config.js:开发时环境(只保留本地服务器等)
• prod.config.js：发布时环境(保留对js的压缩相关)

npm install webpack-merge --save-dev

Vue CLI

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

安装Vue CLI

NodeJS官网
Vue CLI官网

# 检测node环境的版本
node -v
# v16.13.0

# 检测npm环境的版本
npm -v
# 8.1.0

全局安装Vue-cli脚手架

# 终端命令-g全局安装Vue CLI 3
npm install -g @vue/cli
# 上面安装的是Vue CLI 3，如果需要拉取Vue CLI 2.x版本的话则：
npm install -g @vue/cli-init
# 检查Vue CLI版本是否正确
vue --version
# @vue/cli 4.5.15

Vue CLI 2初始化项目

# vue init webpack 项目名
vue init webpack my-project
# 以下依次填入项目信息，根据项目信息创建项目模板
? Project name my-project  项目名称，不能包含大写字母等
? Project description A Vue.js project  项目描述
? Author TUHT 作者信息，会默认从git读取信息
? Vue build runtime 运行时
? Install vue-router? No Vue-路由
? Use ESLint to lint your code? No 监测代码规范
? Set up unit tests No 单元测试
? Setup e2e tests with Nightwatch? No   e2e测试:end to end测试，安装nightwatch是一个进行自动化测试的框架
? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)
> Yes, use NPM  NPM和Yarn二选一即可
  Yes, use Yarn  
  No, I will handle that myself 

# 执行package.json中dev相关命令，如打开本地服务器
npm run dev
#  DONE  Compiled successfully in 2934ms  下午8:16:34
#  I  Your application is running here: http://localhost:8080

# 执行package.json中build相关命令，从入口文件开始(build/build.js)执行，对项目进行打包
npm run build

Vue CLI 2目录结构

• bulid:webpack相关配置
• config:生产环境、开发环境和公共环境相关配置
• node_modules：依赖node相关的模块
• src：开发人员写代码的地方(HOME)
• static：静态资源，将资源原封不动打包
• .babelrc：ES代码相关转化配置
• .editorconfig：项目文本相关配置
• .gitignore：Git仓库忽略的文件夹配置
• .postcssrc.js：CSS相关转化配置

ESLint语法规范

如何关闭：在config/index.js中找到useEslint:true改为false.

Runtime+compiler和Runtime-only

二者只在main.js中有区别。runtime-only性能更高，代码量更少。runtime-only比runtime+compiler轻6KB！

• 如果在之后的开发中，你依然使用template，就需要选择Runtime+Compiler(运行时加编译器)
• 如果在之后的开发中，你使用.vue文件夹开发，那么可以选择Runtime-only(只含有运行时)

// runtime+compiler
// template——>ast——>render——>虚拟DOM——>UI
new Vue({
    el:'#app',
    template:'',
    components:{App}
})

// runtime-only
// render——>虚拟DOM——>UI
new Vue({
    el:'#app',
    render:h=>h(App)// h:hyperscript
    // render:function(h){
    //     return h(App)
    // }
})

Vue CLI 3.0(2018-08-11)

vue-cli 3与2版本的区别

• vue-cli 3是基于webpack 4 打造，vue-cli 2则是webpack 3；
• vue-cli 3的设计原则是“0配置”，移除配置文件根目录下的build和config等配置相关目录；
• vue-cli 3提供了vue ui命令，提供了可视化配置，更加人性化；
• vue-cli 3移除了static文件夹，新增public文件夹，并且将index.html移动到public中。

vue-cli 3(4)初始化项目

# vue creat 项目名称
vue create my-project

Please pick a preset: (Use arrow keys)
# Vue CLI v4.5.15,这里创建的是Vue CLI 4版本
Vue CLI v4.5.15
? Please pick a preset: 
  Default ([Vue 2] babel, eslint) 
  Default (Vue 3) ([Vue 3] babel, eslint) 
> Manually select features
#手动选择，按空格选中或取消
? Check the features needed for your project: 
>(*) Choose Vue version
 ( ) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 ( ) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing
# 选择一个你想要启动项目的 Vue.js 版本
? Choose a version of Vue.js that you want to start the proje
ct with 
  2.x 
> 3.x
# 你更喜欢把 Babel、ESLint 等的配置放在哪里？
? Where do you prefer placing config for Babel, ESLint, etc.?
 (Use arrow keys)
> In dedicated config files 
  In package.json 
# 将此保存为未来项目的预设？
? Save this as a preset for future projects? (y/N) 
# Save preset as 命名预设配置

Vue CLI 4目录结构

• node_modules：node相关
• public
• src：源代码
• .browserslistrc：浏览器相关配置
• .gitgnore：上传文件时忽略
• package-lock.json
• package.json

Vue CLI 2/3/4总结

安装与卸载

vue-cli2

全局安装：npm install -g vue-cli
卸载：npm unstall -g vue-cli

vue-cli3

全局安装：npm install -g @vue/cli@版本号
卸载：npm uninstall -g @vue/cli@版本号
# 注：原cli3的安装指令为@vue/cli，因为cli4的出现同样使用了@vue/cli，所以想要安装3的版本，就需要在@vue/cli后面加上@版本号。
# （例：npm install -g @vue/[email protected]）

vue-cli4

全局安装：npm install -g @vue/cli
卸载：npm uninstall -g @vue/cli

项目创建

vue-cli2

vue init webpack my-package

vue-cli3/vue-cli4

vue create my-package

项目启动

vue-cli2

npm run dev

vue-cli3/vue-cli4

npm run serve

vue-cli3/vue-cli4项目启动

npm run serve

INFO  Starting development server...
98% after emitting CopyPlugin

 DONE  Compiled successfully in 1408ms          上午11:21:47


  App running at:
  - Local:   http://localhost:8080/ 
  - Network: unavailable

  Note that the development build is not optimized.
  To create a production build, run npm run build.

vue-cli3/vue-cli4启动UI项目管理器

# 在任意目录下打开终端命令窗口
vue ui
# @vue/cli-ui 是 vue-cli 内置的一套成熟的 UI。
# 相比局限的命令行界面，图形化界面更人性化。

Vue-Router

路由(routing)，是通过互联的网络把信息从源地址传输到目的地址的活动。
路由器(router)，是连接两个或多个网络的硬件设备。路由器提供两种机制：路由和转送。

路由表(routing-table)，是一个存储在路由器或者联网计算机中的电子表格（文件）或类数据库。路由表本身就是一个映射表，决定了数据包的指向。

• 路由是决定数据包COA来源地到目的地的路径。
• 转送是将输入端的数据转移到合适的输出端的过程。

前端渲染和后端渲染

SPA(single page web application)页面：单页面富引用

前端路由和后端路由

前端路由的核心是改变页面的URL，但是页面不进行整体刷新。实现地址改变页面不刷新的方式有两种：

1. URL的hash，锚点(#)

• location.hash=’’

2. HTML5的history模式

• history.pushState({},’’,‘about’)
• history.replaceState
• history.back()
• history.forward()
• history.go(1)

vue-router

vue-router官网
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适用于构建单页面应用。
在vue-router构建的单页面应用中，页面路径的改变就是组件的切换。目前前端流行的三大框架中，都有自己的路由实现：

• Angular:ngRouter
• React：reackRouter
• Vue：vue-router

安装vue-router

npm install vue router --save

配置vue-router

// 配置路由相关信息
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

// 1. 通过Vue.use(插件)安装vue-router
Vue.use(Router)//Router是一个插件，Vue.use(插件)

// 2. 创建vue-router实例对象Router
export default new Router({//导出到main.js中
    // 配置路由和组件之间的应用关系
     routes: [ 
       {
         path: '/',
         name: 'HelloWorld',
         component: HelloWorld
       }
})
// 3. 将Router传入到Vue实例(main.js)

使用vue-router

第一步：创建路由组件：在components组件文件夹中创建路由组件Home.vue和About.vue组件，并通过export default{组件名}导出

第二步：配置路由映射：在router/index.js中配置组件和路径之间的映射关系

import Vue from 'vue'
import Router from 'vue-router'

import Home from '../components/Home'//导入Home.vue
import About from '../components/About'//导入About.vue

Vue.use(Router)//注入插件

export default new Router({//创建路由实例并导出
  routes: [
    {// 默认路由
      path:'',//'':空路径 或者 '/':根路径
      redirect:'/home'//redirect重定向
    },// 在routes中配置path和redirect映射，实现用户在默认打开网站时，自动进入网站首页。
    {
      path:'/home', //路径地址
      component:Home //组件名
    },
    {
      path:'/about', //路径地址
      component:About //组件名
    }
  ],
  
  // 实现页面跳转而不全部刷新的配置mode
  mode:'history';// vue-cli2/3配置为history或者hash模式，不配置则默认为hash模式
//   mode:'history:creatWebHistory()'//vue-cli4
})

第三步：使用路由组件：在App.vue组件中通过router-link和router-view标签使用路由

vue-router动态路由

第一步：创建路由组件

第二步：配置路由映射

import Vue from 'vue'
import Router from 'vue-router'
import User from '../components/User'

Vue.use(Router)

export default new Router({
  routes: [
      {
          // 处于活跃的路由
          path:'/user/:userId',// 被动态修改的路径
          component:User
      }
  ],
  const router = new   VueRouter({
      routes,
      mode:'history',
      linkActiveClass:'active'
  })
})

第三步：使用路由组件

vue-router懒加载

当打包构建应用时，JavaScript包(dist/js文件)会变得非常大，影响页面的加载，导致在页面跳转时会出现短暂空白。
把不同路由对应的组件分割成不同的代码块，然后当路由被访问时才加载对应的组件，从而实现高效在页面之间跳转。

// LearnVueRouter/src/router/index.js

// import Home from '../components/Home'//导入Home.vue
// import About from '../components/About'//导入About.vue

Vue.use(Router)//注入插件

// 方式一：结合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写法
const routes = [
    // 懒加载组件
    {
        path:'/home',
        component:()=>import('../components/Home')// 实现组件懒加载
    },
    {
        path:'/about',
        component:()=>import('../components/About')// 实现组件懒加载
    }
]

vue-router参数传递

URL:统一资源定位符

• 协议：//主机:端口/路径？查询
• scheme://host:port/path?query#fragment

文件路径别名

./build/webpack.base.conf.js中的路径配置(基于vue-cli3版本以上)

• src属性路径：(路径前加波浪号~)
• import导入路径：import Home from "@/router/index.js"(路径前加@)

module.exports={
  ...
  resolve: {
    extensions: ['.js', '.vue', '.json'],// 引用时可忽略的后缀名
    alias: {
      '@': resolve('src'),//用@符号代替src
      'components':resolve('@/components'),//设置组件路径
      'assets':resolve('@/resolve')
    }
  }
}

TabBar组件封装

在js文件中引入时import
在vue文件中引入时@import
组件化开发思想。尽可能将可复用组件抽离到模板中

1. 抽离到.vue文件中
2. 组件名.vue文件通过export defalut{name:组件名}导出
3. App.vue中通过import …… from "组件路径"导入
4. 在App.vue中的components中注册组件并使用标签引用router view和router link

Vuex

Vuex是一个专为Vue.js应用程序开发的状态管理模式。
Vuex采用集中式存储管理应用所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

Vuex也集成了Vue的官方调试工具devtools extension，提供了诸如零配置的time-travel调试/状态快照导入导出等高级调试功能。

Devtools：Vue开发的一个浏览器插件。可以访问Google商城下载。
不的话，用"极简插件"搜索vue.js devtools并下载完后，在google浏览器扩展程序中开启开发者模式，然后将解压后的源文件(CRX文件)复制或者拖入到扩展程序面板中。

Vuex简单理解为：Vuex是来进行状态管理的。利用Vuex可以把需要多个组件共享的变量全部存储到一个对象里面，然后将这个对象放在顶层的Vue实例中，让其他组件使用。

比如说：一个大型应用，具有某种状态(用户的登录状态/地理位置信息/用户名称或头像)，需要在多个界面中使用这种状态。而这种共享状态信息，可以统一放在一个地方对它进行保存和管理。当在某个界面使用时，可以实现响应式。

Vuex的使用

第一步：安装Vuex

# vuex是Vue中集成的一个插件
# vuex不只是在开发环境中依赖，也需要在生产环境中依赖
npm install vuex --save

第二步：创建store对象(./src/store/index.js)

// 在新文件夹(./src/store/index.js)中进行调用

// 1. 导入Vue 和 Vuex
import Vue from 'vue'
import Vuex from 'vuex'// 导入Vuex

// 2. 安装Vuex插件
Vue.use(Vuex)//注入Vuex插件，执行Vuex.install方法

// 3. 创建store对象
const store =new Vuex.Store({
    state:{// 保存状态

    },
    // 将共享方法保存在mutations中可以更加明确的追踪状态的变化
    mutations:{// 保存方法
        increment(state){
            state.counter++
        },
        decrement(state,n){
            state.cotuner -= n
        }
    },
    actions:{// 替代mutation进行异步操作
        aUpdateInfo(contex){
            setTimeout(()=>{
                context.commit('updateInfo')
            },1000)
        }
    },
    getters:{//类似计算属性

    },
    modules:{//store模型
        moduleA:{
            state:{},
            mutations:{},
            actions:{},
            getters:{}
        }
    }  
})

// 4. 导出store对象
export default store

第三步：导入store对象(./main.js)

// 在./main.js文件中导入store对象

import Vue from 'vue'
import App from './App'
import store from './store'// 导入store对象

//通过Vue.prototype将store赋值给$store
Vue.prototype.$store = store

new Vue({
    el:'#app',
    store,// 挂载store对象
    render:h=>h(App)
})

第四步：使用store对象(./components/xxx.vue)

Vuex5个核心概念

• State:单一状态树(单一数据源)
• Mutation：携带函数。提交mutation是更改Vuex中的store中的状态的唯一方法。（mutation是改变的意思）
• Getters：从store中获取state变异后的状态，类似计算属性。
• Action：异步操作
• Module：vuex-store模型

Vuex响应规则

Vuex的store中的state是响应式的，当state中的数据发生变化时，Vue组件会自动更新。

网络模块封装

• Ajax(XMLHttpRequest:XHR)
• jQuery-Ajax
• Vue-resource(Vue1.x)
• axios

Git

Git是世界上目前最先进的分布式版本控制系统。Git是由Linux之父Linus开发的，最初是为辅助Linux内核开发，来替代BitKeeper版本控制系统。Git是开源、免费的。

git官网

版本控制工具

• 本地式版本控制：RCS
• 集中式版本控制：SVN
• 分布式版本控制：Git(推荐)
  Git与SVN的主要区别？

Git的安装与卸载

• 卸载：清理Windows环境变量(删除git相关)——>控制面板直接卸载
• 安装：NEXT!

启动Git

Bit Bash：Linux和Unix风格命令行(推荐)
Git CMD：Windows风格命令行
Git GUI：图形化界面

基本Linux命令

常用Git命令

安装git之后首先要设置用户名称和e-mail地址。
所有的配置文件都在本地文件下C:\Users\个人用户\.gitconfig

• 查看配置命令：git config

# Git用户配置信息
git config --global user.name "TuHongtao"
git config --global user.email 1410048525@qq.com
# 查看系统配置
git config --system --list
# 查看当前用户配置
git config --global --list

Git基本理论

Git分为本地三个工作区域和一个Git远程仓库

• 工作目录：Working Directory
• 暂存区：Stage/Index
• 资源库：Repository/Git Directory
• Git仓库：Remote Directory

Git文件在区域之间的转换命令

• 工作目录git add——>暂存区commit——>资源库git push——>远程仓库
• 远程仓库git pull——>资源库git reset——>暂存区git checkout——>工作目录

Git项目搭建

1. 本地仓库搭建 创建全新的本地仓库

# 在当前目录新建一个Git代码库并git初始化
$ git init
# 需要在文件中打开隐藏项目
# 执行后可以看到在文件中出现了.git目录，关于版本的所有信息都在里面

2. 克隆远程仓库

# 在GitHub或者Gitee中克隆整个项目和它的版本信息
# 将远程服务器上的项目完全镜像至本地
$ git clone [url] https://.../文件名.git

GitHub项目创建及上传

supermall项目

将远程仓库中的项目克隆到本地：

1. Vue CLI 3创建项目:vue create supermall
2. github远程仓库创建项目仓库
3. 拷贝远程仓库项目链接HTTP/SSH/GitHub CLI，将远程仓库的项目克隆到本地git clone [src]
4. 新增文件后git add .
5. 提交到本地git commit
6. 上传到远程仓库git push

将已有的项目链接到远程仓库：

1. git remote add origin 仓库地址
2. git push -u orgin master

项目启动

文件夹目录结构
h：Linux和Unix风格命令行(推荐)
Git CMD：Windows风格命令行
Git GUI：图形化界面

基本Linux命令

常用Git命令

安装git之后首先要设置用户名称和e-mail地址。
所有的配置文件都在本地文件下C:\Users\个人用户\.gitconfig

• 查看配置命令：git config

# Git用户配置信息
git config --global user.name "TuHongtao"
git config --global user.email 1410048525@qq.com
# 查看系统配置
git config --system --list
# 查看当前用户配置
git config --global --list

Git基本理论

Git分为本地三个工作区域和一个Git远程仓库

• 工作目录：Working Directory
• 暂存区：Stage/Index
• 资源库：Repository/Git Directory
• Git仓库：Remote Directory

Git文件在区域之间的转换命令

• 工作目录git add——>暂存区commit——>资源库git push——>远程仓库
• 远程仓库git pull——>资源库git reset——>暂存区git checkout——>工作目录

Git项目搭建

1. 本地仓库搭建 创建全新的本地仓库

# 在当前目录新建一个Git代码库并git初始化
$ git init
# 需要在文件中打开隐藏项目
# 执行后可以看到在文件中出现了.git目录，关于版本的所有信息都在里面

2. 克隆远程仓库

# 在GitHub或者Gitee中克隆整个项目和它的版本信息
# 将远程服务器上的项目完全镜像至本地
$ git clone [url] https://.../文件名.git

GitHub项目创建及上传

supermall项目

将远程仓库中的项目克隆到本地：

1. Vue CLI 3创建项目:vue create supermall
2. github远程仓库创建项目仓库
3. 拷贝远程仓库项目链接HTTP/SSH/GitHub CLI，将远程仓库的项目克隆到本地git clone [src]
4. 新增文件后git add .
5. 提交到本地git commit
6. 上传到远程仓库git push

将已有的项目链接到远程仓库：

1. git remote add origin 仓库地址
2. git push -u orgin master

项目启动

文件夹目录结构
环境配置：路径配置(配置完需要重新npm run dev/serve)