个人笔记|给自己看的使用Vue脚手架

2022-03-05 本文已影响0人图骨南

初始化脚手架

看同文集下搭建vue开发环境

脚手架结构

main.js

整个项目的入口文件

//引入Vue
import Vue from 'vue'
//引入App组件 即所有组件的父组件
import App from './App'
//引入路由
import router from './router'
//关闭Vue的生产提示
Vue.config.productionTip = false
//创建Vue实例对象--vm
/* eslint-disable no-new */
new Vue({
    //相当于尾部的（看下面↓）
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})//.$mount('app')

index.html

<!--针对IE浏览器的一个特殊配置，含义是让IE浏览器以最高的渲染级别渲染页面--><meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--开启移动端的理想视口-->
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!--配置页签图标-->
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<!--配置网页标题-->
<title><%= htmlwebpackPlugin.options.title %></title>

render函数

用于不能使用template配置项的情况

vue.js 与vue.runtime.xxx.js的区别
1. vue.js是完整版的Vue,包含:核心功能+模板解析器。
2. vue.runtime.xxx.js是运行版的Vue，只包含核心功能，没有模板解析器。
vue.runtime.xxx.js没有模板解析器

不能使用template配置项

需要使用render函数接收到的createElement函数去指定具体内容。

修改默认配置

执行vue inspect > output.js看Vue脚手架的默认配置。
使用vue.config.js可以对脚手架进行个性化定制，详见: https://cli.vuejs.org/zh

ref属性与props配置

ref属性

被用来给元素或子组件注册引用信息（id的替代者)
应用在html标签上获取的是真实DOM元素

应用在组件标签上是组件实例对象(vc)
使用方式
- 打标识:
  
  <h1 ref="xxx">.....</h1>或<School ref="xxx"></School>
- 获取:
  
  this.$refs.xxx

props配置

功能

让组件接收外部传过来的数据
1. 传递数据:
  <Demo name="xxx"/>
2. 接收数据:
  - 第一种方式（只接收）
    
    props: [ 'name ']
  - 第二种方式（限制类型)
```
props:{
name :Number
}
```
  - 第三种方式（限制类型、限制必要性、指定默认值)
```
props:{
name:{
type:String，//类型
required:true，//必要性
default:'老王’ //默认值
}
}
```
备注:

props是只读的

Vue底层会监测对props的修改，如果进行了修改,就会发出警告

若业务需求确实需要修改，那么可复制props的内容到data中一份，然后去修改data中的数据。

mixin混入

混合 = 复用配置

组件里如果有很多相同的配置，可以把相同的配置拎出来单独放，组件想要的时候直接引用就好以达到高复用率

功能

可以把多个组件共用的配置提取成一个混入对象
使用方式
1. 定义混合
  
  例如
```
{
    data(){...},
    methods:{....}
    ....
}
```
2. 使用混入
  - 全局混入
    
    Vue.mixin(xxx)
    
    全局混入的话要写在main.js文件里，先import，然后调mixin，再然后所有组件就都有这东西了
  - 局部混入
    
    mixins: ['xxx']
    
    局部混入的话就哪个组件用哪个组件import，然后在vc里和data同级写一下mixins

插件 - plugins

本质上就是个对象但是硬性要求必须包含一个install方法

语法

Vue.use(插件名)

记得先引入嗷！
功能

用于增强Vue
本质

包含install方法的一个对象

install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据

定义插件:

对象.install = function (Vue,options){
    //1.添加全局过滤器
    vue.filter(....)
    //2.添加全局指令
    Vue.directive(....)
    //3．配置全局混入(合)
    Vue.mixin(.. ..)
    //4。添加实例方法
    Vue.prototype.$myMethod = function () {...}
    Vue.prototype.$myProperty = xxxx
                                          }

scoped样式

如果不同组件里有相同类名 style可能会出现冲突

~~两条裙子有一模一样的商品名但一条是短裙一条是连衣裙~~

但是不要紧！我们js是自上而下执行代码的！就算类名相同style不同哪个最后执行就用哪个！

~~那要选哪条呢？哪条最后出现就选哪条~~

但是template里有标签 script里有引入那执行顺序要按谁的来捏？Vue脚手架在解析vue文件的时候不看template里先用谁而是看谁最新被引入

~~可是有在货架上摆放的先后顺序有拿衣服的先后顺序这要怎么算捏？当然是看手里最后拿到的是哪条，而不是看货架~~

~~很时髦嗷这个vue~~

作用

让样式在局部生效，防止冲突。
写法

<style scoped>

TodoMVC案例

组件化编码流程（通用）

实现静态组件

抽取组件，使用组件实现静态页面效果

先不用考虑交互
展示动态数据

2.1 数据的类型、名称

2.2 数据在组件中保存
交互 -- 从绑定事件监听开始

实现静态组件

拆分

组件要按照功能点拆分
- 添加事项区(header/add)
- 待办列表区(todos/list)
  - 待办事项(item)
- 汇总区(footer)
命名

不要与html元素冲突

实现动态组件

考虑好数据的存放位置数据是一个组件在用还是一些组件在用

单个组件使用

放在组件自身
多个组件使用

放在组件共同的父组件上

实现交互

从绑定事件开始

props适用范围

父组件 ==》子组件通信
子组件 ==》父组件通信
- 前提：父组件先给子组件一个函数

注意事项

使用v-model

v-model绑定的值不能是props所传值

props值不能修改

props传值

props传的若是对象类型的值，修改对象中的属性时Vue不会报错

但不推荐这样做

组件的自定义事件

一种组件间通信的方式

适用于: 子组件==>父组件
使用场景

A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件(事件的回调在A中)。
绑定自定义事件:
1. 第一种方式，在父组件中: <Demo @zidingy="test"/> 或 <Demo v-on:zidingy="test"/>
2. 第二种方式，在父组件中:
```
<Demo ref="demo" />
......
mounted(){
this.$refs.xxx.$on( 'zidingy ' ,this.test)
}
```
3. 若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法。
触发自定义事件

this.$emit( 'zidingy ',数据)
解绑自定义事件

this.$off( 'zidingy ')
组件上也可以绑定原生DOM事件，需要使用native修饰符。
注意:通过this.$refs .xx. son('zidingy',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题!

全局事件总线

可实现任意组件间通信

组件通信示意图

X ->外卖员，A,B -> 顾客，demo,test ->订单, D -> 商家，数据 -> 外卖

安装全局事件总线:

new Vue({
    ......
    beforeCreate() {
        Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
},
        ......
}

使用事件总线:

接收数据

A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。
```
methods(){
    demo(data){......}
}
    ......
mounted() {
        this.$bus.$on( 'xxxx',this.demo)
    }
```
提供数据

this.$bus.$emit( 'xxxx',数据)

解绑事件

最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。

消息订阅与发布

—种组件间通信的方式，适用于任意组件间通信。

示例：报纸的订阅与发布

订阅报纸：住址
邮递员派送报纸：报纸

消息的订阅与发布

订阅消息：消息名
发布消息：消息内容

使用步骤

安装pubsub

npm i pubsub-js
引入

import ubsub from 'pubsub-js '
接收数据

A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。

methods(){
    demo(data){......}
              }
    ......
mounted() {
        this.pid = pubsub.subscribe( 'xxx ' ,this.demo)// 订阅消息
    }

提供数据

pubsub.publish( 'xxx',数据)
最好在beforeDestroy钩子中，用PubSub.unsubscribe(pid)去取消订阅。

nextTick

语法

this.$nextTick(回调函数)
作用

在下一次DOM更新结束后执行其指定的回调。
什么时候用:当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。

过渡与动画

vue动画的理解

操作css的transition或animation
vue会给目标元素添加/移除特定的class
过渡的相关类名

vue封装的过渡与动画

动画效果

作用

在插入、更新或移除DOM元素时，在合适的时候给元素添加样式类名。
图示
vue动画图示
写法
- 样式
  - 元素进入的样式:
    1. v-enter:进入的起点
    2. v-enter-active:进入过程中
    3. v-enter-to:进入的终点
  - 元素离开的样式
    1. v-leave:离开的起点
    2. v-leave-active:离开过程中
    3. v-leave-to:离开的终点

动画效果语法

<template>
<transition
 name="anim"
 appear
 >
    <!--想要添加动画效果的内容-->
</transition>
</template>

<style scoped>
.anim-enter-active{
    animation: aniName 2s;
}
.anim-leave-active{
    animation: aniname 1.5s reverse;
}
@keyframes aniName {
    from{
        transform: /*起始位置*/
    }
    to{
        transform: /*终止位置*/
    }
}
</sytle>

过渡效果

过渡效果语法

HTML:

使用<transition>包裹要过渡的元素，并配置name属性

<transition
 name="anim"
 appear
 >
    <!--想要添加动画效果的内容-->
</transition>

CSS:

.anim-enter{
    transform: /*起始起点*/
}
.anim-enter-active{
    trasition: 0.5s linear /*或其他想实现的样式*/
}
.anim-enter-to{
    transform: /*起始终点*/
}
.anim-leave{
    transform: /*终止起点*/
}
.anim-leave-active{
    trasition: 0.5s linear /*或其他想实现的样式*/
}
.anim-leave-to{
    transform: /*终止终点*/
}

若起始点与终止点相同（从哪进就从哪出），过程样式也相同，可用逗号合并起来写

.anim-enter,.anim-leave-to{
    transform: 
}
.anim-enter-active,.anim-leave-active{
    trasition: 0.5s linear /*或其他想实现的样式*/
}
.anim-enter-to,.anim-leave{
    transform: 
}

多个元素过渡

在过渡效果中

<transition>中只能包含一个元素

<transition-group>中可以包含多个元素，但<transition-group>中的每个元素都要有一个key值

集成第三方动画

可以在JS动画网站中搜索Animate.css库，去到主页，在需要加入动画效果的组件中安装该库

npm install animate.css

然后引入该库

import 'animate.css'

根据网站指引配置动画

配置代理

安装axios

npm i axios

引入axios

例中希望请求5000端口保存的students的数据

<script>
    import axios from'axios'
    export default {
        name: 'App',
        methods: {
            get Students () {
                axios.get('http://localhost:5000').then(
                    response => {
                        console.log('',response.data)
                    },
                    error => {
                       console.log('',error.message)
                    }
                )
            }
        }
    }
</script>

服务器运行端口为8080，运行后报错，出现跨域问题

解决跨域

方法

cors
jsonp
配置代理服务器
1. nginx
2. vue-cli

vue-cli配置代理服务器

方法一

新建vue.config.js文件，添加如下配置

module.exports = {
pages: {
    index: {
        // 入口
        entry: 'src/main.js',
    },
},
    lintOnSave: false, // 关闭语法检查
    // 开启代理服务器
    devServer: {
        proxy: 'http://localhost:5000' // 需要对接的服务器
    }
}

此时可以成功获取到数据

不过之前的getlocalhost:5000代码应改为http://localhost:8080/students

优点：配置简单，请求资源时直接发给前端
缺点：

不好控制，若服务器所在端口有文件与请求的端口文件重名，则会返回所在端口的文件；

只能配置单个代理服务器
工作方式:

若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器（优先匹配前端资源)

方法二

在vue.config.js文件中配置具体代理规则

devServer: {
    proxy:{
        '/api': { // /api:请求前缀，写在端口号之后，匹配所有请求前缀是/api的代理路径
            target: '<url>', // 代理目标的基础路径，只要请求前缀是api，代理就将其转发给target中的服务器
            pathRewrite: {'^/api': ''} // 重写路径，使用正则表达式匹配所有以/api开头的路径，然后将/api转换为空字符串
            ws: true, // ws:用于支持websocket，vue-cli中默认为true
            changeOrigin: true // 用于控制请求头中的host值，vue-cli中默认为true，react脚手架中默认为false
        },
        '/foo': {
            target: '<other_url'
        }
    }
}

优点：可配置多个代理，可灵活控制请求是否走代理
缺点：配置略繁琐，请求资源时必须加前缀