Vue 脚手架学习

1.使用 Vue 脚手架

1.1 初始化脚手架

1.1.1 具体步骤

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

npm install -g @vue/cli

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

vue create xxxx

第三步：启动项目

npm run serve

初始化后应该配置的东西：

1、将下面代码复制进vue.config.js文件中，可以关闭脚手架的语法检查。。

javascript">module.exports={lintOnSave:false;//关闭语法检查
}

2、在main.js文件中关闭生产提示

javascript">//关闭vue的生产提示
Vue.config.productionTip = false

备注：

1.如出现下载缓慢请配置 npm 淘宝镜像

npm config set registry http://registry.npm.taobao.org

2. Vue 脚手架隐藏了所有 webpack 相关的配置，若想查看具体的 webpakc 配置，

请执行下面代码，只提供读，不提供改。。。

vue inspect > output.js

使用vue.config.js可以对脚手架进行个性化定制，详情见：https://cli.vuejs.org/zh，可以提供改。

1.1.2 脚手架文件结构

创建脚手架的默认结构：

1.1.3 在Vue配置对象中配置template属性，会报错的原因

如果在Vue实例不配置render函数情况下，执行下面代码会报错

报错信息如下：

解决方案：要么将模板预编译为呈现函数（render函数），要么使用编译器附带的模板解析器。

关于不同版本的Vue：

1.vue.js与vue.runtime.xxx.js的区别：

(1).vue.js是完整版的Vue，包含：核心功能+模板解析器。
(2).vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。

2.因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体内容。

1.2 ref 和 props

1.2.1 ref 标签属性

定义：

ref 是用于在 Vue 组件中获取 DOM 元素或子组件实例的引用的机制。它可以用来直接访问子组件的方法和属性，或获取原生 DOM 元素的引用。

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

用法示例：

父组件：

javascript"><template><ChildComponent ref="child" /><button @click="callChildMethod">Call Child Method</button>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent},methods: {callChildMethod() {this.$refs.child.childMethod(); // 调用子组件的方法}}
};
</script>

子组件

javascript"><template><div><h1>Child Component</h1></div>
</template><script>
export default {methods: {childMethod() {console.log('Child method called!');}}
};
</script>

1.2.2 props配置项

定义：

props 是用于父组件向子组件传递数据的机制。它允许父组件将数据传递给子组件，使子组件能够使用这些数据。

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

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

用法示例：

父组件：

javascript"><template><ChildComponent :message="parentMessage" :count="5" />
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent},data() {return {parentMessage: 'Hello from Parent'};}
};
</script>

子组件：

javascript"><template><div><h1>{{ message }}</h1><p>Count: {{ count }}</p></div>
</template><script>
export default {props: {message: {type: String,required: true},count: {type: Number,default: 0}}
};
</script>

1.3 mixin(混入)

1.3.1 定义

Mixins 是一个对象，它包含了 Vue 组件的选项（data、methods、computed、watch、生命周期钩子等）。当一个组件使用一个混合时，混合的所有选项将与组件的选项合并。你可以定义一个或多个混合，然后将它们应用到不同的组件中，从而共享代码和功能。

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

注意：一般会写独立的js文件，然后要使用的地方再引入

1.3.2 如何使用 Mixins

1.需要定义一个混合对象：

javascript">// myMixin.js
export const myMixin = {data() {return {mixinData: 'This is data from mixin'};},methods: {mixinMethod() {console.log('This method is from mixin');}},created() {console.log('Mixin created');}
};

1.3.3 在组件中使用 Mixin

组件中使用混合：

javascript"><template><div><h1>{{ mixinData }}</h1><button @click="mixinMethod">Call Mixin Method</button></div>
</template><script>
import { myMixin } from './myMixin';export default {mixins: [myMixin], // 使用混合
};
</script>

1.3.4 Mixins 的合并策略

当你将一个混合应用于组件时，Vue 会合并混合和组件的选项。不同选项的合并策略如下：

data：如果混合和组件都有 data 函数，Vue 会把它们的返回值合并到一个对象中。
methods：当混合和组件都有相同方法名时，组件的定义将覆盖混合的方法。
computed：和 methods 类似，如果有同名的计算属性，组件的定义将覆盖混合中的计算属性。
生命周期钩子：如果组件和混合都有生命周期钩子，Vue 会在调用组件的生命周期钩子之前调用混合的生命周期钩子。

1.4 自定义插件

1.4.1 定义插件

在 Vue.js 项目中，使用脚手架（如 Vue CLI）创建自定义插件可以帮助你实现特定的功能需求，例如自动化构建步骤、增加额外的功能或配置等。

注意：一般会写独立的js文件，然后要使用的地方再引入。

示例代码：

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

1.4.2 使用插件

```Vue.use()```

1.5 scoped样式

问题：

组件与组件之间的 style 会被汇总到一个对象中，因此如果选择器名称一致就会出现冲突。

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

2. 写法：```<style scoped>```

1.6 TodoList案例

1.6.1 TodoList案例实现

需求：

1.根据不同的功能拆分成不同的组件（可以拆分为5个组件）

2.然后根据组件实现的局部功能，引入相应的HTML和CSS静态组件

3.再实现动态的组件，考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用

4.后面再实现交互，从绑定事件开始。

实现效果：

脚手架结构：

代码演示：

App.vue

<template><div id="root"><div class="todo-container"><div class="todo-wrap"><MyHeader :addTodo="addTodo"/><MyList :todos="todos" :checkTodo="checkTodo" :deleteTodo="deleteTodo"/><MyFooter :todos="todos" :checkAllTodo="checkAllTodo" :clearAllTodo="clearAllTodo"/></div></div></div>
</template><script>import MyHeader from './components/MyHeader'import MyList from './components/MyList'import MyFooter from './components/MyFooter.vue'export default {name:'App',components:{MyHeader,MyList,MyFooter},data() {return {//由于todos是MyHeader组件和MyFooter组件都在使用，所以放在App中（状态提升）todos:[{id:'001',title:'抽烟',done:true},{id:'002',title:'喝酒',done:false},{id:'003',title:'开车',done:true}]}},methods: {//添加一个todoaddTodo(todoObj){this.todos.unshift(todoObj)},//勾选or取消勾选一个todocheckTodo(id){this.todos.forEach((todo)=>{if(todo.id === id) todo.done = !todo.done})},//删除一个tododeleteTodo(id){this.todos = this.todos.filter( todo => todo.id !== id )},//全选or取消全选checkAllTodo(done){this.todos.forEach((todo)=>{todo.done = done})},//清除所有已经完成的todoclearAllTodo(){this.todos = this.todos.filter((todo)=>{return !todo.done})}}}
</script><style>/*base*/body {background: #fff;}.btn {display: inline-block;padding: 4px 12px;margin-bottom: 0;font-size: 14px;line-height: 20px;text-align: center;vertical-align: middle;cursor: pointer;box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);border-radius: 4px;}.btn-danger {color: #fff;background-color: #da4f49;border: 1px solid #bd362f;}.btn-danger:hover {color: #fff;background-color: #bd362f;}.btn:focus {outline: none;}.todo-container {width: 600px;margin: 0 auto;}.todo-container .todo-wrap {padding: 10px;border: 1px solid #ddd;border-radius: 5px;}
</style>

MyList.vue

<template><ul class="todo-main"><MyItem v-for="todoObj in todos":key="todoObj.id" :todo="todoObj" :checkTodo="checkTodo":deleteTodo="deleteTodo"/></ul>
</template><script>import MyItem from './MyItem'export default {name:'MyList',components:{MyItem},//声明接收App传递过来的数据，其中todos是自己用的，checkTodo和deleteTodo是给子组件MyItem用的props:['todos','checkTodo','deleteTodo']}
</script><style scoped>/*main*/.todo-main {margin-left: 0px;border: 1px solid #ddd;border-radius: 2px;padding: 0px;}.todo-empty {height: 40px;line-height: 40px;border: 1px solid #ddd;border-radius: 2px;padding-left: 5px;margin-top: 10px;}
</style>

MyItem.vue

<template><li><label><input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)"/><!-- 如下代码也能实现功能，但是不太推荐，因为有点违反原则，因为修改了props --><!-- <input type="checkbox" v-model="todo.done"/> --><span>{{todo.title}}</span></label><button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button></li>
</template><script>export default {name:'MyItem',//声明接收todo、checkTodo、deleteTodoprops:['todo','checkTodo','deleteTodo'],methods: {//勾选or取消勾选handleCheck(id){//通知App组件将对应的todo对象的done值取反this.checkTodo(id)},//删除handleDelete(id){if(confirm('确定删除吗？')){//通知App组件将对应的todo对象删除this.deleteTodo(id)}}},}
</script><style scoped>/*item*/li {list-style: none;height: 36px;line-height: 36px;padding: 0 5px;border-bottom: 1px solid #ddd;}li label {float: left;cursor: pointer;}li label li input {vertical-align: middle;margin-right: 6px;position: relative;top: -1px;}li button {float: right;display: none;margin-top: 3px;}li:before {content: initial;}li:last-child {border-bottom: none;}li:hover{background-color: #ddd;}li:hover button{display: block;}
</style>

MyHeader.vue

<template><div class="todo-header"><input type="text" placeholder="请输入你的任务名称，按回车键确认" v-model="title" @keyup.enter="add"/></div>
</template><script>import {nanoid} from 'nanoid'export default {name:'MyHeader',//接收从App传递过来的addTodoprops:['addTodo'],data() {return {//收集用户输入的titletitle:''}},methods: {add(){//校验数据if(!this.title.trim()) return alert('输入不能为空')//将用户的输入包装成一个todo对象const todoObj = {id:nanoid(),title:this.title,done:false}//通知App组件去添加一个todo对象this.addTodo(todoObj)//清空输入this.title = ''}},}
</script><style scoped>/*header*/.todo-header input {width: 560px;height: 28px;font-size: 14px;border: 1px solid #ccc;border-radius: 4px;padding: 4px 7px;}.todo-header input:focus {outline: none;border-color: rgba(82, 168, 236, 0.8);box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);}
</style>

MyFooter.vue

<template><div class="todo-footer" v-show="total"><label><!-- <input type="checkbox" :checked="isAll" @change="checkAll"/> --><input type="checkbox" v-model="isAll"/></label><span><span>已完成{{doneTotal}}</span> / 全部{{total}}</span><button class="btn btn-danger" @click="clearAll">清除已完成任务</button></div>
</template><script>export default {name:'MyFooter',props:['todos','checkAllTodo','clearAllTodo'],computed: {//总数total(){return this.todos.length},//已完成数doneTotal(){//此处使用reduce方法做条件统计/* const x = this.todos.reduce((pre,current)=>{console.log('@',pre,current)return pre + (current.done ? 1 : 0)},0) *///简写return this.todos.reduce((pre,todo)=> pre + (todo.done ? 1 : 0) ,0)},//控制全选框isAll:{//全选框是否勾选get(){return this.doneTotal === this.total && this.total > 0},//isAll被修改时set被调用set(value){this.checkAllTodo(value)}}},methods: {/* checkAll(e){this.checkAllTodo(e.target.checked)} *///清空所有已完成clearAll(){this.clearAllTodo()}},}
</script><style scoped>/*footer*/.todo-footer {height: 40px;line-height: 40px;padding-left: 6px;margin-top: 5px;}.todo-footer label {display: inline-block;margin-right: 20px;cursor: pointer;}.todo-footer label input {position: relative;top: -1px;vertical-align: middle;margin-right: 5px;}.todo-footer button {float: right;margin-top: 5px;}
</style>

1.6.2总结TodoList案例

组件化编码流程：

(1).拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。

(2).实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：

1).一个组件在用：放在组件自身即可。

 2). 一些组件在用：放在他们共同的父组件上App.vue（状态提升）。

(3).实现交互：从绑定事件开始。
props适用于：

(1).父组件 ==> 子组件通信

(2).子组件 ==> 父组件通信（要求父先给子一个函数，子调用该函数，实现对数据的操作）
使用v-model时要切记：v-model绑定的值不能是props传过来的值，因为props是不可以修改的！
props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，因为Vue认为只要地址没有修改就不算改过，但不推荐这样做。

1.7 组件的自定义事件

一种组件间通信的方式，适用于：子组件 ===> 父组件
使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。
绑定自定义事件：
1. 第一种方式，在父组件中：<Demo @atguigu="test"/> 或 <Demo v-on:atguigu="test"/>
2. 第二种方式，在父组件中(灵活性更高)：
```
<Demo ref="demo"/>
......
mounted(){this.$refs.demo.$on('atguigu',this.test)
}
```
3. 若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法。
触发自定义事件：this.$emit('atguigu',数据)
解绑自定义事件
1. this.$off('atguigu') 解绑一个事件
2. this.$off('a','b') 解绑多个事件
3. this.$off() 所有事件都会被解绑
组件上也可以绑定原生DOM事件，需要使用native修饰符。
注意：通过this.$refs.xxx.$on('atguigu',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！正常函数的this指向绑定该事件的组件对象实例。。。

1.8 全局事件总线（GlobalEventBus）

本质：本质还是自定义事件，只不过可以实现跨越组件进行数据的交互。。。。

使用：哪里要用到数据就哪里绑定事件。。。

全局事件的实现要求：

1.需要所有组件通过某种方式可以进行交互
- 原型对象上添加了一个新的属性 $bus，并且这个属性的值是当前的 Vue 实例对象。因此所有组件都可以进行交互。。
2.并且所有组件要可以拿到 $on、$off、$emit方法
- 因此可以拿到Vue实例对象中的$on、$off、$emit方法

最终展示效果：

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

安装全局事件总线：

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

使用事件总线：
1. 接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。
```
javascript">methods(){demo(data){......}
}
......
mounted() {this.$bus.$on('xxxx',this.demo)
}
```
2. 提供数据：this.$bus.$emit('xxxx',数据)
最好在beforeDestroy钩子中，用 $off 去解绑当前组件所用到的事件，以避免内存泄漏。

1.9 消息订阅与发布（pubsub）

注意：一般用全局事件总线实现，因为订阅要引入第三方库。。。

一种组件间通信的方式，适用于任意组件间通信。
使用步骤：
1. 安装pubsub：npm i pubsub-js
2. 引入: import pubsub from 'pubsub-js'
3. 接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。
```
methods(){demo(data){......}
}
......
mounted() {this.pid = pubsub.subscribe('消息名',this.demo) //订阅消息
}
```
4. 提供数据：pubsub.publish('消息名',数据)
5. 最好在beforeDestroy钩子中，用PubSub.unsubscribe(pid)去取消订阅。