- 001-尚品汇-教程简介
- 002-尚品汇-vue-cli脚手架初始化项目
- 003-尚品汇-项目的其他配置
- 004-尚品汇-项目的路由分析
- 005-尚品汇-Header与Footer非路由组件完成
- 006-尚品汇-完成路由组件的搭建
- 007-尚品汇-路由元信息的使用
- 008-尚品汇-路由传递参数
- 009-尚品汇-路由传递参数相关面试题
- 010-尚品汇-重写push与replace方法
- 011-尚品汇-home首页组件拆分业务分析
- 012-尚品汇-TypeNav三级联动全局组件完成
- 013-尚品汇-Home首页拆分静态组件
- 补录视频-说明(接口等问题)
- 014-尚品汇-POSTMAN工具测试接口
- 015-尚品汇-axios二次封装
- 016-尚品汇-API接口统一管理
- 017-尚品汇-nprogress进度条的使用
- 018-尚品汇-vuex模块式开发
- 019-尚品汇-动态展示三级联动数据
- 020-尚品汇-完成三级联动动态背景颜色
- 021-尚品汇-通过JS控制二三级分类显示与隐藏
- 022-尚品汇-演示卡顿现象引入防抖与节流
- 023-尚品汇-函数防抖的理解
- 024-尚品汇-函数节流的理解
- 025-尚品汇-三级联动节流
- 026-尚品汇-三级联动路由跳转的分析
- 027-尚品汇-完成三级联动的路由跳转与传递参数业务
- 028-尚品汇-复习
- 029-尚品汇-Search模块中商品分类与过渡动画
- 030-尚品汇-typeNav商品分类列表的优化
- 031-尚品汇-合并参数
- 032-尚品汇-mockjs模拟数据
- 033-尚品汇-获取Banner轮播图的数据
- 034-尚品汇-swiper基本使用
- 035-尚品汇-Banner实现轮播图第一种解决方案
- 036-尚品汇-轮播图通过watch+nectTick解决问题
- 037-尚品汇-获取floor组件mock数据‘
- 038-尚品汇-动态展示Floor组件
- 039-尚品汇-共用组件Carsouel
- 040-尚品汇-Search模块的静态组件
- 041-尚品汇-search模块vuex操作
- 042-尚品汇-search模块中动态展示产品列表
- 043-尚品汇-Search模块根据不同的参数获取数据展示
- 044-尚品汇-Search模块中子组件动态开发
- 045-尚品汇-监听路由的变化再次发请求获取数据
- 046-商品柜-面包屑处理分类的操作
- 047-尚品汇-面包屑处理关键字
- 048-尚品汇-面包屑处理品牌信息
- 049-尚品汇-平台售卖属性的操作
- 050-尚品汇-排序操作上
- 051-尚品汇-排序操作下
- 052-尚品汇-分页器静态组件
- 053-尚品汇-排序复习
- 054-尚品汇-分页功能分析
- 055-尚品汇-分页器起始与结束数字计算
- 056-山硅谷-尚品汇-分页器动态展示
- 057-尚品汇-分页器完成
- 058-尚品汇-分页器添加类名
- 059-尚品汇-滚动行为
- 060-尚品汇-产品详情数据获取
- 061-尚品汇-产品详情展示动态数据
- 062-尚品汇-分页器复习-裁剪
- 063-尚品汇-zoom放大镜展示数据-裁剪
- 064-尚品汇-detail路由组件展示商品售卖属性-裁剪
- 065-尚品汇-产品售卖属性值排他操作-裁剪
- 066-尚品汇-放大镜操作上
- 067-尚品汇-放大镜结束‘
- 068-尚品汇-购买产品个数的操作
- 069-尚品汇-加入购物车
- 070-尚品汇-加入购物车成功与失败的判断
- 071-尚品汇-加入购物车操作
- 072-尚品汇-路由传递参数结合会话存储
- 073-尚品汇-购物车静态组件与修改
- 074-尚品汇-uuid游客身份获取购物车数据
- 075-尚品汇-购物车动态展示数据
- 076-尚品汇-处理产品数量
- 077-尚品汇-修改购物车产品的数量完成
- 078-尚品汇-删除购物车产品的操作
- 079-尚品汇-修改产品状态
- 080-尚品汇-复习
- 081-尚品汇-删除全部选中的商品
- 082-尚品汇-全部产品的勾选状态修改
- 083-尚品汇-登录注册静态组件
- 084-尚品汇-注册业务上
- 085-尚品汇-注册业务下
- 086-尚品汇-登录业务(token)
- 087-尚品汇-用户登录携带token获取用户信息
- 088-尚品汇-登录业务中讲解存在问题‘
- 089-尚品汇-退出登录
- 090-尚品汇-导航守卫理解
- 091-尚品汇-导航守卫的判断
- 092-尚品汇-导航守卫用户登录操作
- 093-尚品汇-trade静态组件
- 094-尚品汇-获取交易页数据
- 095-尚品汇-用户地址信息的展示
- 096-商品汇-交易页面完成
- 097-尚品汇-提交订单
- 098-尚品汇-获取订单号与展示支付信息
- 099-尚品汇-支付页面中使用ElementUI以及按需引入
- 100-尚品汇-微信支付业务上
- 101-尚品汇-微信支付下、
- 102-尚品汇-个人中心二级路由搭建
- 103-尚品汇-我的订单
- 104-尚品汇-未登录的导航守卫判断
- 105-尚品汇-用户登录(路由独享与组件内守卫)
- 106-尚品汇-图片懒加载
- 107-尚品汇-vee-validate表单验证使用
- 108-尚品汇-路由懒加载
- 109-尚品汇-处理map文件
- 110-尚品汇-购买服务器
- 111-尚品汇-安全组与xshell操作
- 112-尚品汇-nginx反向代理
- 001-组件通信-组件通信6种方式
- 002-组件通信-自定义事件深入
- 003-组件通信-v-model深入
- 004-组件通信-sync属性修饰符
- 005-组件通信-
- 006-组件通信-
- 007-组件通信-混入mixin
- 008-组件通信-作用域插槽
- 009-后台管理系统项目-后台管理系统项目简介
- 010-后台管理系统-后台管理系统模板介绍
- 011-后台管理系统-登录业务完成
- 012-后台管理系统-退出登录
- 013-后台管理系统-路由的搭建
- 014-后台管理系统-品牌管理静态组件
- 015-后台管理系统-品牌列表展示
- 016-后台管理系统-添加品牌与修改品牌静态完成
- 017-后台管理系统-添加品牌完成
- 018-后台管理系统-修改品牌完成
- 019-后台管理系统-品牌的表单验证(自定义校验规则)
- 020-后台管理系统-删除品牌操作
- 021-后台管理系统-商品管理之三级联动静态组件
- 022-后台管理系统-三级联动动态展示
- 023-后台管理系统-三级联动完成
- 024-后台管理系统-平台属性管理动态展示属性
- 025-后台管理系统-平台属性之添加属性与修改属性静态完成
- 026-后台管理系统-收集属性名的操作
- 027-后台管理-收集属性值操作
- 028-后台管理系统-解决返回按钮数据回显问题
- 029-后台管理系统-修改属性操作
- 030-后台管理系统-查看模式与修改模式切换
- 031-后台管理系统-查看模式与编辑模式注意事项
- 032-后台管理系统-修改属性的查看与编辑模式切换
- 033-后台管理系统-表单元素自动聚焦的实现
- 034-后台管理系统-删除属性值的操作
- 035-后台管理系统-保存操作
- 036-后台管理系统-按钮与三级联动的可操作性
- 037-后台管理系统-SPU管理模块业务介绍
- 038-后台管理系统-SPU管理模块静态
- 039-后台管理系统-动态展示SPU列表
- 040-后台管理系统-Spu管理内容的切换
- 041-后台管理系统-SpuForm静态组件完成
- 042-后台管理系统-SpuForm请求业务得分析
- 043-后台管理系统-获取SpuForm数据
- 044-后台管理系统-SpuForm组件数据展示与收集数据
- 045-后台管理系统-SpuForm销售属性的数据展示
- 046-后台管理系统-完成SpuForm照片墙数据的收集
- 047-后台管理系统-销售属性的添加的操作
- 048-后台管理系统-销售属性值展示与收集
- 049-后台管理系统-删除销售属性与属性值操作
- 050-后台管理系统-完成修改Spu的保存操作
- 051-后台管理系统-完成添加SPU的操作
- 052-后台管理系统-删除SPU的操作
- 053-后台管理系统-完成SKU静态组件
- 054-后台管理系统-获取SkuForm数据
- 055-后台管理系统-展示SKU与收集SKU的数据
- 056-后台管理系统-添加SKU图片列表数据的展示与收集
- 057-后台管理系统-完成添加SKU保存操作
- 058-后台管理系统-SKU列表的展示
- 059-后台管理系统-loading效果
- 060-后台管理系统-sku模块数据展示与分页功能
- 061-尚品汇-SKU上架与下架操作
- 062-后台管理系统-SKU详情查看完成
- 063-后台管理系统-深度选择器
- 064-后台管理系统-数据可视化简介
- 065-后台管理系统-canvas绘制线段
- 066-后台管理系统-canvas绘制矩形
- 067-后台管理系统-绘制圆形
- 068-后台管理系统-画布清除与绘制文字
- 069-后台管理系统-绘制柱状图
- 070-后台管理系统-svg基本使用
- 071-后台管理系统-echarts基本使用
- 072-上硅谷-后台管理系统-echarts展示多个图表
- 073-后台管理系统-一个容器显示多个图表
- 074-后台管理系统-echart中数据集dataset使用
- 075-后台管理系统-echarts内置组件使用
- 076-后台管理系统-echarts坐标体系
- 077-后台管理系统-Home首页Card静态组件
- 078-后台管理系统-折线图完成
- 079-后台管理系统-柱状图和进度条完成
- 080-后台管理系统-sale静态组件-上
- 081-后台管理系统-sale静态组件-中
- 082-后台管理系统-sale组件完毕
- 083-后台管理系统-observe静态组件
- 084-后台管理系统-动态展示mock数据
- 085-后台管理系统-权限管理模块介绍
- 086-后台管理系统-权限管理模块的串讲
- 087-后台管理系统-菜单&按钮权限
前端两个比较重要的框架就是 Vue 和 React 了,Vue 基本是属于必须技能了,就算是后端开发,也可以了解一下。
Vue 3 项目实战总结
作为今年前端圈中最大的新闻之一,vue 3 的正式版的发布引起了几乎所有前端 er 的围观。步入 2021 年,我开始在项目中使用 vue 3 进行开发。以下是我使用 vue 3 一个月后的一些经验总结以及看法。
开发环境方面
一般我们使用 vue 3 都是使用 vue 官方的脚手架新建项目,要么是 vue-cli 或者 vite。考虑到 vite 是新出的东西,兼容性方面还有待检测,于是我使用的是 vue-cli 来新建项目。
vue.config.js 的 externals 设置
作为一家小公司的前端工程师,我觉得 externals 这一个设置几乎是整个开发环境中最重要的东西。
首先简单介绍一下 externals 这个设置的作用。
Externals 是来自于 webpack 的配置项,主要作用是提供了「从输出的 bundle 中排除依赖」的方法。简单举个例子就是,假如有个几个项目都使用到了 axios,那么如果不使用 externals,每个项目都会打包一份 axios 到 ventor 中。使用了 externals 之后,可以把 axios 进行外部引入,而 axios 的库文件可以用第三方 cdn 或者放到统一的 cdn 服务器上面。
配置方法十分简单:
const externals = {
jquery: "jQuery",
};
module.exports = {
configureWebpack: (config) => {
Object.assign(config, {
externals,
});
},
};
这里要打开 jquery.min.js 的查看 jquery 暴露的全局名称,jquery 的是 jQuery,然后在 index.html 中使用 script 引入就可以了:
src="https://code.jquery.com/jquery-3.1.0.js"
integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
crossorigin="anonymous">
Externals 为什么如此重要,我认为有以下几个原因:
节省服务器空间,减少项目之间的代码重复
充分使用 cdn 服务器
减少开发过程中,编译的时间
开发过程中的模拟数据
模拟数据在前端开发中经常用到,在后端同事没有完成接口的时候,前端需要自己模拟后端返回数据,提高工作效率。
目前我接触到的模拟数据方法有几个:
Mock.js:
Mock.js 应该算最常用的模拟数据库了,通过简单配置即可模拟接口数据。优点在于配置方便快捷,功能相对齐全。缺点是维护 mock.js 的人不多,很多代码已经是几年前的代码
Postman:
Postman 中有自带 mock 的功能,配置也非常简单,而且不需要在项目中引入任何额外的库。而这个方法的问题是 Postman mock 的原理是把配置的接口上传到 postman 的服务器,很多公司的项目不希望自己的接口数据被别人知道,安全性不足 自建 json 文件:自己新建接口返回值对应的 json 文件,代码中判断是开发模式还是生产来切换。好处是所有的数据都能自己配置,不受其他库和平台的约束。不足是需要自己写代码,不够简便
最后一个是我一直在使用的方法,因为 vue cli 内部是使用 webpack dev server,而 webpack dev server 使用 express,利用 webpack 的 proxy 功能搭配上 express 可以自建一个 api 服务器,具体操作如下:
使用 before 调用内部 express 的 app 实例
const { setApi } = require('./mock/api');
// vue.config.js
devServer: {
open: process.platform === 'darwin',
host: '0.0.0.0',
port: 3000,
https: false,
disableHostCheck: true,
before: (app) => {
setApi(app)
}
}
使用 app 实例创建 api 服务器(可以加入 swagger 等等的库,增加 api 服务器的用户体验):
// ./mock/api.js
const swaggerUi = require("swagger-ui-express");
const submit = require("./submit");
const setApi = (app) => {
const apiData = {
api: [...cj, ...submit, ...question, ...vote],
};
const swaggerDocument = {
swagger: "2.0",
paths: {
"/pets": {},
},
};
apiData.api.forEach((api) => {
app[api.type](`/api${api.paths}`, (req, res) => {
res.json(api.responses);
});
swaggerDocument.paths[`/api${api.paths}`] = {
[api.type]: {
tags: [api.tags],
responses: {
[api.responses.statusCode]: {
description: `successful operation ${JSON.stringify(
api.responses
)}`,
},
},
},
};
});
app.use(
"/api/docs",
swaggerUi.serve,
swaggerUi.setup(swaggerDocument, {
swaggerOptions: {
validatorUrl: null,
},
})
);
};
module.exports = { setApi };
// ./mock/submit.js
module.exports = [{
type: "post",
paths: "/submit",
tags: "submit",
responses: {
statusCode: "200",
data: "",
msg: "提交成功!",
},
}
]
最终效果是请求 http://ip地址/api/接口名称 可以请求数据,请求 http://ip地址/api/docs ,可以看到自定义的接口文档
图片
模块导入
Vue 3 当中的模块导入,其实跟 vue 2 区别不大,但是因为 vue 3 使用了 typescript,所以涉及到 typescript 模块的一些知识。
搭配 externals 的模块导入
当我们使用前面说到的 externals 的时候,原则上来说我们不再需要去安装已经设置了 externals 的模块。正如上面的例子:
src="https://code.jquery.com/jquery-3.1.0.js"
integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
crossorigin="anonymous">
Script 引入了 jquery 之后,我们不需要再 npm i jquery。然而由于我们一般会使用 eslint 进行代码格式检验,如果我们不安装 jquery 的话,eslint 会报错。这个时候,使用 javascript 开发的话,我们需要配置一下 eslint 规则,会把 jquery 设置成 core-modules:
// .eslintrc.js
settings: {
'import/core-modules': ['jquery'],
}
但是如果是用 typescript 的话,设置了 core-modules 还不行,因为编辑器(vscode)没有找到对应的 d.ts 文件,所以就算 eslint 不报错,开发起来也没有 typescript 的提示。这时候,我的解决办法是,依旧使用 npm i 安装对应依赖的声明文件。如果库声明文件包含在库里面,则直接安装依赖。
这样处理虽然 node_modules 会变大,但是编译的时候 webpack 是不会把 node_modules 中的库打包进项目中。