Vue脚手架

一、脚手架文件结构
- 1.1 创建脚手架
二、关于不同版本的Vue
三、vue.config.js配置文件
四、ref属性
五、props配置项
六、mixin(混入)
七、插件
八、scoped样式
九、小结
十、webStorage
十一、组件的自定义事件
十二、全局事件总线（GlobalEventBus）
十三、nextTick
十四、Vue封装的过度与动画

一、脚手架文件结构

my-app/
  |- node_modules/  # 依赖库
  |- public/        # 公共资源
  |   |- index.html # 应用程序的主 HTML 文件
  |   |- favicon.ico # 网站图标
  |- src/           # 源代码
  |   |- assets/    # 静态资源（图片、样式表等）
  |   |- components/  # 组件
  |   |- views/      # 页面级别组件
  |   |- App.vue     # 根 Vue 组件
  |   |- main.js     # 主 JavaScript 文件
  |- tests/         # 测试文件
  |- .gitignore     # Git 忽略配置文件
  |- babel.config.js  # Babel 编译器配置文件
  |- package.json   # 项目元数据和依赖信息
  |- README.md      # 项目文档

上述文件结构是一个典型的 Vue.js 项目的文件结构示例，其中包含了以下重要目录和文件：

node_modules/：存放所有的依赖库，可以通过包管理工具（如 npm 或 yarn）进行安装。
public/：存放应用程序的公共资源，如 HTML 文件和一些静态资源（如图标、全局 CSS 文件等）。
src/：存放应用程序的源代码，是开发者主要工作的目录。
- assets/：存放静态资源文件，如图像、样式表等。
- components/：存放 Vue 组件，用于构建应用程序的用户界面。
- views/：存放页面级别的 Vue 组件，用于组织和布局多个相关组件。
- App.vue：根 Vue 组件，定义了整个应用程序的外观和行为。
- main.js：应用程序的入口文件，引入 Vue 库并创建 Vue 实例。
tests/：存放测试文件，用于对应用程序进行单元或集成测试。
.gitignore：Git 版本控制系统的忽略配置文件，指定哪些文件或目录不需要纳入版本管理。
babel.config.js：Babel 编译器的配置文件，用于将 ES6+ 代码转换为向后兼容的 JavaScript 代码。
package.json：项目的元数据和依赖信息，记录了项目名称、版本号、作者、脚本命令等信息，以及所依赖的其他包和版本。
README.md：项目的文档文件，通常用于描述项目的特点、使用说明和贡献指南等。

这是一个常见的示例，实际的脚手架文件结构可能因具体的脚手架工具和项目需求而有所差异。

1.1 创建脚手架

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

npm install -g @vue/cli
第二步：切换到你要创建项目的目录，然后使用命令创建项目

vue create xxx
第三步：启动项目

npm run serv

备注：
如出现下载缓慢请配置 npm 淘宝镜像：npm config set registry https://registry.npm.taobao.org

二、关于不同版本的Vue

vue.js与vue.runtime.xxx.js的区别：
1. vue.js是完整版的Vue，包含：核心功能 + 模板解析器。
2. vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。
因为vue.runtime.xxx.js没有模板解析器，所以不能使用template这个配置项，需要使用render函数接收到的createElement函数去指定具体内容。

三、vue.config.js配置文件

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

四、ref属性

被用来给元素或子组件注册引用信息（id的替代者）
应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
使用方式：
1. 打标识：.....或
2. 获取：this.$refs.xxx

School.vue组件

<template>
  <div class="demo">
    <h2>学校名称：{{name}}h2>
    <h2>学校地址：{{address}}h2>
  div>
template>

<script>
export default {
    name:"School",
    data() {
        return {
            name:"大学",
            address:"四川"
        }
    },
}
script>
<style>
    .demo{
        background-color: gray;
    }
style>

App.vue

<template>
  <div>
    <h1 ref="title">hello,{{name}}h1>
    <button ref="btn" @click="showDom">点我输出上方的DOM元素button>
    <School ref="sch">School>
  div>
template>

<script>
import School from './components/School.vue'
export default {
    name:"App",
    components:{School},
    data() {
        return {
            name:"蓝朽",
        }
    },
    methods: {
        showDom(){
            console.log(this.$refs.title);//真实dom元素
            console.log(this.$refs.btn);//真实dom元素
            console.log(this.$refs.sch);//School的vc实例对象
        }
    },
}
script>

main.js

import Vue from "vue"
import App from "./App.vue"
Vue.config.productionTip=false;
new Vue({
    el:"#app",
    render:h=>h(App)
})

npm run serve 运行

这里示范了一下简单使用，在脚手架中使用的都是单文件组件。

五、props配置项

功能：让组件接收外部传过来的数据
传递数据：
接收数据：
1. 第一种方式（只接收）：props:[‘name’]
2. 第二种方式（限制类型）：props:{name:String}
3. 第三种方式（限制类型、限制必要性、指定默认值）：
```
props:{
	name:{
	type:String, //类型
	required:true, //必要性
	default:'老王' //默认值
	}
}
```
备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。

<template>
  <div>
    <h1>hello，{{msg}}h1>
    <h2>学生姓名：{{name}}h2>
    <h2>学生性别：{{sex}}h2>
    <h2>学生年龄：{{MyAge}}h2>
    <button @click="MyAge++">点我年龄自增button>
  div>
template>

<script>
export default {
    name:"Student",
    data() {
      return{
        msg:"蓝朽",
        MyAge:this.age
      }
    },
    //简单声明接收
    // props:['name','sex','age']
    //接收的同时对类型进行限制，对不上控制台会报错
    // props:{
    //   name:String,
    //   age:Number,
    //   sex:String
    // }
    //接收的同时对类型进行限制+必要值的设置+默认值设置
    props:{
      name:{
        type:String, //name的类型
        required:true //name属性必须传
      },
      age:{
        type:Number,
        default:90//默认值90
      },
      sex:{
        type:String,
        required:true
      }
    }
}
script>

通过传值

六、mixin(混入)

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

使用方式：
第一步定义混合：

{
data(){....},
methods:{....}
....
}

第二步使用混入：

 全局混入：Vue.mixin(xxx)

 局部混入：mixins:['xxx']

定义mixin.js混合

import Vue from 'vue'
export const hunhe1 = {
    methods: {
        showName(){
          alert(this.name);
        }
    }
}
export const hunhe2 = {
    data(){
        return {
            x:100,
            y:200
        }
    }
}

main.js全局混入

import Vue from "vue"
import App from "./App.vue"
import { hunhe1,hunhe2 } from "./mixin";
Vue.config.productionTip=false;
Vue.mixin(hunhe1,hunhe2)
new Vue({
    el:"#app",
    render:h=>h(App)
})

Student组件局部混入

<template>
  <div>
    <h2 @click="showName()">学生姓名：{{name}}h2>
    <h2>学生性别：{{sex}}h2>
  div>
template>
<script>
import { hunhe1, hunhe2 } from '@/mixin';
export default {
    name:"Student",
    data() {
      return{
        name:"蓝朽",
        sex:"男"
      }
    },
    mixins:[hunhe1,hunhe2]
}
script>

七、插件

功能：用于增强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()

定义插件

export default{
    install(Vue,x,y,z){
        console.log(Vue,x,y,z)
        //全局过滤器
        Vue.filter('mySlice',function(value) {
            return value.slice(0,4);
        })
    }
}

使用插件

import Vue from "vue"
import App from "./App.vue"
//应用插件
import plugins from './plugins'
Vue.use(plugins,1,2,3)
Vue.config.productionTip=false;
new Vue({
    el:"#app",
    render:h=>h(App)
})

School组件

<template>
  <div>
    <h2>学校名称：{{name | mySlice}}h2>
    <h2>学校地址：{{address}}h2>
  div>
template>

<script>
export default {
    name:"Student",
    data() {
      return{
        name:"b站大学hello world",
        address:"四川"
      }
    }
}
script>

八、scoped样式

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