随笔分类 -  Vue

上一页 1 2 3 4 5 6 下一页
Vue + ElementUI的电商管理系统实例22 项目优化-为开发模式与发布模式指定不同的打包入口
摘要:项目优化策略 3、为开发模式与发布模式指定不同的打包入口 默认情况下,Vue项目的开发模式与发布模式,共用同一个打包的入口文件(即src/main.js)。为了将项目的开发过程与发布过程分离,我们可以为两种模式,各自指定打包的入口文件,即: 1)开发模式的入口文件为src/main-dev.js 2 阅读全文
posted @ 2020-04-15 11:20 JoeYoung 阅读(706) 评论(0) 推荐(0) 编辑
Vue + ElementUI的电商管理系统实例21 项目优化-修改webpack默认设置
摘要:项目优化策略 2、通过 vue.config.js 修改 webpack 的默认配置 通过vue-cli3.0工具生成的项目,是默认隐藏了所有webpack的配置项,目的是为了屏蔽项目的配置过程,让程序员把工作的重心,放到具体功能和业务逻辑的实现上。 如果程序员有修改 webpack 默认配置的需求 阅读全文
posted @ 2020-04-14 16:52 JoeYoung 阅读(265) 评论(0) 推荐(0) 编辑
Vue + ElementUI的电商管理系统实例20 项目优化-生成打包报告
摘要:项目优化策略 1、生成打包报告 打包时,为了直观的发现项目中存在的问题,可以在打包时生成报告。生成报告的方式有两种: 1) 通过命令行参数的形式生成报告 // 通过 vue-cli 的命令选项可以生成打包报告 // --report 选项可以生成 report.html 以帮助分析报告内容 vue- 阅读全文
posted @ 2020-04-14 10:43 JoeYoung 阅读(656) 评论(0) 推荐(0) 编辑
Vue + ElementUI的电商管理系统实例19 执行build命令期间移除所有的console
摘要:打开可视化工具,选择build,然后点击运行。 然后会发现有错误或者是警告,同样打开输出面板查看原因。 这个表示在产品发布阶段,不允许在代码中出现console.* 方法。 babel-plugin-transform-remove-console 插件:可以移除所有 console.* 方法。 打 阅读全文
posted @ 2020-04-13 17:03 JoeYoung 阅读(501) 评论(0) 推荐(0) 编辑
Vue + ElementUI的电商管理系统实例18 解决serve命令中的ESLint语法错误
摘要:打开可视化工具,发现仪表盘中有3个警告。点击旁边的输出,可以查看具体的警告内容。 发现基本都是 ESLint 给检查出来的语法错误。 还有一个错误就是:作用域插槽的“scope”属性已被弃用并替换为“slot-scope”。 当 ESLint 和 代码格式化 之间有冲突的时候,打开项目根目录下的 . 阅读全文
posted @ 2020-04-13 15:08 JoeYoung 阅读(495) 评论(0) 推荐(0) 编辑
Vue + ElementUI的电商管理系统实例17 顶部进度条效果
摘要:通过 nprogress 第三方的包 打开可视化工具里的依赖,点击安装依赖-运行依赖,搜索 nprogress ,进行安装。 然后导入对应的包,打开main.js文件,我们可以看到,通过 axios 发起了ajax请求,只要发起了请求,就会触发 request 拦截器。当请求响应完毕就会调用 res 阅读全文
posted @ 2020-04-10 14:31 JoeYoung 阅读(1329) 评论(0) 推荐(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) 推荐(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) 评论(0) 推荐(2) 编辑
Vue + ElementUI的电商管理系统实例14 商品列表-添加商品
摘要:1、通过编程式导航跳转到商品添加页面 给添加商品按钮添加点击事件: <el-button type="primary" @click="goAddpage">添加商品</el-button> goAddpage事件函数: // 跳转到添加商品页面 goAddpage() { // 路由导航对象.pu 阅读全文
posted @ 2020-04-07 14:22 JoeYoung 阅读(4415) 评论(1) 推荐(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) 推荐(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) 推荐(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) 推荐(0) 编辑
Vue2.5 旅游项目实例27 联调测试上线-项目打包上线
摘要:打开命令行,进入项目的目录,输入: npm run build 这时候Vue的脚手架工具会自动对src下的源代码,进行打包编译,生成一个能被浏览器运行的代码,同时也是压缩过后的代码。 完成后,控制台会显示: Build complete. 现在打开项目目录,会发现多出一个 dist 文件夹,这个文件 阅读全文
posted @ 2020-04-01 10:35 JoeYoung 阅读(223) 评论(0) 推荐(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) 推荐(0) 编辑
Vue2.5 旅游项目实例25 联调测试上线-项目前后端联调
摘要:我们开发的时候使用的数据都是本地 mock 目录下的模拟数据,现在需要调用的是线上数据。假如我们在本地启用了一个php的后台服务,地址为 http://localhost:80 打开config/index.js文件,我们上次修改的 dev 开发模式,修改为: proxyTable: { '/api 阅读全文
posted @ 2020-03-27 20:11 JoeYoung 阅读(231) 评论(0) 推荐(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) 推荐(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) 推荐(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) 推荐(0) 编辑
Vue2.5 旅游项目实例21 详情页 对全局事件的解绑
摘要:上次在Header.vue中写了一个: activated () { window.addEventListener('scroll', this.handleScroll) }, 这个是对全局的 window 对象,所以会出现问题,不仅对这个组件,也对全局的组件都造成了影响。 解决办法: // 页 阅读全文
posted @ 2020-03-24 14:04 JoeYoung 阅读(206) 评论(0) 推荐(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) 推荐(0) 编辑

上一页 1 2 3 4 5 6 下一页