满意code
满意code

vue随笔

VUE

引导

官网

封装 VS 库 VS 框架

封装通常指一小部分通用业务逻辑，多个封装形成一个模块或者文件，多个模块或者文件就发展成为库或者框架，而插件是为库或者框架发布后做后期补充，可以有官网或者第三方提供的，有点外挂的意思，有时候一个模块就是一个文件，有时候一个文件里面有多个模块，把不同的文件按类别放置到不同的目录里，这个目录叫做包，框架改变了编码思想，库只是个工具你用或者不用不会影响你的编码思想

编码思想

jquery你用或者不用，你的编码思想都会是面向事件，开发一款插件中间用到什么库不重要，你会面向对象开发，如果用vue你要做的就是面向数据

MVC由来

一个思想、是后端产物,是为了前后端分离，早期的开发组成↓

工种 涉及
后端、后台、程序员 java(jsp+html) php(php+html+js)
前台、前端、美工 html+table+css
编辑、如今叫小编 登录后端开发的管理平台，对网页内容做增删改查
美工、设计师 ps，dw，flash

后端MVC

不谈

前端MVC

对js分离，js业务如今是厉害了（繁杂了）

目录 分类 举例 复用
model/xx.js 数据(M) ajax/jsonp/数据解析 √
view/xx.js 视图(V) 展示数据、创建元素，变色，运动 √
control/xx.js 控制层© 串业务,事件驱动 ×

伪代码举例

//M
function readBaidu(str,callback){..拿着需求str,求数据，调用回调带数据出去.}
//V
function writeLi(data,callback){...拿着数据写页面}
//C
window.onload=function(){
  oBtn.onclick=function(){
    readBaidu('xxx',function(res){
      writeLi(res);
      winObj.close()
    })
  }
}

vue是MVC？

MVC衍生出很多变体，MVP,MVVM,MV*, VUE是MVVM，M----V----VM，M数据，V视图, VM是负责M与V相互通信

开发工具

HbuilderX

软件自动引入依赖

手动引入依赖

hello world

vue的使用，简单理解，new出来一个Vue的实例，传一堆配置参数，控制一片html

<script src="vue">script>
<body>
  V
  <div id="app">
    要被控制的html{{key}}
  div>
body>
<script>
	let vm = new Vue({
    el:'#app'  //要控制的那片html代码
    data:{key:value}//数据  M
  })
script>

data选项

初始化数据位置，元数据，是vue实例的一个实例属性，所接受的数据类型，number/string/boolean/array/json/undefined/null

数据绑定

插值表达式

{{数据名}} mustache语法 声明式渲染

指令

v-text="数据名"

v-html="数据" 非转义输出

属性

v-bind:html属性="数据" 属性值动态化
:html属性="数据" 简写

v-bind:[属性名]="数据" 属性名动态化

列表渲染

把数据指定到一些dom中去渲染，推荐操作的数据类型：变量数组、对象、字符、数字

<li v-for="值 in 数据">{{值}}li>
<li v-for="值 of 数据">{{值}}li>
<li v-for="(值,索引) in 数组">{{值}}/{{索引}}li>
<li v-for="(对象,索引) in|of 数组">{{对象.key}}/{{索引}}li>
<li v-for="(值,键) in 对象">
<li v-for="(数,索引) in 数字">
<li v-for="(单字符,索引) in 字符">

空数组，null，undefined不循环

条件渲染

一段dom可以根据数据有条件的渲染，使用指令v-show，或者v-if,对应的值是布尔

<div v-show="true">box1div>
<div v-if="false">box2div>

v-show VS v-if

v-show=“布尔” v-if=“布尔”
区别 操作css 操作dom
场景 适合频繁切换 适合不频繁切换
性能消耗 初始渲染消耗 频繁切换消耗

事件绑定

vue通过v-on指令绑定事件，处理函数需要丢到一个methods选项当中去

事件名 不带on

new Vue({
  methods:{
    方法:function(ev,参数){业务}
    方法2(ev,参数){业务}
  }
})

ev 事件对象，参数可以有多个

注意：vue提供的选项的值如果是函数时，不可用箭头函数 , 会造成this丢失

双向绑定

视图控制数据，数据也可控制视图,可通过属性+事件绑定实现，也可以使用系统指令v-model,这个指令可以用在能生产数据的表单元素上

<input type="text" :value="data数据" @input="checkIptValue">
<input type="text" :value="data数据" @input="data数据=$event.target.value">
<input type="text" v-model="data数据">

类和实例API

Vue 是个类，所以Vue.protoname，是类属性|静态属性，Vue.methodname()是类方法|静态方法，new Vue返回的是实例，所以vm. p r o t o n a m e 是 实 例 属 性 ， v m . protoname是实例属性，vm. protoname是实例属性，vm.methodname()是实例方法,同时vue类内部的this指向的是实例vm，实例vm.$protoname对等vue选项的key

非响应式情况

情况要发生

  • 对数组使用了 非变异 (non-mutating method) 方法（返回的了新数组）
  • 修改数组的长度时
  • 修改数组索引上的值（根索引)
  • 给对象添加了不存在的属性

问题还是要解决

Vue.set(数组, index, value)

vm|this.$set(对象, key, value)

this.$forceUpdate() 强制刷新

this|vm.$mount(’#app’)

吃亏后的经验

不要修改数组的根键,不要修改数组的长度,数据一开始都要声明在data选项内部，不要对数组使用非变异的api

key的问题

给指定循环的dom一个key 是数据的id，确保key唯一性，避免数据错乱导致的视图问题,同时提供性能优化

模板表达式

在dom里面插入数据，数据周围可以出现表达式，但不是语句，如{{数据+表达式}} v-指令="数据+表达式"

表达式:

title + 'abc'
`${title}呵呵哒` 
bl ? '处' : '非处'
'i love you'.split(' ').reverse().join(' ')

计算属性

是一个函数,所依赖的元数据变化时，会再次执行，平时会缓存，是响应式的，需要在模板中渲染才可调用

语法

//定义
computed:{
    计算属性: function(){return 返回值}		
}

//使用
使用:	{{计算属性}} |  v-指令="计算属性"

computed VS method

method computed
方法会每次调用 基于它们的响应式依赖进行缓存的
一般 性能高
{{methodname()}} {{computedname}}
适合强制执行和渲染 适合做筛选

作业

vue+bootstrap实现留言板

读官方教程，只看课堂上讲过的，没讲的不要纠结

复习文档

官方教程

多vue实例控制多片html，多实例不可嵌套，body和html不可作为被控制的dom根

计算属性的getter/setter

template元素

包裹元素,有逻辑，自身不渲染

if + v-else-if + v-else

双向绑定选择框

属性检测

需要在数据变化时执行异步或开销较大的操作时，而计算属性是同步的，这个时候需要属性检测watch

定义一个选项

watch:{
  数据名:'method函数名'    //数据名==data的key
  数据名:函数体(new,old){}
  数据名:{
    handler:fn(new,old){},
    deep: true //深度检测
    immediate: true //首次运行
  }
}

注意：在变更 (不是替换) 对象或数组时，旧值将与新值相同，因为它们的引用指向同一个对象/数组。Vue 不会保留变更之前值的副本。

计算属性 VS 函数 VS 属性检测

计算属性 函数 属性检测
依赖模板调用且有返回值 √ - ×
是否缓存 √ × √
异步 × √ √

样式操作

操作样式，就是属性绑定，只不过绑定的属性是class和style

绑定姿势

属性值的类型支持

字符/对象 / 数组

指令

扩展了html语法功能,区别了普通的html属性，vue系统自带了指令，也可自定义指令来扩展，所有系统指令在官方文档的API处提供

其他系统指令

v-pre

保留字不编译，原样输出，跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译

v-cloak

防闪烁，模板没编译完，电脑配置差，有可能会看到{{}}，体验不佳，用css先隐藏，之后再显示，包括被包裹的子元素

v-once

只渲染元素一次。随后的重新渲染被忽略，包括被包裹的子元素。这可以用于优化更新性能

自定义指令

系统指令在不够用的情况下，考虑自定义，指令是个函数|对象,用来操作dom的, 里面的this 返回window

全局定义

Vue.directive('指令名',函数(el,binding){})

局部定义

new Vue({
	directives:{
    指令名	: function(el,binding){},//简写方式: bind + update
  	指令名(el,binding){},
    指令名:{
				inserted:fn(el,binding){}		//绑定指令的元素插入到父节点时调用  v-focus
				bind:fn	//指令第一次绑定到元素时调用	v-drag
				update:fn	//指令所在的元素的model层的数据，view有更新请求时
				componentUpdated:fn	//更新完成时
    }
  }
})

过滤器

对数据在模板中的表现过滤，符合预期，比如数据是0和1，想要表现成对错、成功失败、男女，数据需要过滤器来格式化，vue1.x版本有系统自带过滤器，vue2.x之后完全需要自定义，没有自带过滤器

使用

{{数据名 | 过滤器名(参数2,参数3)}}
:属性="数据| 过滤器名(参数2,参数3) "
v-指令名="数据 | 过滤器"

全局定义

Vue.filter('过滤器名称',函数(要过滤的元数据,参数2,参数3,n){ return 过滤后的值})

局部定义

filters:{
  过滤器名称:函数(要过滤的元数据,参数){}	//函数必须要有返回值
}

预购阿里云服务器(ecs云服务器)

链接 -》个人云 -》突发性能型 t5（74/年)-》系统（centOs系统7，认准ecs云服务器-》控制台做一下实名认证

域名购买

链接

数据交互

向服务器发送ajax请求，抓取数据，【vue：你看我看嘛】

解决方案

  • 自行通过XMLHttpRequest对象封装一个ajax
    使用第三方自带的ajax库，如：jquery ×
  • 把XMLHttpRequest，封装成一个promise
  • 使用js原生自带的promise语法糖 fetch
  • 使用第三方ajax封装成promise习惯的库，如：vue-resource、axios

封装ajax到promise

function maxios(options) {
  
  return new Promise((resolve, reject) => {
    
    //-1  整理options
    options = options || {};
    options.data = options.data || {};
    options.timeout = options.timeout || 0;
    options.method = options.method || 'get';

    //0 整理data
    var arr = [];
    for (var key in options.data) {
      arr.push(key + '=' + encodeURIComponent(options.data[key]));
    }
    var str = arr.join('&');

    //1	创建ajax对象
    if (window.XMLHttpRequest) {
      var oAjax = new XMLHttpRequest(); //[object XMLHttpRequest]
    } else {
      var oAjax = new ActiveXObject('Microsoft.XMLHTTP')
    }

    if (options.method == 'get') {
      //2.
      oAjax.open('get', options.url + '?' + str, true);
      //3.
      oAjax.send();
    } else {
      //2.
      oAjax.open('post', options.url, true);
      //设置请求头
      oAjax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
      oAjax.send(str); //身子
    }

    //3.5	超时
    if (options.timeout) {
      var timer = setTimeout(function() {
        alert('超时了');
        oAjax.abort(); //中断ajax请求	
      }, options.timeout);
    }


    //4.
    oAjax.onreadystatechange = function() { //当准备状态改变时
      if (oAjax.readyState == 4) { //成功失败都会有4
        clearTimeout(timer);
        if (oAjax.status >= 200 && oAjax.status < 300 || oAjax.status == 304) {
          resolve(JSON.parse(oAjax.responseText))
        } else {
          reject(oAjax.status)
        }
      }
    };
  })
}

axios

this.$http|axios({配置}).then(成功回调(res)).catch(失败回调(res))
this.$http|axios.get(url,{配置}).then(成功回调(res)).catch(失败回调(res))
this.$http|axios.post(url,data,{配置}).then(成功回调(res)).catch(失败回调(res))

配置：

url:“地址“
method: “ 提交姿势”
params：{} 地址栏携带的数据
data:{} 非地址栏携带数据

res: 响应体 数据是在res.data内部 vue-resource 返回的数据在res.body内部

访问本地json

// axios({ //第三方的axios
  this.$http({ //把axios绑定到Vue的原型
    url: './data/user.json'
  }).then(
    res => console.log('maxios res', res)
  ).catch(
    err => console.log('maxios err', err)
  )

读取php接口get

axios({
  url: 'http://localhost:80/php7/get.php',
  params: {//地址栏数据
    a: 11,
    b: 22
  }
}).then(
  res => this.list = res.data
)

跨域

有时，前端和后端的工程文件不在同一个域，也会出现跨域，以下是解决方案

后端解决

部分接口允许

//node 要允许的接口内部 
res.setHeader('Access-Control-Allow-Origin', req.headers.origin)

//php端
header('Access-Control-Allow-Origin:*');

所有接口允许

//node端
let cors = require('cors');

app.use(cors({
  //允许所有前端域名
  "origin": ["http://localhost:8001","http://localhost:5000","http://localhost:8080"],  
  "credentials":true,//允许携带凭证
  "methods": "GET,HEAD,PUT,PATCH,POST,DELETE", //被允许的提交方式
  "allowedHeaders":['Content-Type','Authorization']//被允许的post方式的请求头
}));
前端解决

jsonp

浏览器装插件 正向代理

开发环境做代理（webpack，正向代理，客户端代理）

读取php接口post

let params = new URLSearchParams(); //创建一个url传输的实例
  params.append("a", "1"); //添加一个key/value
  params.append("b", "22"); //添加一个key/value
  // params.delete("a")  删除
  // params.set("a","11");//修改
  // params.has("a")  返回 true/false

axios({
  url: 'http://localhost:80/php7/post.php',
  method: 'POST', //提交姿势
  // data: {//非地址栏数据 ***
  //   a: 11,
  //   b: 22
  // },
  // data: "a=11&b=22",
  data: params,//URLSearchParams类型
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  } //php 默认要求传递请求头
}).then(
  res => this.list = res.data
)

读取node接口get

axios({
  url: 'http://localhost:3001/api/follow',
  params: {
    _page: 1,
    _limit: 2
  }
}).then(
  res => this.list = res.data
)

读取node接口post

//测试 formdata类型

let fileInput = document.getElementById('icon'); //抓取到file dom
let formData = new FormData(); //创建formData类型

formData.append("icon", fileInput.files[0]); //icon键的值是个文件体

formData.append("username", "damenmen")
formData.append("password", "damenmenda123")
formData.append("nikename", "我子个启的")

axios({
  url: 'http://localhost:3001/api/reg',
  data: formData,//formdata类型
  method: 'POST',
}).then(
  res => this.list = res.data
)

读取第三方接口

axios({
  url: 'https://douban.uieee.com/v2/movie/in_theaters',
  params: {
    start: 0,
    count: 3
  }
}).then(
  res => this.list = res.data
)

发送jsonp请求

axios不支持jsonp请求，vue-resource支持，解决axios支持jsonp需要自行封装或使用第三方axios插件

自行封装

//options url,data,timeout,success,error
function jsonp(options){
	
	options = options || {};
	if(!options.url){
		return;
	}
	options.data = options.data || {};
	options.cbName = options.cbName || "cb";
	options.timeout = options.timeout || 0;
	
	var fnName = "jsonp_"+ Math.random();
	fnName = fnName.replace("." ,"");
	options.data[options.cbName] = fnName;
	
	var arr = [];
	for(var i in options.data){
		arr.push(i + "=" + encodeURIComponent(options.data[i]));
	}
	var str = arr.join("&");
	
	
	window[fnName] = function (json){

		options.success && options.success(json);
		
		clearTimeout(timer);
		oHead.removeChild(oS);
		window[fnName] = null;
	}
		
	var oS = document.createElement("script");
	oS.src = options.url + "?" + str;
	var oHead = document.getElementsByTagName("head")[0];
	oHead.appendChild(oS);
	
	if(options.timeout){
		var timer = setTimeout(function(){
			options.error && options.error();
			//window[fnName] = null;
			window[fnName] = function(){};
		},options.timeout);
	}
		
}

axios.jsonp=jsonp//axios需要先引入

使用自行封装

<script src="axios">script>
<script src="自行封装的jsonp">script>
<script>axios.jsonp({配置})script>

使用第三方axios的jsonp插件

推荐 axios-jsonp

作业

利用axios读取node|php接口，渲染一张页面，页面中要求有过滤器和计算属性级指令的使用，其他自由发挥

生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会

链接

组件

Vue根实例表示1个应用，一个应用有若干个组件拼装而成

使用组件

<组件名>
<组件名/>

定义组件

let 组件变量名= Vue.extend({
  template:'
我是header组件
' //组件使用的模板
});

let 组件变量名={};  //√

注册组件

//全局注册
Vue.component('组件名',组件变量名);

//局部注册
components:{ //选项
  组件名：组件变量名	//√
}

组件数据

一个组件的 data 选项必须是一个函数,且要有返回object，因此每个实例可以维护一份被返回对象的独立的拷贝，否则组件复用时，数据相互影响,也就是说组件的作用域是独立的

组件模板

外部模板,字符模板(行间模板|inline-template)

//=========外部模板========

//模板定义1
<template id="id名">
	<div>...div>
tempalte>

//模板定义2
<script type="x-template" id='id名'>script>

<script>
let 组件变量名= {
  template:'#id名' //组件使用的外部模板
};
script>


//=========字符模板========
<script>
let 组件变量名= Vue.extend({
  template:'
...
'
});
script>

组件避讳

  • 组件名不可和html同名
  • 组件没有el选项，只有根实例存在el
  • 组件的模板一定要有根元素
  • 组件的data是个函数,需要返回对象

书写风格

  • 组件变量名: 大驼峰 XxxXxx
  • 组件名: xx-xx | 大驼峰|app-header-nav

单文件组件

xx.vue,内部组成（script + template + style）

vue-dev-tools安装

方案1： 登录谷歌应用商城->索引vue-dev-tools->安装->重启浏览器

方案2：

  https://github.com/vuejs/vue-devtools
  1. 	Clone this repo  downloadzip 到桌面
  2.	npm install  安装依赖
  3.	npm run build		build目录项目就有各种浏览器的安装包
  4.	打开 chrome -> 设置->更多工具->扩展应用->开发者模式->加载扩展程序->指向->build目录项目下的chrome

工程化开发环境

通过官方脚手架，手动搭建模块化，工程化，自动化开发环境

vue -V  //查看版本 

//非3.x/4.x 时需要先卸载
npm unstall vue-cli -g  

//安装
npm install -g @vue/cli  //装3/4
npm install -g @vue/cli-init //桥接2  

//测试
vue -V

//初始开发环境
vue create 目录  |  .
 自定义->保留babel
cd 目录
npm run serve


//问题汇总。
1. vue : 无法加载文件 ...，因为在此系统上禁止运行脚本

解决: https://blog.csdn.net/wqnmlgbsz/article/details/100654258
hbx内部设置当前策略: Set-ExecutionPolicy -Scope CurrentUser -> RemoteSigned


2. vue-cli安装失败
分析：安装全局包 登录账号要是admin  |  管理运行 cmd | powersheel ，node要全量安装
解决：
   a 换手机5g ，关防火墙，重装
	 c hbx自动创建
   d npx vue create 目录
   e copy 被人 创建好的项目

HbuildX自动搭建模块化，工程化，自动化开发环境

工作区-》右键-》创建项目-》普通项目-》vue-cli项目

//测试
工作区-》右键-》外部命令->npm run serve

环境讲解

main

Vue.config.productionTip = false//设置为 false 以阻止 vue 在启动时生成生产提示。
render: h => h(App)
//↓
render: function(createElement){
  // return createElement('h3','内容')
  // return createElement(组件)
  return createElement(App)
}

es6模块化复习

输入

import a from './mod/a.js'  //输入 默认输出 的任意类型
import {对外变量，a,b,c} from './mod/a.js'  //输入批量输出的 属性,需要一个对象包装
import * as a from './mod/a.js'  //输入批量输出的 属性,包装到一个对象里面使用

输出

//批量输出  any  导出多次
export const 对外变量 = 模块内部的变量
export {a,b,c} //批量输出模块内部的属性

//默认输出  any   只能导出一次
export default any

css 规则

style-loader 插入到style标签，style标签多了选择器冲突问题就出来了，解决方案如下

/* 方案1:	命名空间 推荐BEM命名风格*/
/*B__E--M  block 区域块  element 元素  midiler 描述|状态 */
.search{}
.search__input{}
.search__input--focus{}
.search__input--change{}
.search__button{}

//  B__E--M
//  b-b-b__e-e-e--m-m-m

组件通讯基础

父子（props）

父组件通过属性绑定，子组件通过选项props接收,props是响应式的，props完成单向下行绑定

父传

<子 :自定义属性="父数据">

子收

props:['自定义属性']
props:{自定义属性:{type/default/required/validator...}}



  {{自定义属性}}

注意:

props是只读的,不推荐改

props命名:

props: [‘postTitle’]
​

奇葩情况

在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变这个对象或数组本身将会影响到父组件的状态

子父

通过自定义事件实现，给子组件绑定自定义事件，子组件触发自定义事件时传递，事件函数是父组件方法，父方法负责接收

父绑定父接收

子触发子传递

集中管理（$root)

把数据存到根实例的data选项，其他组件直接修改或者使用

定义

new Vue({
  data:{a:1}
})

使用

//子组件内部
this // 组件本身
this.$root // vm
this.xx //组件内部数据
this.$root.a //根实例数据

this.$root.proname=value  //修改

vm.xx  其他模块需要输入vm

路由

作业

完成微博的数据读取，页面渲染，有能力的完成组件的拆分

路由

用来SPA (single page application 单页面应用)，页面跳转，官网

单页VS多页

页面模式 多页面模式（MPA Multi-page Application） 单页面模式（SPA Single-page Application）
页面组成 多个完整页面， 例如page1.html、page2.html等 由一个初始页面和多个页面模块组成， 例如：index.html
公共文件加载 跳转页面前后，js/css/img等公用文件重新加载 js/css/img等公用文件只在加载初始页面时加载，更换页面内容前后无需重新加载
页面跳转/内容更新 页面通过window.location.href = "./page2.html"跳转 通过使用js方法，append/remove或者show/hide等方式来进行页面内容的更换
数据的传递 可以使用路径携带数据传递的方式，例如：http://index.html?account=“123”&password=123456""，或者localstorage、cookie等存储方式 直接通过参数传递，或者全局变量的方式进行，因为都是在一个页面的脚本环境下
用户体验 如果页面加载的文件相对较大（多），页面切换加载会很慢 页面片段间切换较快，用户体验好，因为初次已经加载好相关文件。但是初次加载页面时需要调整优化，因为加载文件较多
场景 适用于高度追求高度支持搜索引擎的应用 高要求的体验度，追求界面流畅的应用
转场动画 不容易实现 容易实现

单页面模式：相对比较有优势，无论在用户体验还是页面切换的数据传递、页面切换动画，都可以有比较大的操作空间 多页面模式：比较适用于页面跳转较少，数据传递较少的项目中开发，否则使用cookie，localstorage进行数据传递，是一件很可怕而又不稳定的无奈选择

基础使用

安装引入注册

npm i vue-router -S

// src/main.js
import router form './plugins/router.js'
new Vue({
  router
})

配置路由

// src/plugins/router.js
import Vue from 'vue'

//1. 引入路由包
import VueRouter from 'vue-router'

//2. 安装插件包到Vue上, 
Vue.use(VueRouter);

//3. 路由配置
let routes = [
  {path: '/home',component: Home}, //route  一条路由的配置
]

//4.路由实例
let router = new VueRouter({ //插件路由对象
  // routes:routes
  routes,
});

//5.导出路由实例，让他去控制vue根
export default router

声明式跳转

声明式跳转
声明式跳转
声明式跳转
展示区

router-link 组件属性:
tag=‘li’ 指定编译后的标签
active-class=‘类名’ 指定激活后的样式 模糊匹配
exact-active-class=‘类名’ 指定激活后的样式 严格匹配
router-link和router-view组件是vue-router插件提供的

重定向

//src/plugins/router.js  >  routers
{
  path: '/',  //默认页
  redirect: '/home' //配置型跳转
},

404

{
  path: '*',
  component: NoPage组件
}

路由嵌套

// src/plugins/router.js
routes=[
  {},
  {path:'xx/:变量',component:xx}, //在当前层级展示区展示
  {
    path:xx
    component:xx
    children:[  //子路由
      {path:':变量', ..}
	    {.. ，redirect: 'xx'} //默认页
    ]
  },
  {}
]

路由传参

// 组件中
<router-link to='xx/参数?a=1&b=2'></..>
<router-link :to='{name:'名字',params:{id:1},query:{a:2,b:3}}'></..>

命名路由

{path: '/home',component: Home, name:'名字'}, //route  一条路由的配置

组件接参

//模板template
{{$route.params|query|path}} 
//组件 script
this.$route.params|query

编程式跳转

this.$router.push(string|obj)
this.$router.push({name:'...'})   //添加一个路由 （记录到历史记录)
this.$router.replace({name:'...'})   //替换一个路由 （不记录到历史记录)
this.$router.go(-1|1)|back()  //回退/前进

路由模式

// src/plugins/router.js

let router = new VueRouter({ //插件路由对象
  routes,
  // mode:'hash'//哈希模式   location.href
  mode:'history'//历史记录   history.pushState
});

扩展

路由守卫

全局守卫

// src/plugins/router.js

//前置
router.beforeEach((to, from, next) => {
  
  //	to: 目标路由 $route
  //	from: 当前路由 $route
  
  // next() 跳转  一定要调用
  next(false);//走不了
  next(true);//走你
  next('/login')//走哪
  next({path:'/detail/2',params:{},query:{}})//带点货
  
  // 守卫业务
  if(to.path=='/login' || to.path=='/reg' || to.path=='/register'){
    //判断是不是登录了
    //axios请求 携带 token 
    next()
  }else{
    next('/login');
  }
  
})

//后置
router.afterEach((to,from)=>{
  //全局后置守卫业务
})

路由独享守卫

// src/plugins/router.js -> routes
{
  path: '/user',
  component: User,
  beforeEnter: (to,from,next)=>{ //路由独享守卫 前置 
    console.log('路由独享守卫');
    if(Math.random()<.5){
      next()
    }else{
      next('/login')
    }
  }
 },

独享，没有后置

组件内部守卫

//组件内部钩子
beforeRouteEnter (to, from, next) {//前置   运行在beforeCreate 之前
  // 不！能！获取组件实例 `this`
  // 因为当守卫执行前，组件实例还没被创建
},
beforeRouteUpdate (to, from, next) {
  // 在当前路由改变，但是该组件被复用时调用
  // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
  // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
  // 可以访问组件实例 `this`
},
beforeRouteLeave (to, from, next) {//后置  运行在beforeDestory之前
  // 导航离开该组件的对应路由时调用
  // 可以访问组件实例 `this`
}
路由元信息

定义路由的时候配置 meta 字段

//src/plugins/router.js
{
  path: '/home',
  component: Home,
  meta: { requiresAuth: true }
}

访问 meta 字段

this.$route.meta
to.meta from.meta
滚动行为

SPA是单页面，只有一个滚动条，路由跳转时滚动条会影响到元素位置，使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样

对于所有路由导航，简单地让页面滚动到顶部

// src/plugins/router.js
const router = new VueRouter({
  scrollBehavior (to, from, savedPosition) {
    //计算位置
    return { x: 0, y: 0 }
  }
})
数据获取

有时候，进入某个路由后，需要从服务器获取数据，解决的方案有导航完成之后获取，和导航完成之前获取

导航完成之后获取

组件会先渲染，哪怕空数据，之后数据回来会再次渲染，组件会渲染至少两次，数据没回来之前可以显示一个loading

导航完成之前获取

又叫数据预载,在前置守卫里面完成数据读取后再跳转到目标组件，数据未回来之前，画面不动，显示loading，组件只渲染一次

beforeRouteEnter(to,from,next){
  //读取数据附加到目标路由上 to.query.数据名=值  √
  //读取数据 next( _this => _this.属性="拿到的数据")   导致更新期触发
}

项目

技术栈选型

前端

@vue/cli

vue-router

axios

animate.css / vue-animate

vuex

全家桶

后端

nodejs

express

mongodb

bcrypt

jsonwebtoken

multer

工作区目录

dist
  |-...	 打包后，生产环境资源
public   不优化 数据资源
  |-data:
    |-写死数据.json
    ....
  |- 图/字体/MP4
src  开发环境 会优化  
  |-assets 全局会优化 ui资源 开发资源
    |-js
    |-css
    |-image
    |-...
  |-pages  页面 跳转 不通用
    |-	home.vue / follow.vue / column.vue / user.vue
    |-  detail.vue / login.vue / reg.vue 
    |-	goods 目录 
      |- comment.vue
      |- goods
        |- boots.vue
      |- goods.vue
			
  |-layouts 布局
    |- App.vue
    |- Header.vue
    |- Footer.vue
		|- error.vue
  |-filters 全局过滤器
    date.js
    fillzero.js
    ...
  |-plugins 插件配置
    axios
    router
  |-components 通用组件
    |- loading.vue 
    |- banner.vue /  Button.vue / Cell.vue / uc-input / uc-nav
		|- uc-toolbar/ frame-screen
		|- Button
			 |- Button.vue
 			 |- assets
					|- css/js/image
  main.js 模块主入口
package.json 依赖管理

开发

准备工作

移动端(设置视口,设置字体比例，基础样式normal，base)

资源引入

  • index.html引入 不优化 全局
  • main.js 引入 优化 全局
  • 组件 引入 优化 全局，应该是私有

资源指向

相对路径 以当前文件为基准 绝对路径指向public， dom里面行间样式链接图片资源指向了pubic，前景图片都为数据默认指向public

布局方案

  • 切图，需要设计稿，客户端开发时用到
  • UI库，管理端开发时用到，常用的UI库(elementUI/mintUI/vantUI/antd…)
  • 模板移植，老项目重构时用到

布局组件/通用组件/页面组件

01 全局资源 在主入口文件(index.html)引入
02 全局资源 主程序(main.js|app.vue) | providerPlugin webpack插件
03 自执行脚本，跟着要控制的元素走 ,为了迁移
04 私有资源，进入组件内部, 添加scoped
05 开发环境资源引入动作，取决于资源的输出方式，和业务自身的要求(如何暴露)

组件事件

<组件 @原生事件名.native="函数">
<组件 @自定义事件名="函数">

组件双向绑定

//父


//组件

路由搭建

所有组件css 插入到 style标签，选择器会有机会出现重名,css 冲突,解决方案如下

  • css命名空间 BEM √
  • 模块化
  • scoped 独立样式作用域

数据交互

客户端代理

// 项目根/vue.config.js
module.exports = {
  devServer:{
    //设置代理
    proxy: { //代理是从指定的target后面开始匹配的，不是任意位置；配置pathRewrite可以做替换
      '/api': { //axios访问 /api ==  target + /api
        target: 'http://localhost:3001',
        changeOrigin: true, //创建虚拟服务器 
        ws: true, //websocket代理
      },
      '/douban': { // axios 访问 /douban == target + '/v2/movie/in_theaters?start=0&count=10'
        target: 'https://douban.uieee.com',
        changeOrigin: true,
        pathRewrite: { //路径替换
          '^/douban': '', // axios 访问/douban/v2 == target + /v2
        }
      }
    }
  }
}

列表&详情

home->axios->props(数据,数据标识)->cell  -> 路由传递 参数id 和 数据标识-> detail(参数id,数据标识->axios)

follow->axios->props(数据,数据标识)->cell  -> 路由传递 参数id 和 数据标识-> detail(参数id,数据标识->axios)

column->axios->props(数据,数据标识)->cell  -> 路由传递 参数id 和 数据标识-> detail(参数id,数据标识->axios)

用户介权

登录
login-> axios （username、密码）->/api/login -> 返回token-》客户端种本地(cookie/localStorage)->跳转之前|user

//自动登录成功
/user->前置守卫->数据预载 api/user ->axios请求携带token（本地抓取）->成功->返回用户数据->传递给user组件

//注销: 
删除 本地 token, 跳转登录

//注册 同登录
formData 类型

拦截器

import axios from 'axios';
import Vue from 'vue';
import router from './router.js'

//添加一个请求的拦截器
axios.interceptors.request.use(function(config) {
  //config 含有发出的请求的配置信息  axios(config)
  
  // 每次都自动携带token
  let token = window.localStorage.getItem('user')
  token = token ? JSON.parse(window.localStorage.getItem('user')).token : ''
  config.headers={
    token: token
  }
  return config;// 撒手放出经过配置的请求
}, function(error) {
  // 发出了错误的请求，拦截
  return Promise.reject(error);
});

// 添加一个响应的拦截器
axios.interceptors.response.use(function(response) {
  //response  ~~ axios请求后的res
  // 响应数据回来后，到达目标组件之前，做点事   res.status   res.data.err == 2
  //校验返回数据，token过期，路由跳转login,传递当前路由地址
  let currentRoute = router.currentRoute.fullPath;//获取当前路由全路径，string
  if(response.data.err===2 && !currentRoute.includes('/login')){
    router.replace({
      path:'/login',
      query:{p:currentRoute}
    })
  }
  
  return response;//奔向组件
}, function(error) {
  // 错误的响应，拦截
  return Promise.reject(error);
});


Vue.prototype.$axios=axios;
window.axios=axios;
export default axios;

集中式管理

bNav/bFoot/bLoading 使用$root管理

路由监听

属性检测 $route

watch:{
	$route:{
    handler(nextValue,PrevValue){},
    immediate:true
  }
}

作业

班长整理: word|excel文档

张三
github地址: 客户端 | 服务端 | ppt
线上api文档 : 服务端在线api文档
阿里云上线地址 : zhangsan.top | 22.33.101.12:3001
录制项目介绍的视频 (制作ppt,使用了哪些技术栈，完成哪些业务，讲解每个页面如何使用，如何实现，开发过程中遇到的坑及如何解决)

项目部署

阿里云部署

vue的项目打包(dist)，拷贝到node项目环境（public)下，再一同拷贝到购买的云服务器上，阿里云的服务器类型选择centos

简洁型部署

买服务器(机器)

  • 选择云服务器ECS，学生特惠地址
  • 支付宝-》注册-》实名认证填写身份证的信息-》ecs
  • 重设密码初始化磁盘：ecs服务器->控制台

使用finalShell连接服务器

  • 安装 finalShell
  • 启动 finalShell-》新建会话-》SSH链接->主机：公网IP-》端口 ： 22-》用户名：root-》密码: 登录密码

給服务器安装环境

//安装node 在 finalShell里面

curl --silent --location https://rpm.nodesource.com/setup_12.x | sudo bash -
yum install -y nodejs
检测: node -v

上传代码

  • vue 打包: npm run build -> dist

    创建空的node环境: express -e 目录

  • dist里面的文件 copy -> node 的 public下面

  • 把node项目 -》 拖拽到 finalSheel/usr/local/创建目录/

  • //让阿里云支持node里面的3000端口
找到控制台->安全组-》配置规则-》添加规则-》端口范围（1/3000）,授权对象(0.0.0.0/0)

  • finalShell 里面-> cd /usr/local/你的目录 -> npm start

    测试: 浏览器输入： http://公网IP:3000

高要求部署

买服务器(机器)

  • 成人特惠地址，认准云服务器ECS/centos
  • 支付宝-》注册-》实名认证填写身份证的信息-》ecs
  • 手动停止服务器 ----> 初始化磁盘 —> 重设密码（登录密码）

使用finalShell连接服务器

  • 安装 finalShell
  • 启动 finalShell-》新建会话-》主机：公网IP-》端口 ： 22-》用户名：root-》密码: 登录密码

給服务器安装环境

curl --silent --location https://rpm.nodesource.com/setup_12.x | sudo bash -
sudo yum install -y nodejs
检测: node -v

上传代码

  • vue 打包: npm run build -> dist
  • 本地测试生产环境（css有时打包后有出错) 可选
npm i serve -g
serve -s dist -l 8080
问题 ： 生产环境下 不能访问 3000
原因  : 生产环境下客户端代理是无效的
解决: copy到服务器端 | ngnix  来完成代理
  • 拷贝 dist -> node的public下面 + 本地测试(启动node服务)
  • 整合好的node 拖到 finalShell 下面(不拽node_modules)
//远程操作
npm i 
npm start

給服务器安装mongodb服务

下载目录可任意选择，本人下载至 download

//center os 8.x 
wget https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-4.0.9.tgz

解压

sudo tar zxvf 下载下来的包名

移动

将解压后的文件夹移动至指定目录

sudo mv 解压后目录/*  /usr/local/mongodb

创建数据文件夹、日志文件和mongo配置文件

sudo mkdir -p  /usr/local/mongodb/data
sudo touch /usr/local/mongodb/mongod.log
sudo touch /usr/local/mongodb/mongodb.conf

sudo chown `whoami` /usr/local/mongodb/data
sudo chown `whoami` /usr/local/mongodb/mongod.log   # 设置权限
sudo chown `whoami` /usr/local/mongodb/mongodb.conf   # 设置权限

修改配置文件

通过参数启动的方法较为麻烦，本文不赘述，仅提供通过配置文件启动的方法。

sudo vim /usr/local/mongodb/mongodb.conf

在配置文件中加入如下代码：

dbpath=/usr/local/mongodb/data
logpath=/usr/local/mongodb/mongod.log #以守护程序的方式启用，即在后台运行
fork = true

保存后退出。

:wq

启动和关闭

进入到安装目录下

cd /usr/local/mongodb/bin

//安全组:27017

启动

//服务端
./mongod -f /usr/local/mongodb/mongodb.conf

//客户端
./mongo

关闭

./mongod -shutdown -dbpath=/usr/local/mongodb/data

配置环境变量

sudo vim ~/.bashrc

在最后添加

export PATH=$PATH:/usr/local/mongodb/bin

退出后记得使用source命令使设置生效

source ~/.bashrc

如此可直接在命令行使用mongo连接mongod服务

本地数据库copy到远程库

//本地出库:需要先导出本地的数据 -> json
mongoexport -h 127.0.0.1 -d 库名 -c 集合名 -o 输出路径/xx.json

//上传: json -> finalShell上传到远端磁盘

//远端入库:  json -> 导入数据库
mongoimport -d 远端库 -c 集合 --file 服务器json路径/xx.json

傻瓜安装

#安装mongodb centos<8.x 傻瓜安装
sudo yum install mongodb-server mongodb -y      

#创建数据库目录和日志目录
mkdir -p /data/mongodb
mkdir -p /data/logs/mongodb

#启动数据库文件存储位置
mongod --fork --dbpath /data/mongodb --logpath /data/logs/mongodb/nodeapp.log

#创建远程数据库（与本地操作一样）可选 
use 库
db.集合.save
问题汇总

关闭finalShell ,服务断了

//安装pm2, nodejs服务器管理器
npm i pm2 -g

//启动服务器:
pm2 start 启动文件.js 

//浏览器访问项目即可
http://公网IP:node端口

//如果想停掉服务器: 
pm2 stop all

pm2使用

可以有多个app？使用一个实例？

分析：app指向不同端口就好了
解决：app指向不同端口，安全组里添加多个端口，pm2 进入到对应服务器位置，逐个启动，如果端口重复，先启用的应用会占用端口

不想要端口可以？

分析：使用http协议默认的80端口,使用https协议默认端口443
解决： 修改本地的端口号指向80,安全组添加80

不使用ip，使用网址?

分析： 是一个IP和域名关联的过程

解决： 必须得用于一个已经备过案的域名(未备案不可使用一级域名和省略端口)，域名购买地址

备案: 特惠专区-》域名与网站->域名新手多重礼（实名，备案15工作日）

域名解析：域名-》解析-》添加记录->记录值(ip)

www：解析后的域名为www.aliyun.com。
@：直接解析主域名 aliyun.com。
二级域名：如：abc.aliyun.com，填写abc。

不备案有什么影响

小程序上线时不能部署,但不影响学习
没有域名不便于宣传，解决：做成二维码
无法使用https安全协议访问

启用https访问

流程：SSL证书->获取https免费证书->配置(node服务器使用https模块响应)

获取https免费证书

下载： 证书通过后->下载 other类型的 xx.key/xx.pem 下载到-> bin

配置node：

var https = require('https');
const fs = require('fs');
const port=443;		
app.set('port', port);

const options = {
  key: fs.readFileSync('./bin/1826016_uncle9.top.key'),//指向key
  cert: fs.readFileSync('./bin/1826016_uncle9.top.pem'),
}; 
var server = https.createServer(options,app);//查看nodejs.cn>https模块|或已完成的node项目

安全组规则：添加443 ，443是https的默认端口

在阿里云配置apache+mysql+php

参考资料

历史记录模式路由，强刷找不到

现象：客户端路由服务找/todos/42时，服务器会找/todos/42的接口（没有这个子服务接口)
解决：服务器路由优先，找不到时，返回vue的前端index.html，交还给客户端路由

// node项目 app.js

app.use(function(err, req, res, next) {
	...
  
  if(req.url.includes('/api')){//webApi接口错误
    res.send({
      err:1,
      msg:'不存在的接口名'
    })
  }else if(req.url.includes('/admin')){//服务端Api接口错误
    res.render('error');
  }else{//交还给客户端判断
    res.sendFile(path.join(__dirname, 'public','template', 'index.html'));
  }

});

也可以通过中间件 connect-history-api-fallback 实现

百度云部署

混合开发时会讲

腾讯云部署

小程序时会讲

事件高级

绑定行间事件

<div v-on:js原生事件名="方法名($event,参数)"></div>
<div @事件名="方法名($event,参数)"></div>

自定义事件

//绑定
vm|组件.$on( '自定义事件名'|['自定义事件名1','自定义事件名2'], 回调(参数) )
<自定义组件  v-on:自定义事件="函数" />
<自定义组件  @自定义事件="函数" />

//销毁
vm|this.$off( '自定义事件名'|['自定义事件名1','自定义事件名2'])

//触发
vm|this.$emit(自定义事件名,参数)

自定义事件名： 使用 kebab-case 的事件名

只有被绑定方才可以触发

自定义的组件 触发原生事件需要native修饰符

事件对象

事件对象可以不传递，需要传递的场景，传参数同时使用事件对象时，如：show($event,参数)

阻止冒泡

ev|e.cacelBubble=true //属性
ev.stopPropagation() //api
<div @click.stop="函数“ /> //修饰符

默认行为

e|ev.preventDefault();   
<div @事件名.prevent="函数" />

修饰符连缀

<div @事件.prevent.stop="..."    排名分先后

修饰符

事件修饰符


     			 .capture 		使用事件捕获模式
					 .self				点到时才触发，不是从内部元素触发的
					 .once  			只会触发一次
					 .passive 		onScroll事件 结束时触发一次，不会频繁触发，移动端使用
					 
						.sync 				接受props被修改，实现表单之外的元素双绑
              //父组件
              <子组件 :title.sync="父数据">

              //子组件
              this.$emit('update:title', newTitle)//通知父去修改title的数据==newTitle

按键修饰符




     			 .left 				上下左右
					 .enter				回车
					 .13  				可以使用键码




     			 .ctrl 				
					 .alt					
					 .shift  				
					 .exact  		严格		@键盘事件.修饰符1.修饰符2.exact    只有1+2才可触发 1+2+3不可以




     			 .left 				
					 .right					
				 	 .middle	鼠标中键

表单修饰符

v-model.number 提取数子 v-model.trim 删除前后空格 v-model.lazy 确认时才修改model数据

动态组件

组件动态化(数据化)，在不同组件之间进行动态切换,component自身不会渲染

注意: 动态组件切换时候，会有挂载和卸载发生

    切换的组件，需要引入+注册

缓存组件

keep-alive 包裹了目标组件，对目标组件缓存，后期不会触发卸载挂载，但会触发activated/deactivated
keep-alive 不给属性时，默认内部出现过得组件，都会被缓存


	..目标组件..

组件钩子:

activated 活动组件 被缓存时起效果
​ deactivated 非活动组件

缓存组件可以包裹哪些组件

自定义普通组件、component系统组件，router-view第三方组件

动画

vue动画通过系统组件 transition 和 transition-group来介入，谁做动画，就用此组件就包着谁，可以包的元素有dom，组件。

vue不渲染只声明逻辑的系统元素 有 template，keep-alive，component。

实现方案

  • css过渡动画transition，无跳变，关注打哪来1，到哪去4
  • css帧动画animation，有跳变，关注来了停哪2，到哪去4
    • animate.css 帧动画库
    • vue-animate
  • js控制dom完成动画
    • 第三方的js动画库,推荐 Velocity
      • Velocity(el,{css属性},{配置})
    • $(‘div’).animate({css属性},{配置属性})
    • move(el,{css属性},{配置属性})

transition

组件属性


	...要做动画的元素...

样式

组件事件

<tansition
	@before-enter="方法"   方法会接收做动画的元素(原生)
  @enter="方法"
  @after-enter="方法"
  @before-leave="方法"
  @leave="方法"
  @after-leave="方法"
>
	...要做动画的元素...
tansition>

velocity

配置

duration: 毫秒 事件
easing: 动画类别 ‘’
Queue
complete:fn()
progress:fn
loop: 1 次 true无限
delay: 毫秒 延时
display:‘none/block’ 动画结束时是否可见

leave(el,done){} 无缝动画 要加done

transition-group

一组元素做动画，transition-group 包着一组元素 ，每个元素要有key ，无key部动画，其他的用法同transition

状态过渡

数据元素本身的动效

  • 数字和运算

  • 颜色的显示

  • 元素的大小和其他的属性

    使用第三方库(TweenMax)来实现切换元素自身的过渡状态,具体查询 官网

异步流程控制

串行有关联

一个请求结束，再发生下一个请求，出现回调地狱，async await 解决

//时间=接口1+接口2
axios({
  url:'/api/home',
}).then(
  res=>axios({
    url:'/api/follow',
    params:{msg:res.data.msg}
  }).then(
    res=>console.log('follow',res.data)
  )
)

axios({
  url:'/api/home',
}).then(
  res=>axios({
    url:'/api/follow',
    params:{msg:res.data.msg}
  })
).then(
  res=>console.log('follow',res.data)
)

let result = await axios({url:'/api/home'})
console.log(1,result);
let result2 = await axios({url:'/api/follow',params:{msg:result.data.msg})
console.log(2,result2);

并行无关联

所有请求一起发生，组件有多次求取，会多次渲染，promise.all /axios.all解决

//时间=用时最多的接口
axios({
  url:'/api/home',
}).then(
  res=>this.home=res.data.data
)

axios({
  url:'/api/follow',
}).then(
  res=>this.follow=res.data.data
)

Promise.all([axios({
  url:'/api/home',
}),axios({
  url:'/api/follow',
})]).then(
  res=>{
    this.home = res[0].data.data
    this.follow = res[1].data.data
  }
) 
//一次性 抓取多次请求的结果
axios.all([
  axios({url:'/api/home'}), 
  axios({url:'/api/follow'})
]).then(axios.spread((home, follow)=>{
   this.home=home.data.data;
   this.follow=follow.data.data;
}))

路由props接参

松耦合 组件便于不依赖路由，可单独测试

路由配置

//布尔: props:true,  route.params->props 
//只传递params
{path:xx,component:xx, props:布尔}

//props:{id:xx,a:xx,b:xx}  route.query -> props，  配置不依赖$route
//只传递query
{path:xx,component:xx, props:对象}

//props:(route)=>({id:route.params.id, ...route.query})  依赖了路由的$route，通过函数介入，并返回给目标组件的props
{path:xx,component:xx, props:函数}

vue-cli详解

官方自带的一款工程化、模块化、自动化开发环境工具（命令行），内部代码（wepack+node）

安装cli

vue -V   //如果是非 3.x.x、4.x
npm uninstall vue-cli -g //卸载

npm install -g @vue/cli || yarn global add @vue/cli  //安装3.x/4.x到全局
npm install -g @vue/cli-init  ||  yarn global add @vue/cli-init //桥接2.x

cli2

创建项目简洁版
vue init webpack-simple 目录|.  
	//webpack-simple | webpack | other  都是vue指向的模板 simple代表简洁模板， webpack是专业模板
cd 目录
npm install
npm run dev  运行
开发....
npm run build 打包

package.json

{
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --port 8001 --open",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  }
}

设置端口，开启浏览器

webpack.config.js

devServer: {
  historyApiFallback: true,
  noInfo: true,
  overlay: true,
  port:8088,//开启端口
  open:false,//开启浏览器
  hot:false//模块热重载
}
创建项目专业模板
vue init webpack 目录|.  
cd 目录
npm run dev  运行
开发....
npm run build 打包

工作区目录解析

build	项目配置
config   项目配置
static   静态资源目录 // cli4 node 的public
test	测试目录

package.json

{
 "scripts": {
    "dev": "webpack-dev-server --port 8001 --open --inline --progress --config build/webpack.dev.conf.js",
  },
}

config/index.js

module.exports = {
  dev: {//开发环境配置
    assetsSubDirectory: 'static',//静态资源位置
    proxyTable: {//客户端代理
      '/api':{//axios访问 /api/xx ==  target + /api/xx
        target:'http://localhost:3001',
        // target:'https://uncle9.top',
        changeOrigin:true,//创建虚拟服务器
        // ws:true,//websocket代理
      },
      '/douban':{// axios 访问 /douban == target + '/douban'
        target:'https://douban.uieee.com',
        changeOrigin:true,
        pathRewrite:{//路径替换
          '^/douban':'',// axios 访问/douban/v2/xx == target +'' + /v2
        }
      }
    },

    host: 'localhost', // 主机名，设置后可以替换process.env.HOST
    port: 8888, // 端口
    autoOpenBrowser: true,//开启浏览器
    errorOverlay: true,//错误遮罩的形式显示到网页上
    useEslint: false,// eslint检查的开启关闭
  },

  build: {//生产环境设置
    // 打包后index.html文件位置
    index: path.resolve(__dirname, '../dist/index.html'),
  }
}

cli4

官网

创建项目
vue create 目录 | . //命令行

vue ui 		//图形UI形式

删除保存的配置: .vuerc C:\Users\Admin

打包后
npm run build
npx vue-cli-service build

index.html 会带有注入的资源和 resource hint
第三方库会被分到一个独立包以便更好的缓存
小于 10kb 的静态资源会被内联在 JavaScript 中
public 中的静态资源会被复制到输出目录中

插值

使用 lodash template 语法插入内容，打包后

Preload

优先加载，是一种 resource hint，用来指定页面加载后很快会被用到的资源，所以在页面加载的过程中，我们希望在浏览器开始主体渲染之前尽早 preload。

vue 自动生成

Prefetch

预加载，用来告诉浏览器在页面加载完成后，利用空闲时间提前获取用户未来可能会访问的内容。Vue CLI 应用会为所有作为 async chunk 生成的 JavaScript 文件 (通过动态 import() 按需 code splitting 的产物) 自动生成 prefetch 提示。

资源安排

相对路径 当前目录为基准，绝对路径 指向public目录，在 JavaScript 被导入或在 template/CSS 中通过相对路径被引用。这类引用会被 webpack 处理。

放置在 public 目录下或通过绝对路径被引用。这类资源将会直接被拷贝，而不会经过 webpack 的处理，url-loader 将小于 10kb 的资源内联，以减少 HTTP 请求的数量

推荐 资源放置到assets，脚本和样式表会被压缩且打包在一起，从而避免额外的网络请求。文件丢失会直接在编译时报错，而不是到了用户端才产生 404 错误。最终生成的文件名包含了内容哈希，因此你不必担心浏览器会缓存它们的老版本

何时使用 public 文件夹，你需要在构建输出中指定一个文件的名字。你有上千个图片，需要动态引用它们的路径。有些库可能和 webpack 不兼容，这时你除了将其用一个独立的

mutations无引用负载

actions内部要传给mutations的负载(payload),不可以是源state的引用，否则有时会出现非响应式情况，如购物车

组件懒加载

让路由配置时所指向的组件，无需一开始就加载到app.js，而是分块到不同的js文件，在路由访问时加载对应组件(js)，减少首屏压力，其原理是利用webpack对代码进行分割，异步调用组件，组件懒加载又叫异步路由、分片(块)打包、code splitting、异步组件

webpack分片打包支持的语法

import(目标组件地址).then(res=>res是加载后的组件)
require([组件1,组件2],response)  response=加载结果 需要传入

vue路由配置

// src/plugins/router.js

- import Home from 'xxx'
+ const home =()=>import(/* webpackChunkName: "groupname-home" */ "../components/home.vue");

//或者

{
  path:'/home',
  component:组件|函数
  component:(r) => { require(['../components/home.vue'],r) }  | home
},

webpackChunkName: “groupname-home” 给块命名 | 同名会拆到一个块，可减少请求次数

在cli2里需要注意

import() 导入 需要安装 babel-plugin-syntax-dynamic-import

配置 babelrc “plugins”: [“syntax-dynamic-import”]

组件内部注册异步组件会按照要求到对应的js里面

组件内部同步注册组件会打包到app.js

vue打包后的片名

//修改片名，需要修改 webpack 配置

//vue-cli1 、 2 
//src/build/webpack.prod.conf.js
  output:
        chunkFilename:'chunks/[name]-[chunkhash:8].js',//build之后的代码更便于识别

//vue-cli3 、 4  ***
//vue.config.js
    output:
        chunkFilename:'chunks/[name]-[chunkhash:8].js',//build之后的代码更便于识别

echarts

安装

npm i echarts --save

引入

import echarts from 'echarts'

使用

//实例化
let instance=echarts.init(dom元素);
//渲染
instance.setOption(数据)
//API: 
instance.showLoading()/hideLoading()/ on('事件名',方法)

资料

第三方地图

这里以百度地图为例，其他第三方地图库学习方法同理，登录官网

  • 注册百度账号
  • 申请成为百度开发者 注册 浏览器端
  • 获取服务密钥（ak mT8XXo4kIGkUfzFeInb0A6GvzS09WtNv）
  • 使用相关服务功能

引入库

//vue的index.html cdn加入

使用

//装地图的id要有，元素要有高
<div id="map">div>

API 事例

组件通讯详解

逐层传递

父子
属性绑定+props接受
// 父 template内
<子 :自定义属性="父数据">

//子 script内
props:['自定义属性']   
props:{自定义属性:{type/default/required/...}}

//子 template内


  {{自定义属性}}

props是只读的，使用场景: 电商 (松耦合)

props命名

props: [‘postTitle’]
​

$parent
 //子模板: 
$parent.父数据

//子js: 
this.$parent.父数据

使用场景: 通用组件（紧耦合)

子父
自定义事件
//父组件 template
<子 @自定义事件="父方法">

//父组件 script
methods:{
	父方法(数据){梳理}
}

//子组件 template


     
//子组件 script
this.$emit('自定义事件',子.数据名)
$children
// 父组件
this.$children[索引].数据|方法

使用场景: 通用组件（紧耦合)

$ref

引用元素（dom，组件<类，函数>）

//父 template
<子 ref="自定义子名称">


  



//父 script
 this.$refs.自定义子名称.数据名
 this.$refs.自定义子名称.方法()

$refs 只会在组件渲染完成之后生效，并且它们不是响应式的,避免在模板或计算属性中访问 $refs

兄弟

兄弟A->自定义事件->中间人(父)->props->兄弟B

路由

params,query,props(boolean,object,function)

越层传递

a t t r s / attrs/ attrs/listeners

假设A>B>C三个组件关系，A传递给C，越过中间的B，A作为祖先一定要传递(属性绑定)，C作为后代一定要接受(props)，中间层所有的组件值负责做二传手的动作,如下

<中间层组件 v-bind="$attrs" v-on="$listeners">

$attrs里面包含了所有上层组件传递过来的属性
$listeners 里面包含了所有下层组件传递过来的事件

$attrs 如果中间层组件没有接受props,给c的是所有props
$listeners 所有上层组件可接受，后代组件都可触发

provide/inject

祖先组件中通过provide来提供变量，然后在子孙组件中通过inject来注入变量

//祖先组件
export default {
  data(){
    return {数据}
  },
  provide: {
    name: '浪里行舟'
    name2: this.data数据
  }
}

//孙组件
export default {
  inject: ['name'],
  mounted () {
    console.log(this.name);  // 浪里行舟
  }
}

使用场景：为高阶插件/组件库提供用例

provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的

集中式管理

订阅发布模式
第三方库

如：pubsub，会在react时讲

公共总线

利用一个空vue实例的事件订阅和发布api实现

//src/main.js
const bus = new Vue()
export default bus;

//组件内部
import bus from '...';
bus.$emit('事件',数据) //发布
bus.$on('事件',(接){处理})	//订阅
bus.$off('事件')	//取消订阅
$root

子组件内部直接找到根实例，访问，操作根data数据

//src/main.js

new Vue({
  data:{key:value}
})

//组件内部
this.$root.key //获取
this.$root.key=value //修改
web存储

通过把数据存储在客户端浏览器本地的行为，cookie，localstroge，session

状态管理

在浏览器下层，应用上层，打造一个全局变量，利用vuex插件管理

数据库

利用本地，或者远端的数据库存储

永久与临时

永久存储

存库 , web/本地存储(localstroge,cookie),后端文件存储(writeFile)

临时存储

状态管理,订阅发布模式,公共总线(vue),$root(vue)

函数式组件

vue支持函数式组件，其意义在于块，特点是无状态，没有实例（没有 this），也没有生命周期，只是个函数，所以渲染开销也低很多，适用场景为展示、UI、纯渲染、自身无数据的组件，另有别名无状态组件、展示型组件、UI组件、哑组件的叫法

定义

第三方组件

使用一些别人开发好的组件、组件库、插件、ui库，来提高项目开发进度，组件库通常是某公司开发并开源出来，获取方式可以通过npm、github查询，或者百度vue组件库，这里有一些推荐1,、推荐2、推荐3

使用方式

//安装
npm i vue-swipe -D  安装

//引入
import './node_modules/vue-swipe/dist/vue-swipe.css'; 引入样式
import { Swipe, SwipeItem } from 'vue-swipe'; 引入组件

Vue.component('swipe', Swipe);    //注册安装到全局
Vue.component('swipe-item', SwipeItem);

//注册到选项components 私有使用   自写样式避免与vue-swiper.css冲突  scoped

DOM组件库类别

pc端、后台管理、客户端

  • element-ui 饿了么 √
  • iview 个人
  • ant design 蚂蚁金服

移动端、客户端

  • mint-ui 饿了么
  • vant 有赞 电商 √
  • vue-material
  • muse-ui
  • VUX
  • cube-ui
  • vonic
  • Vue-Carbon
  • YDUI

通用

  • bootstrap5/4
  • ameizi

elementUI

官网

安装

npm i element-ui -S

整体引入

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

按需引入

npm install babel-plugin-component -D

//修改babel配置 baberc|babel.config.js
//添加:
"plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]


//全局使用  √
import { Button } from 'element-ui';
Vue.component(Button.name, Button); | Vue.use(Button)
import 'element-ui/lib/theme-chalk/button.css';

//局部使用： 只有当前组件可使用
import { Button} from 'element-ui';
import 'element-ui/lib/theme-chalk/button.css';
components:{
  'uc-button':Button,
  [Button.name]:Button,
},

引入自定义主题

和引入默认主题一样，在代码里直接引用「在线主题编辑器」或「命令行工具」生成的主题的 theme/index.css 文件即可。

import '../theme/index.css'
import ElementUI from 'element-ui'
import Vue from 'vue'

Vue.use(ElementUI)

搭配插件按需引入组件主题

如果是搭配 babel-plugin-component 一起使用，只需要修改 .babelrc 的配置，指定 styleLibraryName 路径为自定义主题相对于 .babelrc 的路径，注意要加 ~。

{
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "~theme"
      }
    ]
  ]
}

如果不清楚 babel-plugin-component 是什么，请阅读 快速上手 一节。更多 element-theme 用法请参考项目仓库。

mintUI

官网

安装

npm i mint-ui -S

整体引入

import Mint from 'mint-ui';
import 'mint-ui/lib/style.css'
Vue.use(Mint);

按需引入

//全局使用: npm install babel-plugin-component -D

import { Button } from 'mint-ui';
Vue.component(Button.name, Button);

//babel.config.js配置: 添加
"plugins": [
  [
    "component", 
    {
      "libraryName": "mint-ui",
      "style": true
    }
 ]
]

//组件内部引入,只有当前组件可使用
import { Button } from 'mint-ui';
components:{
  //'bulala':Button,
  [Button.name]:Button,
},

vant

官网

整体引入

import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);

//全局使用:

按需引入

npm i babel-plugin-import -S

// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

//局部使用:
  import { Button, Cell } from 'vant';
  components:{Button,Cell}
  //

//全局使用
  import { Button } from 'vant';
  Vue.use(Button); 
  //

组件样式顺序

  1. 修改主题 *
  2. 使用props 权重**
  3. 添加 class/style *
  4. 审查元素，查询相关样式名，修改编译后的样式 + scoped ***
  5. scope 影响
    css解决： .a >>> .b { /* … */ } 深度选择器
    Sass解决: .a{ /deep/ .b{} }

举例

app组件

Tabbar 标签栏

home组件

Search 搜索/轮播/Tab 标签页

category组件

Tab 标签页

follow组件

pull-refresh 下拉刷新 / 单元格 cell

column组件

Popup 弹出层

detail组件

NavBar 导航栏/栅格布局

ShopCart组件

NavBar 导航栏/SwipeCell 滑动单元格>Card 卡片/SubmitBar 提交订单栏/stepper步进器

user组件

flex布局/van-tag标记/Panel 面板/cell-group 单元格组/ icon图标

login组件

NavBar 导航栏/field输入框

reg组件

van-uploader 文件上传

内容分发

组件调用时，给其内部插入内容，如:<组件>内容，又叫：插槽，投射，插入到组件内容的可以是dom或组件

<组件>123
<组件>
123

<组件><组件>

<组件名><元素 slot="槽名">...
<组件名>