摘要： 1、在 Modal.vue 里使用具名插槽，父子组件传值： <div class="md-content"> <div class="confirm-tips"> <!-- <p slot="message">你确认要删除此条数据吗?</p> --> <slot name="message"></s 阅读全文

摘要： npm install 在安装 npm 包时，有两种命令参数可以把它们的信息写入 package.json 文件一个是： --save || -S // 运行依赖（发布） 另一个是： –save-dev || -D //开发依赖（辅助） 区别是它们会把依赖包添加到package.json 文件 –s 阅读全文

摘要： 通过过滤器，修改商品数量，价格随之跟着变化。 1、先把 + - 添加点击事件： <a class="input-sub" @click="editCart('minus', item)">-</a> <a class="input-add" @click="editCart('add', item) 阅读全文

摘要： 1、新创建一个项目：freemall 2、安装依赖：axios、vue-axios 3、配置路由 import Vue from 'vue' import VueRouter from 'vue-router' import Cart from '../pages/Cart.vue' import 阅读全文

摘要： 项目上线 4、使用 pm2 管理应用 打开 app.js 文件，把上次的 https 的代码注释掉，还启用 http 的服务来演示。 打开一个命令行窗口，进入项目目录下，输入： node app.js 在浏览器输入：127.0.0.1 可以访问到该项目网站。 但是当我们把命令行窗口关闭后，项目网站就 阅读全文

摘要： 项目上线 3、配置 https 服务 为什么要启用 HTTPS 服务？ 1）传统的 HTTP 协议传输的数据都是明文，不安全 2）采用 HTTPS 协议对传输的数据进行了加密处理，可以防止数据被中间人窃取，使用更安全 申请 SSL 证书 (企业用的都是收费的，个人可以用免费的https://free 阅读全文

摘要： 项目上线 2、开启 gzip 配置 使用 gzip 可以减小文件体积，使传输速度更快。 可以通过服务器端使用 express 做 gzip 压缩，其配置如下： // 安装相应包 npm install compression -S// 导入包 const compression = require( 阅读全文

摘要： 项目上线 1、项目上线相关配置 创建 node 项目，并安装 express，通过 express 快速创建 web 服务器，将 vue 打包生产的 dist 文件夹，托管为静态资源即可，关键代码如下： const express = require('express') // 创建 web 服务器 阅读全文

摘要： 项目优化策略 8、路由懒加载 当打包构建项目时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。 具体需要三步： 1）安装 @babel/plugin-syntax-dynamic-impo 阅读全文

摘要： 项目优化策略 7、首页内容定制 不同的打包环境下，首页内容可能会有所不同，我们可以通过插件的方式进行定时，插件配置如下： chainWebpack: config => { config.when(process.env.NODE_ENV 'production', config =>{ confi 阅读全文

摘要： 项目优化策略 6、通过 CDN 优化 ElementUI 的打包 在资源列表中 js/chunk-vendors.4da6d812.js 这个文件后面还是有个惊叹号，说明体积还是大。 而在依赖项中的，element-ui 的 大小是 659.3kB。 虽然在开发阶段，我们启用了 element-ui 阅读全文

摘要： 项目优化策略 5、通过 externals 加载外部 CND 资源 默认情况下，通过 import 语法导入的第三方依赖包，最终会被打包合并到同一个文件中，从而导致打包成功后，单文件体积过大的问题。 为了解决上述问题，可以通过 webpack 的 externals 节点，来配置并加载外部的 CDN 阅读全文

摘要： 上次不小心删除了，这里补发下。 关于后台环境配置这里就不复述了，要开启 MySQL 数据库、包括后台接口服务的开启：vue_api_server 目录 1、打开终端窗口，输入： vue ui 打开可视化UI面板的 Vue 项目管理器。 2、点击创建，进入目录选择，选择你需要存放项目的路径，然后点击“ 阅读全文

摘要： 项目优化策略 4、通过chainWebpack自定义打包入口 代码示例如下： module.exports = { chainWebpack: config => { config.when(process.env.NODE_ENV 'production', config =>{ config.e 阅读全文

摘要： 项目优化策略 3、为开发模式与发布模式指定不同的打包入口 默认情况下，Vue项目的开发模式与发布模式，共用同一个打包的入口文件（即src/main.js）。为了将项目的开发过程与发布过程分离，我们可以为两种模式，各自指定打包的入口文件，即： 1）开发模式的入口文件为src/main-dev.js 2 阅读全文