day06_电商项目_vue前端工程化

Vue day06 Contents 目 录 了解模块化的相关规范了解并搭建webpack了解使用Vue单文件组件能够搭建Vue脚手架掌握Element UI的使用 Contents 目 录 了解模块化的相关规范了解并搭建webpack了解使用Vue单文件组件能够搭建Vue脚手架掌握Element UI的使用 了解vue前端工程化需要学习的内容 要点提示 前端工程化 学习目标 掌握程度 了解 1 1前端工程化 学习目标 了解模块化的分类 要点提示 前端工程化 模块化的相关规范 掌握程度 了解 1 2前端工程化 模块化的相关规范 1 模块化规范分为哪几种 1 2前端工程化 模块化的相关规范 课堂问答 课堂问答 1 模块化规范分为哪几种 浏览器端的模块化规范 AMD CMD服务器端的模块化规范 CommonJS规范ES6模块化规范 1 2前端工程化 模块化的相关规范 课堂问答 知识总结 了解在nodeJS中安装并使用babel的过程 要点提示 前端工程化 Node js中通过babel体验ES6模块化 掌握程度 理解 1 3Node js中通过babel体验ES6模块化 了解在ES6模块化规范中如何进行默认导出和默认导入 要点提示 ES6模块化语法 默认导出与默认导入 掌握程度 理解 1 4默认导出与默认导入 了解在ES6模块化规范中如何进行按需导出与按需导入 要点提示 ES6模块化语法 按需导出与按需导入 掌握程度 理解 1 5按需导出与按需导入 了解如何直接导入并执行js代码 要点提示 ES6模块化语法 直接导入并执行模块代码 掌握程度 了解 1 6直接导入并执行模块代码 1 如何默认导入 导出 2 如何按需导入 导出 3 如何直接导入并执行js代码 1 6直接导入并执行模块代码 课堂问答 课堂问答 1 如何默认导入 导出 使用exportdefault 成员名 进行默认导出使用import接收名称from 模块标识符 进行默认导入2 如何按需导入 导出 exportletnum 998 按需导出某个成员import num from test js 按需导入其他模块的成员3 如何直接导入并执行js代码 import test2 js 1 6直接导入并执行模块代码 课堂问答 知识总结 Contents 目 录 了解模块化的相关规范了解并搭建webpack了解使用Vue单文件组件能够搭建Vue脚手架掌握Element UI的使用 了解webpack的基本作用 要点提示 webpack 介绍webpack的作用 掌握程度 了解 2 1介绍webpack的作用 理解我们要做一个隔行变色的项目了解现在我们做项目遇到的问题 要点提示 webpack 创建列表隔行变色项目 掌握程度 了解 2 2创建列表隔行变色项目 了解webpack安装和配置的过程 要点提示 webpack 在项目中安装和配置webpack 掌握程度 了解 2 3在项目中安装和配置webpack 1 如何安装和配置webpack 2 3在项目中安装和配置webpack 课堂问答 课堂问答 练 1 如何安装和配置webpack A 安装webpack npminstallwebpackwebpack cli DB 创建一个webpack config js并进行配置module exports mode development 可以设置为development 开发模式 production 发布模式 C 修改项目中的package json文件添加运行脚本dev scripts dev webpack D 运行dev命令进行项目打包 npmrundevE 在页面中引入项目打包之后在dist文件夹中生成的js文件F 浏览页面查看效果 2 3在项目中安装和配置webpack 课堂问答 知识总结 练 练习 安装和配置webpack 提示 按照步骤安装和配置webpackA 安装webpackB 创建并配置webpack config jsC 修改项目中的package json文件D 运行dev命令进行项目打包E 引入生成的js文件F 浏览页面查看效果 5分钟 2 3在项目中安装和配置webpack 案例 安装和配置webpack 了解如何配置webpack打包的入口和出口 要点提示 webpack 配置打包的入口与出口 掌握程度 掌握 2 4配置打包的入口与出口 了解如何配置webpack自动打包 要点提示 webpack 配置webpack的自动打包功能 掌握程度 掌握 2 5配置webpack的自动打包功能 了解如何配置html webpack plugin并生成预览页面 要点提示 webpack 配置html webpack plugin生成预览页面 掌握程度 掌握 2 6配置html webpack plugin生成预览页面 了解自动打包的相关参数 要点提示 webpack 配置自动打包相关的参数 掌握程度 掌握 2 7配置自动打包相关的参数 1 如何设置webpack的入口和出口 2 如何设置webpack自动打包 3 如何设置webpack自动打开默认预览页面 2 7配置自动打包相关的参数 课堂问答 课堂问答 1 如何设置webpack的入口和出口 可以通过改变webpack config js来设置入口 出口的js文件 如下 constpath require path module exports mode development 设置入口文件路径entry path join dirname src xx js 设置出口文件output 设置路径path path join dirname dist 设置文件名filename res js 2 7配置自动打包相关的参数 课堂问答 知识总结 2 如何设置webpack自动打包 A 安装自动打包功能的包 webpack dev servernpminstallwebpack dev server DB 修改package json中的dev指令如下 scripts dev webpack dev server C 将引入的js文件路径更改为 D 运行npmrundev 进行打包E 打开网址查看效果 http localhost 8080 2 7配置自动打包相关的参数 课堂问答 知识总结 3 如何配置打包完成之后 自动打开默认预览页面 A 安装默认预览功能的包 html webpack pluginnpminstallhtml webpack plugin DB 修改webpack config js文件 如下 导入包constHtmlWebpackPlugin require html webpack plugin 创建对象consthtmlPlugin newHtmlWebpackPlugin 设置生成预览页面的模板文件template src index html 设置生成的预览页面名称filename index html C 继续修改webpack config js文件 添加plugins信息 module exports plugins htmlPlugin 2 7配置自动打包相关的参数 课堂问答 知识总结 D 更改package json文件 修改dev命令 dev webpack dev server open host127 0 0 1 port8888 练习 安装和配置webpack实现自动打包并打开默认预览页面 提示 按照步骤安装和配置webpackA 安装自动打包工具和默认预览工具B 配置webpack config js文件C 修改项目中的package json文件D 运行dev命令进行项目打包E 查看页面效果 8分钟 2 7配置自动打包相关的参数 案例 配置webpack 了解加载器的作用 要点提示 webpack加载器 介绍加载器以及加载器的调用过程 掌握程度 掌握 2 8介绍加载器以及加载器的调用过程 了解如何打包处理css文件 要点提示 webpack加载器 打包处理css文件 掌握程度 掌握 2 9打包处理css文件 了解如何打包处理less文件 要点提示 webpack加载器 打包处理less文件 掌握程度 掌握 2 10打包处理less文件 了解如何打包处理sass文件 要点提示 webpack加载器 打包处理scss文件 掌握程度 掌握 2 11打包处理scss文件 上午复习 Vue第六天 上午复习 模块化规范分为 硬前端路由件 硬后端路由件和硬后端路由件webpack的安装和基本配置有硬前端路由件 硬后端路由件 硬后端路由件 硬后端路由件z这几个步骤webpack的加载器可以硬前端路由件 上午复习 Vue第六天 上午复习 模块化规范分为 浏览器端的模块化规范 服务器端的模块化规范和ES6模块化规范webpack的安装和基本配置有安装webpack 创建并配置webpack config js 修改项目中的package json文件 运行dev命令进行项目打包这几个步骤webpack的加载器可以打包非js文件 Contents 目 录 了解模块化的相关规范了解并搭建webpack了解使用Vue单文件组件能够搭建Vue脚手架掌握Element UI的使用 了解配置postCSS 要点提示 掌握程度 了解 2 12配置postCSS webpack加载器 配置postCSS 了解如何打包图片和字体文件 要点提示 掌握程度 了解 2 13打包样式表中的图片和字体文件 webpack加载器 打包样式表中的图片和字体文件 了解安装babel处理打包高级js语法 要点提示 webpack加载器 打包处理js文件中的高级语法 掌握程度 掌握 2 14打包处理js文件中的高级语法 1 如何打包css文件 less文件 sass文件 2 如何打包处理自动添加css的兼容性前缀 3 如何打包样式表中的图片以及字体文件 4 如何打包处理js文件中的高级语法 2 14打包处理js文件中的高级语法 课堂问答 课堂问答 1 如何打包css文件 less文件 sass文件 A 安装对应文件的加载器B 配置webpack config js的module中的rules数组module exports module rules test css use style loader css loader test less use style loader css loader less loader test scss use style loader css loader sass loader 2 14打包处理js文件中的高级语法 课堂问答 知识总结 2 如何打包处理自动添加css的兼容性前缀 A 安装postcss loader加载器以及autoprefixerB 创建并配置postcss config js文件constautoprefixer require autoprefixer module exports plugins autoprefixer C 配置更改webpack config js的module中的rules数组module exports plugins htmlPlugin module rules test css use style loader css loader postcss loader 2 14打包处理js文件中的高级语法 课堂问答 知识总结 3 如何打包样式表中的图片以及字体文件 A 安装对应url loader和file loader的加载器B 配置webpack config js的module中的rules数组module exports module rules test jpg png gif bmp ttf eot svg woff woff2 use url loader limit 16940 2 14打包处理js文件中的高级语法 课堂问答 知识总结 4 如何打包处理js文件中的高级语法 A 安装babel转换器和babel语法插件包B 在项目根目录创建并配置babel config js文件module exports presets babel preset env plugins babel plugin transform runtime babel plugin proposal class properties C 配置webpack config js的module中的rules数组rules test js use babel loader exclude node modules 2 14打包处理js文件中的高级语法 课堂问答 知识总结 练习 安装和配置webpack中的加载器 提示 按照步骤安装和配置webpack加载器A 安装css less sass加载器B 安装postcss加载器C 安装url loader和file loader加载器D 安装babel 10分钟 2 14打包处理js文件中的高级语法 案例 配置webpack Contents 目 录 了解模块化的相关规范了解并搭建webpack了解使用Vue单文件组件能够搭建Vue脚手架掌握Element UI的使用 了解传统Vue组件的缺陷了解单文件组件的基本结构 要点提示 单文件组件 单文件组件的组成结构 掌握程度 应用 3 1单文件组件的组成结构 1 Vue单文件组件由哪几个部分组成 3 1单文件组件的组成结构 课堂问答 课堂问答 3 1单文件组件的组成结构 课堂问答 知识总结 1 Vue单文件组件由哪几个部分组成 1 template组件组成的模板区域2 script组成的业务逻辑区域3 style样式区域 了解如何配置 vue文件的加载器 要点提示 单文件组件 配置 vue文件的loader加载器 掌握程度 应用 3 2配置 vue文件的loader加载器 1 如何配置 vue文件的加载器 3 2配置 vue文件的loader加载器 课堂问答 课堂问答 3 2配置 vue文件的loader加载器 课堂问答 知识总结 1 如何配置 vue文件的加载器 A 安装vue组件的加载器npminstallvue loadervue template compiler DB 配置规则 更改webpack config js的module中的rules数组constVueLoaderPlugin require vue loader lib plugin constvuePlugin newVueLoaderPlugin module exports plugins htmlPlugin vuePlugin module rules test vue loader vue loader 了解如何安装Vue了解如何基于Vue使用单文件组件 要点提示 单文件组件 在webpack项目中使用vue 掌握程度 应用 3 3在webpack项目中使用vue 1 如何在一个项目中引入并使用单文件组件 3 3在webpack项目中使用vue 课堂问答 课堂问答 3 3webpack打包发布 课堂问答 知识总结 1 如何在一个项目中引入并使用单文件组件 A 安装vuenpminstallvue SB 在index js中引入vue和单文件组件importVuefrom vue importappfrom components App vue C 创建Vue实例对象并指定el 最后使用render函数渲染单文件组件constvm newVue el first render h h app 了解如何打包发布项目 要点提示 单文件组件 webpack打包发布 掌握程度 应用 3 4webpack打包发布 Contents 目 录 了解模块化的相关规范了解并搭建webpack了解使用Vue单文件组件能够搭建Vue脚手架掌握Element UI的使用 了解如何安装3 x版本的vue脚手架 要点提示 vue脚手架 介绍并安装3 x版本的vue脚手架 掌握程度 应用 4 1介绍并安装3 x版本的vue脚手架 了解如何使用命令行创建Vue项目 要点提示 vue脚手架 基于交互式命令行创建新版vue项目 掌握程度 应用 4 2基于交互式命令行创建新版vue项目 了解如何使用图文界面创建Vue项目 要点提示 vue脚手架 基于图形化界面创建新版vue项目 掌握程度 应用 4 3基于图形化界面创建新版vue项目 练习 使用脚手架创建Vue项目 提示 先安装脚手架使用命令行或者ui界面创建vue项目 5分钟 4 3基于图形化界面创建新版vue项目 案例 使用脚手架创建Vue项目 了解如何创建2 x版本的旧版Vue项目 要点提示 vue脚手架 基于2 x的旧模板创建旧版vue项目 掌握程度 应用 4 4基于2 x的旧模板创建旧版vue项目 了解我们创建的vue项目的基本结构 要点提示 vue脚手架 分析项目结构 掌握程度 应用 4 5分析项目结构 了解脚手架项目自定义配置的两种方式掌握使用单独文件进行配置的方式 要点提示 vue脚手架 对vue脚手架项目进行自定义配置的两种方式 掌握程度 应用 4 6vue脚手架项目进行自定义配置 Contents 目 录 了解模块化的相关规范了解并搭建webpack了解使用Vue单文件组件能够搭建Vue脚手架掌握Element UI的使用 掌握基于命令行方式安装element ui 要点提示 组件库 介绍element ui并基于命令行方式手动安装 掌握程度 应用 4 7介绍element ui并基于命令行方式手动安装 练习 使用脚手架创建Vue项目安装并使用element