day04

1、脚手架的安装和目录结构(参考全家桶)

​ 一、之前自己去搭建环境 配置webpack 只是一些基本的功能 ​ 二、 4/3和2 ​ 区别

1)	创建脚手架4/3       的vue项目, 并运行
	npm install -g @vue/cli    安装脚手架4/3的版本
	vue create vue-demo        使用安装的脚手架创建一个新的vue项目
	npm run serve              运行创建的项目命令


2)	创建脚手架2的vue项目
	npm install -g @vue/cli-init
	vue init webpack vue-demo
		npm run dev

1. webpack配置
	(1)	2: 配置是暴露的, 我们可以直接在里面修改配置
	(2)	3: 配置是包装隐藏了, 需要通过脚手架扩展的vue.config.js来配置
2. 运行启动命令
	(1)	2: npm run dev
	(2)	3: npm run serve 

二、eslint的禁用
eslint的配置的错误级别
1、
// 局部禁用某个错误提示
/* eslint-disable no-unused-vars */


2、
//package.json当中找到eslintConfig项，全局配置禁用某些错误提示
"rules": {
	"no-unused-vars":"off"
	}

3、
//开发阶段直接关闭eslint的提示功能

手动创建vue.config.js
module.exports = {
	//  写自己想要配置的东西去覆盖系统自带的
	// 关闭ESLint的规则
	lintOnSave: false
}

2 、组件模板解析

​ Vue渲染两种方式： ​ 1、render：h => h(App) ​ 2、components注册组件，template解析，但是vue导入需要导入带解析器的版本

git的基本使用6大步

3、comment组件化开发（案例） 三遍

分两大步：静态页面实现 和  动态交互实现

静态页面实现：
	1、拆分组件	拆分页面 定义组件   最大化重用（html,css,图片）


	2、组装组件     就是把各个组件组装起来放在App.vue里面


	3、渲染组件     就是把组件拼装完后，不考虑数据，先展示出来 


动态组件界面
	1、初始化数据动态显示

		初始化数据分析：
			数据类型     一般我们的数据最终都是放在一个数组内部，数组内部放对象
			数据名称     comments:[{},{},{}]
			定义在哪个组件   （看哪个组件还是哪些个组件使用到）
				数据用到不是说展示就代表用，而是说数据的增删改查都叫用到数据

				如果这个数据只是某一个组件用的，那么数据就在这一个组件当中定义
				如果这个数据在某些个组件当中用的，那么就找这些个共同的祖先组件去定义

​ 组件标签名和属性名大小写问题： 基本规则：要么原样去写，要么转小写中间用-连接 AddComment 或者

	2、交互（与用户的交互）

		对于数据的操作：
			数据在哪，操作数据的方法就要在哪定义，而不是随便的在某一个组件当中去操作数据
			想要操作数据的组件，可以通过调用操作数据的方法，间接去操作数据。

		添加和删除：
			子组件添加事件和事件回调，事件回调当中去调用外部操作数据的方法
			数据所在的组件去添加操作数据的方法


props 组件通信的方式：

​ 是组件通信最常用最简单的一种方式

	适用场合：适用于父子之间


	父可以给子传递函数数据和非函数数据
		1、传递非函数数据，本质就是父亲给儿子传数据
		2、传递函数数据，本质是父亲想要儿子的数据，通过函数调用传参的方式把数据传递给父亲

​ 不足（不是父子就狠麻烦） 兄弟关系，就必须先把一个数据给了父亲，然后通过父亲再给另一个

	最基础的通信，用的也是比较多的，所以必须搞定

​