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文件中，可以关闭脚手架的语法检查。。

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

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

//关闭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```

用法示例：

父组件：

<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>

子组件

<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. 第三种方式（限制类型、限制必要性、指定默认值）

        ```js

        props:{

         name:{

         type:String, //类型

         required:true, //必要性

         default:'老王' //默认值

         }

        }

        ```

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

用法示例：

父组件：

<template>
  <ChildComponent :message="parentMessage" :count="5" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from Parent'
    };
  }
};
</script>

子组件：

<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.需要定义一个混合对象：

// 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

组件中使用混合：

<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文件，然后要使用的地方再引入。

示例代码：

 对象.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: {
			//添加一个todo
			addTodo(todoObj){
				this.todos.unshift(todoObj)
			},
			//勾选or取消勾选一个todo
			checkTodo(id){
				this.todos.forEach((todo)=>{
					if(todo.id === id) todo.done = !todo.done
				})
			},
			//删除一个todo
			deleteTodo(id){
				this.todos = this.todos.filter( todo => todo.id !== id )
			},
			//全选or取消全选
			checkAllTodo(done){
				this.todos.forEach((todo)=>{
					todo.done = done
				})
			},
			//清除所有已经完成的todo
			clearAllTodo(){
				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、deleteTodo
		props:['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传递过来的addTodo
		props:['addTodo'],
		data() {
			return {
				//收集用户输入的title
				title:''
			}
		},
		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认为只要地址没有修改就不算改过，但不推荐这样做。