使用 Vue 脚手架

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第15天
一、初始化脚手架
1.具体步骤
第一步（仅第一次执行）：全局安装@vue/cli。
npm install -g @vue/cli
第二步：切换到你要创建项目的目录，然后使用命令创建项目
vue create xxxx
第三步：启动项目
npm run serve
备注：
1）如出现下载缓慢请配置 npm 淘宝镜像：npm config set registry
registry.npm.taobao.org
2）Vue 脚手架隐藏了所有 webpack 相关的配置，若想查看具体的 webpakc 配置，
请执行：vue inspect > output.js

2.模板项目的结构
├── 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
1.ref
1）作用：用于给节点打标识
2）读取方式：this.$refs.xxxxxx

2.props
1）作用：用于父组件给子组件传递数据
2）读取方式一: 只指定名称
props: ['name', 'age', 'setName']
3）读取方式二: 指定名称和类型
props: {
name: String,
age: Number,
setNmae: Function
}
4）读取方式三: 指定名称/类型/必要性/默认值
props: {
name: {type: String, required: true, default:xxx},
}

三、混入
1.Vue 插件是一个包含 install 方法的对象
2.通过 install 方法给 Vue 或 Vue 实例添加方法, 定义全局指令等

四、插件

1. Vue 插件是一个包含 install 方法的对象
   
2. 通过 install 方法给 Vue 或 Vue 实例添加方法, 定义全局指令等
   

五、全局事件总线

1. Vue 原型对象上包含事件处理的方法
   

1. $on(eventName, listener): 绑定自定义事件监听
   
2. $emit(eventName, data): 分发自定义事件
   
3. $off(eventName): 解绑自定义事件监听
   
4. $once(eventName, listener): 绑定事件监听, 但只能处理一次
   

2. 所有组件实例对象的原型对象的原型对象就是 Vue 的原型对象
   

1. 所有组件对象都能看到 Vue 原型对象上的属性和方法
   
2. Vue.prototype.$bus = new Vue(), 所有的组件对象都能看到$bus 这个属性
   

3. 全局事件总线
   

1. 包含事件处理相关方法的对象(只有一个)
   
2. 所有的组件都可以得到