day06_电商项目_vue前端工程化.ppt

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.3 Node.js中通过babel体验ES6模块化,了解在ES6模块化规范中如何进行默认导出和默认导入,要点提示,ES6模块化语法-默认导出与默认导入,掌握程度：理解,1.4 默认导出与默认导入,了解在ES6模块化规范中如何进行按需导出与按需导入,要点提示,ES6模块化语法-按需导出与按需导入,掌握程度：理解,1.5 按需导出与按需导入,了解如何直接导入并执行js代码,要点提示,ES6模块化语法-直接导入并执行模块代码,掌握程度：了解,1.6 直接导入并执行模块代码,1、如何默认导入/导出？2、如何按需导入/导出？3、如何直接导入并执行js代码？,1.6 直接导入并执行模块代码,课堂问答,课堂问答,1、如何默认导入/导出？使用 export default 成员名.进行默认导出使用 import 接收名称 from 模块标识符 进行默认导入2、如何按需导入/导出？export let num=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：npm install webpack webpack-cli-DB.创建一个 webpack.config.js 并进行配置module.exports=mode:development/可以设置为development(开发模式)，production(发布模式)C.修改项目中的package.json文件添加运行脚本devscripts:dev:webpack D.运行dev命令进行项目打包：npm run devE.在页面中引入项目打包之后在dist文件夹中生成的js文件F.浏览页面查看效果,2.3 在项目中安装和配置webpack,课堂问答,知识总结,练,练习,安装和配置webpack,提示,按照步骤安装和配置webpackA.安装webpackB.创建并配置 webpack.config.js C.修改项目中的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文件，如下：const path=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-server npm install webpack-dev-server-DB.修改package.json中的dev指令如下：scripts:dev:webpack-dev-server C.将引入的js文件路径更改为：D.运行npm run dev，进行打包E.打开网址查看效果：http:/localhost:8080,2.7 配置自动打包相关的参数,课堂问答,知识总结,3、如何配置打包完成之后，自动打开默认预览页面？A.安装默认预览功能的包:html-webpack-plugin npm install html-webpack-plugin-DB.修改webpack.config.js文件，如下：/导入包 const HtmlWebpackPlugin=require(html-webpack-plugin);/创建对象 const htmlPlugin=new HtmlWebpackPlugin(/设置生成预览页面的模板文件 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-host 127.0.0.1-port 8888,练习,安装和配置webpack实现自动打包并打开默认预览页面,