Open mominger opened 4 years ago
按照图示各项,构建一个通用的,经过工程优化的脚手架
1.1 创建
//全局安装 vue-cli脚手架 npm install -g @vue/cli //创建项目 vue create vue-cli4-project
Default 比较单薄,选择 Manually select features手动预设
选择Babel、Router、Vuex、CSS Pre-processors、Linter / Formatter Babel ES6转ES5,项目必备 Router 路由,项目必备 Vuex store,项目必备 CSS Pre-processors 使用 sass/less/stylus 写样式必备 Linter / Formatter 负责代码规范,多人开发建议打开
选 2.x 3.x 有兼容问题。待release版本出来再考虑。
选择history模式
选择css预处理器
选择代码规范
选 lint on save 保存时检查,它会在命令行中报警. 默认需运行 npm run lint 修复代码格式 如果使用vscode,安装插件 ESLint,它会读取根目录下eslintrc.js 文件,保存时能自动格式化代码。 Lint and fix on commit 提交时自动修复。过于自动,应格式化后审查下比较好。
选 In dedicated config files 各功能在根目录下有专门的配置文件
保存预设模板,下次创建vue项目可以直接选此预设,无需再配置
npm / yarn 都可以,看公司习惯
等待依赖安装完成 vue.config.js需要手动创建 assets 目录会经过webpack编译;static不会,它直接导出
仅按项目脑图上 效率、性能、质量下的每小项阐述,不会增加更多内容 比如性能优化实际上有很多手段: 各级缓存、加载瀑布图....等都很重要,但本文不会涉及 核心是构建一个通用的,经过优化的脚手架
组件(模块)隔离: 适合简单业务 观察路由配置 / webpackChunkName: "about" / 是指将 code-splitting后的代码取名字,默认是自增整数0.js,1.js,2.js... 观察目录结构
组件(模块)隔离: 适合简单业务
2.1.2 路由 => (嵌入)模块路由 => 模块
模块隔离: 适合一般业务 路由仍集中放到一起 观察路由配置 路由入口文件
模块隔离: 适合一般业务 路由仍集中放到一起
路由入口文件
![router_2_conf_businessA](https://gitee.com/ttwb/MyPublic/raw/master/img/20200906173406.png) > 模块路由文件 > 模块businessA以 ES6的展开运算符(spread operator)形式注入
观察目录结构
看对应源码
2.1.3 路由 => (指向)模块路由 => 模块
模块完全隔离: 适合复杂业务 模块路由放入模块目录里 观察路由配置 路由入口文件
模块完全隔离: 适合复杂业务 模块路由放入模块目录里
模块路由文件 每个模块里配置一个单独的路由文件 观察目录结构
模块路由文件 每个模块里配置一个单独的路由文件
[看对应源码](https://github.com/mominger/vue-cli4-project/tree/complicated-module-seperate)
2.2.1 数据集中处理
项目通常只有用户+少部分数据,才需要跨页面组件或模块共享 所以一般采用将store各元素拆分,给项目统一提供 好处是一眼明白项目数据的复杂度
2.2.2 数据按模块处理
如果各模块大又复杂,需要共享的数据很多,应拆分成单独store,modules 导入
2.3.1
基于axios定义基础库 请求拦截: 注入token 鉴权 响应拦截: 通用异常码处理
2.3.2
在vue.config.js 设置本地跨域
2.3.3
定义各模块的请求文件
2.3.4
具体在组件里的用法
2.4.1
同步代码产生的异常会自动捕获 异步,如Promise产生的异常的,需手动vm.$throw抛出
2.5.1 请求鉴权
在2.3.1.1 图里通过axios的请求拦截,注入了token,然后在响应拦截里对异常码做了处理。 没有登录跳向登录 token过期,两种处理,一种也是直接跳向登录,另一种是将req状态缓存,先刷新token,再重新发起一次请求。
2.5.2 路由鉴权
路由拦截处理
登录页的处理
2.6.1 全局组件自动化注册
全局组件的定义方式
扫描全局组件自动注册,此文件会在入口main.js被引入 business-a-page-a/index.vue 有全局组件的测试
2.6.2 mixin抽取
mixin 可以抽取公共功能,再以组合模式注入组件。即指抽取组件的公共部分。但是它极容易难以维护,因为难以轻松判断它对组件的影响。 建议用mixin必须写好注释,且在非常必要才这么做。比如页面的'加载中'。 下面仅是技术上的用法举例: mixin抽取对store里token的读取(不推荐这么读store)
定义mixin 注入到组件
2.7.1
package.json里命令执行 编译脚本
按需加载模块脚本
2.8.1
根据各公司运维,各有不同。 如gitlab打标签,jekins 执行shell脚本拉源码->打包->部署->运行 如java tomcat运行,前端oss/obs,或容器化nginx+CDN
2.9.1
vue-cli3后,可直接在build加report,然后dist里浏览器打开report.html
分析图,下面还有一种使用webpack插件的方式 vsCode安装Import Cost插件,可以看到实时导入包的大小
2.9.2
使用webpack插件进行打包分析,推荐用这种,可控性更强
分析图 也可以在build时才打包分析,但是注意,webpack插件会影响shell脚本自动化部署。因为使用此插件,会让脚本无法判定打包结束。
2.10.1
在public/index.html 引入cdn包,然后webpack照此配置就可以
2.10.1.2 静态资源托管CDN
正常是通过部署到oss/obs,或nginx+cdn,即实现了全站CDN vue.config.js 也可以配置 publicPath 为cdn域名
2.11.1.1
通常我们只会在 nginx配置gzip压缩,即在服务器压缩 提前在打包时压缩为gzip,确实能省了服务器压缩所需的资源。个人认为无此必要 gzip是压缩如js/css等静态资源 webpack 安装 compression-webpack-plugin插件
Skeleton Screen是指页面数据加载完成前,给用户展示页面的大致结构(一般是灰色占位图),在拿到数据后,实际内容把它替换掉 它等同于加载控件,本质上页面加载过程中的过渡效果 避免造成网页长时间白屏
2.12.1 插件安装
下载page-skeleton-webpack-plugin 依赖 puppeteer(chromium)包比较慢容易失败,多试几次。也可以尝试用cnpm单独安装puppeteer
如图,修复插件不兼容的bug
npm运行后,在控制台通过toggleBar打开骨架屏预览界面
npm build后,在dist页面运行 http-server(需先安装) 为了http-server 运行后正常访问,将.env.production文件里 VUE_APP_PUBLIC_PATH = './'
如图,在无痕模式打开(避免缓存看不到效果),慢速3G,可以明显看到骨架图的加载效果
2.12.4
具体的使用方法参考 插件github地址 简单使用教程
PWA(Progressive Web App)是google推出的渐进式webap,或称为下一代webapp 它不影响有网站功能 目前国内在线上极少运用此项技术,vue官网使用了,脚手架也提供了支持 安卓手机支持得比较好,苹果不是完全支持 以笔者mac环境,运行vue官网简单介绍它运用后的效果
serviceWork 会设置缓存策略,比如是只读缓存,读缓存+更新数据,仅离线读缓存...等 它只支持采用fetch请求数据
目前仅了解此项技术就够了,因为离线访问,网络很差,在我国基本不存在。而且缓存设置max-age,以及chrome的自身缓存(memory/disk),都支持从本地读取数据
PC端调试工具chrome DevTools,抓包工具Charles(Mac/Window)、Fiddler(Window Mac(功能简略))都是常见的调试工具,不再赘述 与腾讯的vConsole,相比,eruda强大很多,比如能抓请求,能清空storage,有timeMing等等,推荐去手机端体验地址 远程调试:chii具备用户访问网页,数据传输到开发chrome devtool的功能。比如项目集成了此工具,然后在定位疑难bug时,用户扫带放开chii的二维码,启动远程调试。
PC端调试工具chrome DevTools,抓包工具Charles(Mac/Window)、Fiddler(Window Mac(功能简略))都是常见的调试工具,不再赘述
与腾讯的vConsole,相比,eruda强大很多,比如能抓请求,能清空storage,有timeMing等等,推荐去手机端体验地址
远程调试:chii具备用户访问网页,数据传输到开发chrome devtool的功能。比如项目集成了此工具,然后在定位疑难bug时,用户扫带放开chii的二维码,启动远程调试。
博文涉及的代码都在master分支里
Vue项目图解
1. 基于Vue-Cli 4搭建
1.1 创建
2. 工程优化
2.1 模块隔离
2.1.2 路由 => (嵌入)模块路由 => 模块
观察目录结构![catalog_two](https://gitee.com/ttwb/MyPublic/raw/master/img/20200907085257.png)
看对应源码
2.1.3 路由 => (指向)模块路由 => 模块
2.2 数据(vuex)组织
2.2.1 数据集中处理
2.2.2 数据按模块处理
看对应源码
2.3 网络请求
2.3.1
2.3.2
2.3.3
2.3.4
看对应源码
2.4 异常处理
2.4.1![err_one](https://gitee.com/ttwb/MyPublic/raw/master/img/20200907212727.png)
看对应源码
2.5 鉴权
2.5.1 请求鉴权
2.5.2 路由鉴权
看对应源码
2.6 组件优化
2.6.1 全局组件自动化注册
2.6.2 mixin抽取
看对应源码
2.7 按需编译
2.7.1
看对应源码
2.8 一键部署
2.8.1
2.9 打包分析
2.9.1
![report_analyse_cli3](https://gitee.com/ttwb/MyPublic/raw/master/img/20200908112021.png)
2.9.2
![report_analyse_plugin_1](https://gitee.com/ttwb/MyPublic/raw/master/img/20200908112941.png)
看对应源码
2.10 CDN化
2.10.1
2.10.1.2 静态资源托管CDN
看对应源码
2.11 gzip压缩
2.11.1.1
2.12 骨架屏
2.12.1 插件安装
![skeleton_plugin](https://gitee.com/ttwb/MyPublic/raw/master/img/20200908163537.png)
2.12.4
看对应源码
2.13 PWA
2.14 工具
博文涉及的代码都在master分支里
反馈与建议