Vue脚手架

目录

一、初始化脚手架

1.1 概念

1.2 使用步骤

1.3 模板项目的结构

二、ref、props、scoped、nextTick

2.1 ref 属性

2.2 props配置项

2.3 scoped样式

2.4 nextTick

三、mixin(混入) 与 插件

3.1 mixin(混入)

3.2 插件功能

四、本地存储webStorage

五、组件的自定义事件

六、全局事件总线

七、消息订阅与发布（pubsub）

---

一、初始化脚手架

1.1 概念

Vue脚手架是Vue官方提供的标准化开发工具（平台）。

文档: https://cli.vuejs.org/zh/

1.2 使用步骤

第一步（仅第一次执行）：全局安装@vue/cli

• npm install -g @vue/cli

第二步：切换到要创建的项目，然后使用命令创建项目

• cd 切换到的目录名字（例如：cd desktop[切换到桌面]）
• vue create 项目名字

第三步：启动项目

• npm run serve

注意事项

• 如出现下载缓慢请配置 npm 淘宝镜像   npm config set registry https://registry.npm.taobao.org
• Vue 脚手架隐藏了所有 webpack 相关的配置，若想查看具体的 webpakc 配置   vue inspect > output.js

1.3 模板项目的结构

├── node_modules 
├── public
│   ├── favicon.ico: 页签图标
│   └── index.html: 主页面
├── src
│   ├── assets: 存放静态资源
│   │   └── logo.png
│   │── component: 存放组件
│   │   └── HelloWorld.vue
│   │── App.vue: 汇总所有组件
│   │── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件 
├── README.md: 应用描述文件
├── package-lock.json：包版本控制文件

二、ref、props、scoped、nextTick

2.1 ref 属性

作用

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

使用方法

• 打标识：<h1 ref="xxx">.....</h1> 或   <School ref="xxx"></School>
• 获取：this.$refs.xxx

2.2 props配置项

读取方式一: 只指定名称

props: ['name', 'age', 'setName']

读取方式二: 指定名称和类型

props:{  name:String,  age:Number, sex:String } 

读取方式三: 指定名称/类型/必要性/默认值

 props:{
        name:{
            type:String,     //名字类型
            required:true    //name是必要的
            default:XXX    //默认值
        }
    }

2.3 scoped样式

作用

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

写法

• <style scoped>  </style>

2.4 nextTick

语法

• this.$nextTick(回调函数)

作用

• 在下一次 DOM 更新结束后执行其指定的回调

什么时候用

• 当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行

三、mixin(混入) 与 插件

3.1 mixin(混入)

功能

• 可以把多个组件共用的配置提取成一个混入对象

方法

• 定义混合  { data(){....},  methods:{....}   ....    }
• 引用混合   import {共用配置名字1,共用配置名字2} from '写共用配置文件的名字'
• 使用混入  全局混入：Vue.mixin(xxx) / 局部混入：mixins:['xxx']

3.2 插件功能

• 用于增强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
}

使用插件 

• Vue.use(写插件的js文件名)

四、本地存储webStorage

存储内容大小一般支持5MB左右（不同浏览器可能还不一样）

浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。

相关API：

1. xxxxxStorage.setItem('key', 'value');  该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。

2. xxxxxStorage.getItem('person');

   该方法接受一个键名作为参数，返回键名对应的值。

3. xxxxxStorage.removeItem('key');

   该方法接受一个键名作为参数，并把该键名从存储中删除。

4. xxxxxStorage.clear()

   该方法会清空存储中的所有数据。

备注：

1. SessionStorage存储的内容会随着浏览器窗口关闭而消失。

2. LocalStorage存储的内容，需要手动清除才会消失。

3. xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到，那么getItem的返回值是null。

4. JSON.parse(null)的结果依然是null。

五、组件的自定义事件

概念

• 一种组件间通信的方式，适用于：子组件 ===> 父组件

绑定自定义事件（在父组件中）

• 第一种方式 

<Demo @atguigu="test"/> 或 <Demo v-on:atguigu="test"/>

• 第二种方式

<Demo ref="demo"/>
......
mounted(){
   this.$refs.xxx.$on('atguigu',this.test)
}

若想让自定义事件只能触发一次，可以使用 once 修饰符，或 $once 方法。

触发自定义事件   this.$emit('atguigu',数据)

解绑自定义事件   this.$off('atguigu')

组件上也可以绑定原生DOM事件，需要使用 native 修饰符。

六、全局事件总线

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

安装全局事件总线

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）

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

使用步骤

• 安装pubsub：npm i pubsub-js
• 引入: import pubsub from 'pubsub-js'
• 接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。

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

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