day13_电商项目_项目实战day7

Vue day13 Contents 目 录 优化项目项目上线 Contents 目 录 优化项目项目上线 了解今天的学习目标是做项目优化和项目上线 要点提示 学习目标 掌握程度 了解 1 1学习目标 了解可以通过多种形式来进行项目优化 要点提示 优化 介绍项目优化的策略 掌握程度 了解 1 2介绍项目优化的策略 了解如何添加nprogress插件 要点提示 优化 通过nprogress添加进度条效果 掌握程度 了解 1 3通过nprogress添加进度条效果 了解如何去除ESLint报警信息 要点提示 优化 解决serve命令中提示的ESLint语法错误 掌握程度 了解 1 4解决serve命令中提示的ESLint语法错误 了解如何使用插件移除在build期间出现的console 要点提示 在执行build命令期间移除所有的console 掌握程度 了解 1 5在执行build命令期间移除所有的console 了解如何只在发布阶段移除console 要点提示 05 优化 只在发布阶段移除所有的console 掌握程度 了解 1 6只在发布阶段移除所有的console 练习 添加进度条项目优化 解决ESLint报警信息项目优化 移除console信息 提示 按照步骤完成修改用户信息的功能A 安装NProgress插件 并在request拦截器中开启进度条 在response拦截器中结束进度条B 根据ESLint报警信息修改项目C 安装babel plugin transform remove console插件并使用该插件移除console信息 10分钟 1 6只在发布阶段移除所有的console 案例 进行项目优化 了解如何生成打包报告 要点提示 优化 生成打包报告 掌握程度 了解 1 7生成打包报告 了解我们可以通过vue config js修改webpack配置 要点提示 优化 通过vue config js修改webpack的默认配置 掌握程度 了解 1 8通过vue config js修改webpack的默认配置 了解configureWebpack与chainWebpack 要点提示 优化 介绍configureWebpack与chainWebpack 掌握程度 了解 1 9介绍configureWebpack与chainWebpack 了解修改vue config js更改打包入口 要点提示 优化 通过chainWebpack自定义打包入口 掌握程度 了解 1 10通过chainWebpack自定义打包入口 练习 修改vue config js文件设置开发模式和发布模式的打包入口js文件 提示 关键代码如下 module exports chainWebpack config config when process env NODE ENV production config config entry app clear add src main prod js config when process env NODE ENV development config config entry app clear add src main dev js 10分钟 1 10通过chainWebpack自定义打包入口 案例 设置打包入口 上午复习 Vue第十三天 上午复习 当我们安装了nprogress插件后 我们可以通过NProgress start 开启进度条 通过 NProgress done 结束进度条当我们使用vue config js设置更改webpack打包入口文件时 需要编写代码如下 module exports chainWebpack config config when process env NODE ENV production config config entry app clear add src main prod js 上午复习 Vue第十三天 上午复习 当我们安装了nprogress插件后 我们可以通过NProgress start 开启进度条 通过NProgress done 结束进度条当我们使用vue config js设置更改webpack打包入口文件时 需要编写代码如下 module exports chainWebpack config config when process env NODE ENV production config config entry app clear add src main prod js 了解如何通过externals设置排除项 要点提示 优化 通过externals加载外部CDN资源 掌握程度 了解 1 11通过externals加载外部CDN资源 点击运行 查看效果 要点提示 优化 演示externals的效果 掌握程度 了解 1 12演示externals的效果 了解如何在public index html中添加CDN 要点提示 优化 通过CDN优化ElementUI的打包 掌握程度 了解 1 13通过CDN优化ElementUI的打包 了解如何通过插件设置参数并通过参数自定制首页内容 要点提示 优化 自定制首页内容 掌握程度 了解 1 14自定制首页内容 练习 使用externals设置排除项 设置CDN设置插件参数 提示 步骤如下 A 在vue config js中通过config set 设置排除项B 打开main js 注释css的引入代码C 打开vue config js 通过config plugin html 设置插件参数D 打开public index html 判断htmlWebpackPlugin options isProd并设置CDN 10分钟 1 14自定制首页内容 案例 设置排除项以及CDN 了解如何实现路由懒加载 要点提示 优化 实现路由懒加载 掌握程度 了解 1 15实现路由懒加载 练习 实现路由懒加载 提示 步骤如下 A 安装路由懒加载插件 babel plugin syntax dynamic importB 在babel config js文件中声明该插件C 打开router js 将路由组件从按需加载更改为懒加载importLoginfrom components Login vue 更改为constLogin import webpackChunkName login home welcome components Login vue 10分钟 1 15实现路由懒加载 案例 实现路由懒加载 Contents 目 录 优化项目项目上线 了解如何创建node服务器 要点提示 上线 通过node创建web服务器 掌握程度 了解 2 1通过node创建web服务器 了解如何开启gzip压缩 要点提示 上线 开启文件的Gzip网络传输压缩 掌握程度 了解 2 2开启文件的Gzip网络传输压缩 大致了解如何配置https服务 要点提示 上线 配置HTTPS服务 掌握程度 了解 2 3配置HTTPS服务 了解如何使用pm2开启服务器 并进行管理 要点提示 上线 使用pm2管理应用 掌握程度 了解 2 4使用pm2管理应用 练习 使用node开启服务器使用compression开启gzip使用pm2管理node服务器 提示 关键代码如下 constexpress require express constcompression require compression constapp express app use compression app use express static dist app listen 80 console log serverrunningathttp 127 0 0 1 80 8分钟 2 4使用pm2管理应用 案例 使用node开启服务器 今日复习 在vue config js文件中使用插件添加参数的关键代码是config plugin html tap args args 0 isProd true returnargs 判断插件参数的关键代码是if htmlWebpackPlugin options isProd 当我们安装了路由懒加载的插件之后 我们需要打开router js文件 将按需导入路由组件的代码importLoginfrom components Login vue 更改为路由懒加载的代码constLogin import webpackChunkName login home welcome components Login vue vue第十三天 今日复习 今日复习 在vue config js文件中使用插件添加参数的关键代码是config plugin html tap args args 0 isProd true returnargs 判断插件参数的关键代码是if htmlWebpackPlugin options isProd 当我们安装了路由懒加载的插件之后 我