皮皮岛。

VUE2-3

第一天：前端工程化与webpack

前端工程化的相关概念
webpack 的常见用法
打包发布
Source Map

目标：

了解工程化的前端开发方式
能够知道webpack在实际开发中起到的作用

第二天：VUE基础入门

VUE的基本使用步骤
VUE中常用指令
VUE-dev tools调试工具

目标：

能够使用VUE的指令完成页面结构的渲染
能够使用VUE的调试工具辅助VUE 的开发

标题第三天VUE入门part-2

过滤器和侦听器
计算属性的用法
axios 的基本用法
VUE-cli的安装和使用

目标：

能够在实际开发中合理运用过滤器，侦听器，计算属性解决自己遇到的问题
能够使用axios 发起Ajax 请求
能够使用VUE-cli工具生成工具化的vue 项目

标题第四天组件与生命周期

组件的注册与使用
组件的props自定义属性
解决组件样式冲突
组件的生命周期
组件之间的通讯（数据共享）

目标：
① 能够掌握.vue 单文件组件的基本用法
②能够掌握组件通讯的三种方式
③ 掌握组件生命周期的执行顺序和应用场景

标题第五天：ref＆购物车案例

使用ref 引用DOM 元素和组件实例
$nextTick 的基本使用
购物车案例

目标：
① 能够使用ref 获取页面上 DOM 或组件的引用
② 能够知道 $nextTick 的应用场景并合理地使用
③通过“购物车案例〞巩固前 4 天所有学知识

标题第六天：vue 组件的高级用法

•动态组件的使用
•插槽的使用（默认插槽、具名插槽、作用域插槽）
•自定义指令
•ESLint 的使用
目标：
①能够使用 keep-alive 实现组件的缓存
② 能够使用插槽提高组件的复用性
⑨ 能够了解常见的 ESLint 语法规则

标题第七天：路由(vue-router)

•路由的基本配置与使用
•路由重定向
•嵌套路由、动态路由
•编程式导航、路由导航守卫
目标：
①能够在项目中安装和配置路由
②能够使用路由实现单页面应用程序的开发
⑨ 能够使用导航守卫控制路由的访问权限

标题第八天：黑马头条（收尾案例）

•vant 组件库
•封装 axios
•上拉加载＆下拉刷新
。 Vant 主题定制
目标：
① 掌握 Vant 组件库的基本使用
② 能够知道如何封装 axios 请求模块
⑨ 能够知道如何实现上拉加载和下拉刷新功能

第一天

前端工程化

1. 小白眼中的前端开发 vs 实际的前端开发

小白眼中的前端开发：

会写HTML+CSS +Javascript 就会前端开发
需要美化页面样式，就拽一个 bootstrap过来
需要操作 DOM或发起Ajax 请求，再拽一个 jQuery 过来。需要快速实现网页布局效果，就拽一个 Layui 过来

实际的前端开发：

模块化（js 的模块化、cs5 的模块化、资源的模块化）。
组件化（复用现有的UI结构、样式、行为）
规范化（目录结构的划分、编码规范化、接口规范化、文档规范化、Git 分支管理）
自动化（自动化构建、自动部署、自动化测试）

2. 什么是前端工程化

前端工程化指的是：在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标淮化。
企业中的vue 项目和 React 项目，都是基于工程化的方式进行开发的。
好处：前端开发自成体系，有一套标准的开发方案和流程。

3. 前端工程化的解决方案

早期的前端工程化解决方案：
• grunt ( https://www.gruntjs.net/ )
• gulp ( https://www.gulpjs.com.cn/)
目前主流的前端工程化解决方案：
• webpack ( https://www.webpackjs.com/ )
• parcel (https://zh.parcelis.ora/ )

一、前端工程化和webpack

1、前端工程化

前端开发：

模块化（js的模块化，css的模块化，资源的模块化）
组件化（复用现有的UI结构、样式、行为）
规范化（目录结构的划分、编码规范化、接口规范化、文档规范化、Git分支管理）
自动化（自动化构建、自动部署、自动测试）
什么是前端工程化
在企业的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规划化、标准化。

好处：前端开发自成体系，有一套标准的开发方案和流程。

前端工程化的解决方案
目前主流的前端工程化解决方案：

webpack (主要)
parcel
2、webpack
webpack的基本使用

1、什么是webpack

概念：webpack是前端项目工程化的具体解决方案。
主要功能：他提供了友好的前端模块化的支持，以及代码压缩混淆、处理浏览器端JavaScript的兼容性，性能优化等强大功能。

2、【案例】创建列表隔行变色项目

新建项目空白目录，并运行npm init -y命令，初始化包管理配置文件package.json
新建src源代码目录
新建src->index.html首页和src->index.js脚本文件
初始化页面基本结构
运行npm install jquery -S命令，安装jQuery
通过ES6模块化的方式导入jQuery，实现列表隔行变色效果

运行结果：出错，语法不兼容

Vue

什么是vue

vue 指令

1、内容渲染指令（v-text 、{{}}、v-html）

2、属性绑定指令（v-bind 简写：）

4、列表渲染（v-for）

3、事件绑定（v-on 简写@，包含$event、事件修饰符）

4、v-model指令，双向绑定

5、条件渲染指令（v-show、v-if）

4、列表渲染（v-for）

vue提供了v-for列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。
v-for指令需要使用item in items形式的特殊语法中，其中：

items是待循环的数组
item是被循环的每一项

过滤器

侦听器

计算属性

axios

某个方法的返回值是promise实例，则前面可以添加await
await只能用于被async修饰的方法中

使用解构赋值，后面的axios（{}）的结果里有六个属性（包含data属性），用{data}解构出data属性，{data：res}的含义是，把data属性重命名为res。

get

post

v-cli

安装v-cli
npm install -g @vue/cli

运行v-cli
在准备好的路径下，输入vue create +项目名称

空格键选择
第一项选择后，稍后会询问选择VUE2还是VUE3
第二项babel解决js兼容性
第三项微软的脚本语言
第四项渐进式的web框架
第五项路由
第六项vuex
第七项css预处理器–less
第八个代码编写风格的约束
第九个单元测试
第十个E2E测试
Router