随笔分类 - 前端歌谣-学习篇-vue2电商管理系统
摘要：根据官方文档示例，我们先展示测试数据。 Javascript <template> <div> <!-- 面包屑导航区域 --> <el-breadcrumb separator="/"> <el-breadcrumb-item :to="{ path: '/home' }">首页</el-brea
阅读全文
摘要：Using npm Js $ npm i -g npm $ npm i --save lodash _.cloneDeep(value) 使用 项目中使用 cloneDeep 需求：由于 addForm 中商品所属的分类数组 goods_cat在商品分类模块需要使用 v-model 进行双向绑定数组
阅读全文
摘要：通过 vue-ui 界面，可以安装我们所需要的依赖，或者使用下文 npm 或 yarn安装。 NPM Js npm install vue-quill-editor --save # or yarn add vue-quill-editor Mount with global Js import V
阅读全文
摘要：在 main.js 入口文件全局注册格式化时间的过滤器，代码如下所示： Javascript // 自定义格式化时间的全局过滤器 Vue.filter('dataFormat', function(originVal) { const dt = new Date(originVal) const y
阅读全文
摘要：安装新的依赖 vue-tabel-with-tree-grid vue-tabel-with-tree-grid 官方文档 安装完成后，在 main.js 入口文件内先导入 tree-tabel 然后全局注册组件 tree-tabel 页面中，我们使用了如下属性： data 确定我们的数据源，col
阅读全文
摘要：Javascript // 验证邮箱的规则 var checkEmail = (rule, value, cb) => { const regEmail = /^([a-zA-Z]|[0-9])(\w|-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/ if (regEmail.
阅读全文
摘要：通过增加 clearable 属性，我们的输入框就可以多一个 x，然后通过绑定 clear 事件，当我们进行清除 （即点击由 clearable 属性生成的清空按钮时触发)时，就会重新获取我们的用户列表，不再需要用户再次点击搜索按钮去获取了。
阅读全文
摘要：首先，在 switch 开关添加一个 change 事件，并且通过作用域插槽的形式，将该行数据作为参数传入，目的是为了后续的修改。 在函数内我们将传递过来的参数作为我们请求的参数，通过 put 方式修改我们的后台数据 。
阅读全文
摘要：项目需求：由于用户列表状态后台返回的是 true/false，无法进行渲染，而我们需要的是有一个Switch开关来控制我们的状态。添加一个template 模板后，此时就可以用 slot-scope 作用域插槽来获取我们数据列表中的每一行数据，具体如下： 最后，我们就可以得到如下效果图了：
阅读全文
摘要：为了让我们点击二级菜单时，会有一个激活效果，而且是保持状态，我们需要将利用 element-ui 菜单栏相关 default-active 属性，来让菜单保持激活。 由于每个二级菜单都有一个路由链接，不妨将路由路径 path 存储在 sessionStorage 中，具体做法就是给二级菜单绑定一个事
阅读全文
摘要：① 在服务器中安装 pm2：npm i pm2 -g ② 启动项目：pm2 start 脚本 --name 自定义名称 ③ 查看运行项目：pm2 ls ④ 重启项目：pm2 restart 自定义名称 ⑤ 停止项目：pm2 stop 自定义名称 ⑥ 删除项目：pm2 delete 自定义名称
阅读全文
摘要：为什么要启用 HTTPS 服务？ 传统的 HTTP 协议传输的数据都是明文，不安全 采用 HTTPS 协议对传输的数据进行了加密处理，可以防止数据被中间人窃取，使用更安全 申请 SSL 证书（https://freessl.org） 进入 https://freessl.cn/ 官网，输入要申请的域
阅读全文
摘要：通过 node 创建 web 服务器。 开启 gzip 配置。 配置 https 服务。 使用 pm2 管理应用。 通过 node 创建 web 服务器 创建 node 项目，并安装 express，通过 express 快速创建 web 服务器，将 vue 打包生成的 dist 文件夹，托管为静态
阅读全文
摘要：当打包构建项目时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。 具体需要 3 步： 安装 @babel/plugin-syntax-dynamic-import包。 在 babel.co
阅读全文
摘要：不同的打包环境下，首页内容可能会有所不同。我们可以通过插件的方式进行定制，插件配置如下： Javascript chainWebpack: config => { config.when(process.env.NODE_ENV 'production', config => { config.pl
阅读全文
摘要：在项目根目录创建名为 .prettierrc 的文件，增加如下代码： Css { "semi": false, "singleQuote": true } semi设置 false去掉分号，singleQuote 设置 true使用单引号。 此外，还可以禁用 function 处空格报错，增加如下代
阅读全文
摘要：首先，在 element.js 中导入弹框提示组件，但是它的配置与其它组件不一样，它需要进行全局挂载。 全局导入后，我们就可以在我们的登录组件 login.vue 中通过 this来访问弹框提示组件了。 测试一下，输入 admin 和 123456，此时就会提示输入成功。
阅读全文
摘要：主要函数如下： 在我们的 tabs 标签页添加一个 before-leave 函数 然后在 methods 中定义，根据第一个标签页的逻辑来阻止标签页的切换。
阅读全文
摘要：以下就是步骤条使用的核心代码，其中 active 绑定的是每一个 step 的下标，默认从 0 开始。其次，我们可以设置 aligin-center 属性来让我们的步骤条进行居中。el-step就是每一个步骤进度。 Javascript <!-- 步骤条区域 --> <el-steps :space
阅读全文
摘要：实现效果如下： 通过 v-if 的 boolean值来动态变化是否显示文本框还是 button 按钮。通过 v-model 双向绑定来实现文本框内容的监听。 由于每一行需要设置文本框的显示与隐藏，而且数据是共享的。我们需要通过 scope来获取每一行的值来进行绑定，不然的话，就会导致某个文本框显示了
阅读全文
