Vue + ElementUI的电商管理系统实例22 项目优化-为开发模式与发布模式指定不同的打包入口
摘要:项目优化策略 3、为开发模式与发布模式指定不同的打包入口 默认情况下,Vue项目的开发模式与发布模式,共用同一个打包的入口文件(即src/main.js)。为了将项目的开发过程与发布过程分离,我们可以为两种模式,各自指定打包的入口文件,即: 1)开发模式的入口文件为src/main-dev.js 2
阅读全文
posted @
2020-04-15 11:20
JoeYoung
阅读(706)
推荐(0) 编辑
Vue + ElementUI的电商管理系统实例21 项目优化-修改webpack默认设置
摘要:项目优化策略 2、通过 vue.config.js 修改 webpack 的默认配置 通过vue-cli3.0工具生成的项目,是默认隐藏了所有webpack的配置项,目的是为了屏蔽项目的配置过程,让程序员把工作的重心,放到具体功能和业务逻辑的实现上。 如果程序员有修改 webpack 默认配置的需求
阅读全文
posted @
2020-04-14 16:52
JoeYoung
阅读(265)
推荐(0) 编辑
Vue + ElementUI的电商管理系统实例20 项目优化-生成打包报告
摘要:项目优化策略 1、生成打包报告 打包时,为了直观的发现项目中存在的问题,可以在打包时生成报告。生成报告的方式有两种: 1) 通过命令行参数的形式生成报告 // 通过 vue-cli 的命令选项可以生成打包报告 // --report 选项可以生成 report.html 以帮助分析报告内容 vue-
阅读全文
posted @
2020-04-14 10:43
JoeYoung
阅读(656)
推荐(0) 编辑
Vue + ElementUI的电商管理系统实例19 执行build命令期间移除所有的console
摘要:打开可视化工具,选择build,然后点击运行。 然后会发现有错误或者是警告,同样打开输出面板查看原因。 这个表示在产品发布阶段,不允许在代码中出现console.* 方法。 babel-plugin-transform-remove-console 插件:可以移除所有 console.* 方法。 打
阅读全文
posted @
2020-04-13 17:03
JoeYoung
阅读(501)
推荐(0) 编辑
Vue + ElementUI的电商管理系统实例18 解决serve命令中的ESLint语法错误
摘要:打开可视化工具,发现仪表盘中有3个警告。点击旁边的输出,可以查看具体的警告内容。 发现基本都是 ESLint 给检查出来的语法错误。 还有一个错误就是:作用域插槽的“scope”属性已被弃用并替换为“slot-scope”。 当 ESLint 和 代码格式化 之间有冲突的时候,打开项目根目录下的 .
阅读全文
posted @
2020-04-13 15:08
JoeYoung
阅读(495)
推荐(0) 编辑
Vue + ElementUI的电商管理系统实例17 顶部进度条效果
摘要:通过 nprogress 第三方的包 打开可视化工具里的依赖,点击安装依赖-运行依赖,搜索 nprogress ,进行安装。 然后导入对应的包,打开main.js文件,我们可以看到,通过 axios 发起了ajax请求,只要发起了请求,就会触发 request 拦截器。当请求响应完毕就会调用 res
阅读全文
posted @
2020-04-10 14:31
JoeYoung
阅读(1329)
推荐(0) 编辑
Vue + ElementUI的电商管理系统实例16 数据报表
摘要:1、创建数据报表分支report并push到远程 创建分支: git checkout -b report 推送到远程:(以前码云中没有该分支,所以要加-u,如果码云中有该分支,则不需要加-u) git push -u origin report 2、通过路由加载数据报表组件 新建report文件夹
阅读全文
posted @
2020-04-09 16:40
JoeYoung
阅读(5198)
推荐(0) 编辑
Vue + ElementUI的电商管理系统实例15 订单列表
摘要:1、创建order分支 创建分支: git checkout -b order 推送到远程: git push -u origin order 2、通过路由渲染订单列表页面 新建order文件夹,Order.vue文件: <template> <div> <h3>订单列表</h3> </div> <
阅读全文
posted @
2020-04-08 14:39
JoeYoung
阅读(7058)
推荐(2) 编辑
Vue + ElementUI的电商管理系统实例14 商品列表-添加商品
摘要:1、通过编程式导航跳转到商品添加页面 给添加商品按钮添加点击事件: <el-button type="primary" @click="goAddpage">添加商品</el-button> goAddpage事件函数: // 跳转到添加商品页面 goAddpage() { // 路由导航对象.pu
阅读全文
posted @
2020-04-07 14:22
JoeYoung
阅读(4415)
推荐(2) 编辑
Vue + ElementUI的电商管理系统实例13 商品列表
摘要:1、创建goods_list分支并推送到远程 创建分支goods_list,并切换到当前: git checkout -b goods_list 推送到远程:(以前码云中没有该分支,所以要加-u,如果码云中有该分支,则不需要加-u) git push -u origin goods_list 2、通
阅读全文
posted @
2020-04-03 15:41
JoeYoung
阅读(4625)
推荐(0) 编辑
Vue + ElementUI的电商管理系统实例12 分类参数
摘要:1、创建商品分类分支goods_params并push到远程 创建分支goods_params,并切换到当前: git checkout -b goods_params 推送到远程:(以前码云中没有该分支,所以要加-u,如果码云中有该分支,则不需要加-u) git push -u origin go
阅读全文
posted @
2020-04-02 14:40
JoeYoung
阅读(1399)
推荐(0) 编辑
Vue2.5 旅游项目实例28 联调测试上线-异步组件实现按需加载
摘要:打包生成的 dist 文件夹包含了:static 文件夹和 index.html 文件。 index.html就是前段代码的入口文件。 static 目录下: 1.首先有一个 css 文件夹,里面包含了一个XXX.css.map 文件,它是帮助我们调试被压缩过的 css 代码,一般在开发做调试的时候
阅读全文
posted @
2020-04-01 16:55
JoeYoung
阅读(384)
推荐(0) 编辑
Vue2.5 旅游项目实例27 联调测试上线-项目打包上线
摘要:打开命令行,进入项目的目录,输入: npm run build 这时候Vue的脚手架工具会自动对src下的源代码,进行打包编译,生成一个能被浏览器运行的代码,同时也是压缩过后的代码。 完成后,控制台会显示: Build complete. 现在打开项目目录,会发现多出一个 dist 文件夹,这个文件
阅读全文
posted @
2020-04-01 10:35
JoeYoung
阅读(223)
推荐(0) 编辑
Vue2.5 旅游项目实例26 联调测试上线-真机测试
摘要:我们访问项目都是在浏览器输入 http://localhost:8080/#/ 打开一个命令行窗口,获取当前机器的内网IP window输入:ipconfig mac输入:ifconfig 得到自己的内网ip后,按说输入 http://192.168.0.xxx:8080 一样可以访问到项目,但是却
阅读全文
posted @
2020-03-31 15:11
JoeYoung
阅读(285)
推荐(0) 编辑
Vue2.5 旅游项目实例25 联调测试上线-项目前后端联调
摘要:我们开发的时候使用的数据都是本地 mock 目录下的模拟数据,现在需要调用的是线上数据。假如我们在本地启用了一个php的后台服务,地址为 http://localhost:80 打开config/index.js文件,我们上次修改的 dev 开发模式,修改为: proxyTable: { '/api
阅读全文
posted @
2020-03-27 20:11
JoeYoung
阅读(231)
推荐(0) 编辑
Vue2.5 旅游项目实例24 详情页-在项目中添加基础动画
摘要:创建分支:detail-animation 拉去到本地并切换分支: git pull git checkout detail-animation 在详情页点击banner,显示画廊轮播组件的时候,添加渐隐渐显的动画效果。 在 src/common 目录下创建 fade 文件夹,并新建FadeAnim
阅读全文
posted @
2020-03-26 14:25
JoeYoung
阅读(246)
推荐(0) 编辑
Vue2.5 旅游项目实例23 详情页 Ajax动态获取数据
摘要:创建分支:detail-ajax 拉取到本地并切换分支: git pull git checkout detail-ajax 打开Detail.vue页面,添加代码: import axios from 'axios' export default { data () { return { sigh
阅读全文
posted @
2020-03-25 16:44
JoeYoung
阅读(351)
推荐(0) 编辑
Vue2.5 旅游项目实例22 详情页 使用递归组件实现详情页列表
摘要:创建分支:detail-list 拉取到本地并切换分支: git pull git checkout detail-list 在detail/components目录下,创建List.vue文件: <template> <div>list</div> </template> <script> exp
阅读全文
posted @
2020-03-25 14:34
JoeYoung
阅读(441)
推荐(0) 编辑
Vue2.5 旅游项目实例21 详情页 对全局事件的解绑
摘要:上次在Header.vue中写了一个: activated () { window.addEventListener('scroll', this.handleScroll) }, 这个是对全局的 window 对象,所以会出现问题,不仅对这个组件,也对全局的组件都造成了影响。 解决办法: // 页
阅读全文
posted @
2020-03-24 14:04
JoeYoung
阅读(206)
推荐(0) 编辑
Vue2.5 旅游项目实例20 详情页 实现Header渐隐渐显效果
摘要:创建分支:detail-header 拉取到本地并切换分支: git pull git checkout detail-header 在detail/components目录下,创建Header.vue文件: <template> <div> <div class="header-abs"></di
阅读全文
posted @
2020-03-23 15:17
JoeYoung
阅读(356)
推荐(0) 编辑