不爱吃菜的蔡菜

Vue | 使用Vue脚手架【脚手架的基本使用+ref属性+props属性+mixin混入+插件scoped样式+TodoList+浏览器本地存储+组件的自定义事件+全局事件总线+过度与动画】

文章目录

脚手架的基本使用
- 初始化脚手架
- 分析脚手架结构
- render函数
- 修改默认配置
ref属性
props属性
mixin混入
插件
scoped样式
Todo-list案例
- 组件化编码流程(通用）
- props适用于
- 注意点
浏览器本地存储 webStorage
组件的自定义事件
全局事件总线（GlobalEventBus）
消息订阅与发布（pubsub）
nextTick
过度与动画
- 动画效果
- 过度效果
- 总结
- 集成第三方动画

脚手架的基本使用

初始化脚手架

说明

Vue 脚手架（CLI）是 Vue 官方提供的标准化开发工具（开发平台），.vue文件需要脚手架帮忙转换翻译浏览器才认识
最新版本 5.x，用最新版本
文档：https://cli.vuejs.org/zh/

具体步骤
解决npm warn config global --global, --local are deprecated. use --location=global instead.
第一步（仅第一次执行）：全局安装@vue/cli

npm install --location=global @vue/cli

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

vue create xxxx

然后选择

第三步：启动项目（对项目进行编译初始化）

npm run serve

按两个ctrl+c停掉这个

备注

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

分析脚手架结构

执行顺序：
在vscode终端（ctrl+~）执行了npm run serve -> 来到maxin.js引入App.vue -> 来到App.vue 引入组件School ->maxin.js里面创建实例对象将App放入容器里index.html

里面组件的名字要用驼峰法！！！

main.js 代码

// 该文件是整个项目的入口文件

// 引入Vue
import Vue from 'vue'
// 引入App组件，他是所有组件的父组件
import App from './App.vue'

// 关闭Vue的生产提示
Vue.config.productionTip = false

// 创建vue实例对象 ---vm
new Vue({
  el:'#app',
  // 完成了这个功能：将App组件放入容器中
  render: h => h(App),
})

index.html 代码

<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <!-- 针对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>
</head>

<body>
  <!-- 如果浏览器不支持JS，noscript中的元素就会被渲染 -->
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
        Please enable it to continue.</strong>
  </noscript>

  <!-- 容器 -->
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>

</html>

render函数

关于不同版本的 Vue

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

render是个函数，vue帮你调用，调用的时候传递一个createElement函数，这个函数能创建具体的元素

new Vue({
  el:'#app',
  // 完成了这个功能：将App组件放入容器中
  render: h => h(App),
})

render完整写法：

render(createElement){  
    return createElement('h1','你好啊')
  },

使用箭头函数简写：

  render:createElement=> createElement(App),

render参数方法说明

内置创建元素的方法，第一个参数是创建的内置元素，第二个参数是元素内容

为什么不引入完整的Vue？

完整Vue包含了核心功能+模板解析器，但最终我们项目打包的时候，webpack会帮我们解析模板，为了减轻容量大小，所以选择了去掉模板解析器的Vue版本

为什么组件里的模板就可以解析呢？

脚手架里提供了模板编译器的库，专门解析标签里面的模板组件，完美取代了Vue的编译器

修改默认配置

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

脚手架的哪些默认配置不能改？

修改脚手架的默认配置

创建一个和package.json 同级的vue.config.js文件

Vue.config.xxx 与 vue.config.js 有啥区别？
前者是给vue构造函数身上的某个属性配置属性，后者是配置脚手架工作模式的

在官网找到响应的配置代码，复制到 vue.config.js 里面，修改相应的属性就可以了

关闭语法检查

在 vue.config.js 里面关闭语法检查

module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:false // 关闭语法检查
})

ref属性

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

给哪个DOM元素添加了ref，$refs就会收集这些DOM元素

App.vue 代码：

<template>
  <div>
    <h1 v-text="msg" ref="title"></h1>
    <button @click="showDOM" ref="btn">点我输出上方的DOM元素</button>
    <SchoolName ref="sch"/>
  </div>
</template>

<script>
    // 引入SchoolName组件
    import SchoolName from './components/SchoolName.vue'
    export default {
        name:'App',
        components:{SchoolName},
        data(){
            return {
                msg:'2022-7-17'
            }
        },
        methods:{
            showDOM(){
                console.log(this); // 组件中的this均指向VueComponent实例对象
                console.log(this.$refs.title); // 真实DOM元素
                console.log(this.$refs);
                console.log(this.$refs.sch); // 给组件加的话，会获得SchoolName组件实例对象(vc)

                // 在原生JS里面这样获取DOM元素
                // console.log(document.querySelector('#title'));
            }
        }
    }
</script>

<style>

</style>

props属性

功能：让组件接收外部传过来的数据

传递数据：
或<Demo :age="xxx"/>（前者"“中是字符串，后者”"中是表达式）！注意：这里StudentName.vue没有在组件里面传入数据

v-bind 得到的是表达式，里面可以进行运算

接收数据：
第一种方式（只接收）：props:['name']
第二种方式（限制类型）：props:{name:String}

        // 接收的同时对数据进行类型限制
        props:{ 
            name:String,
            age:Number,
            sex:String
        }

第三种方式（限制类型、限制必要性、指定默认值）：

        // 接收的同时对 数据进行类型限制+ 默认值的指定+ 必要性的限制
        props:{
            name:{
                type:String, // name的类型是字符串
                required:true, // name是必要 传参的
            },
            age:{
                type:Number,
                default:99, // 不传参的话默认值是 99
            },
            sex:{
                type:String, // name的类型是字符串
                required:true, // name是必要的
            }
        }
    }

备注：

props与data是有区别的，props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告
若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。

mixin混入

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

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

2.第二步使用混入：
全局混入：Vue.mixin(xxx)
局部混入：mixins:['xxx']

注意

插件

功能：用于增强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()
组件里直接使用插件

scoped样式

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

Vue | 使用Vue脚手架 【脚手架的基本使用+ref属性+props属性+mixin混入+插件scoped样式+TodoList+浏览器本地存储+组件的自定义事件+全局事件总线+过度与动画】