vue是什么软件 基于Vue的前端架构，我总结15点经验

1.分解需求

技术栈

考虑到后续招聘的技术栈和现有人员，选择Vue作为框架。

公司的主要业务是GIS和BIM，通常开发一些大中型系统，所以vue-router和vuex必不可少。

元素UI被放弃，选择了Ant Design Vue。

在工具库中选择lodash。

搭建脚手架

建立NPM私人服务。

使用节点环境开发命令行界面工具，参考我自己写的一篇文章-。

基于@vue/cli的模板。

根据业务需求定义开发中可能用到的各种功能。

性能优化，比如Ant Design Vue组件库的优化。

开发规范

统一和规范代码样式、命名规则和目录结构。

静态资源的使用规范。

单元测试并提交在线测试规范。

Git提交记录和多人协作规范。

2.风格

CSS预处理器的选择

sass/Scs

较少的

唱针

你为什么选择两个？因为公司团队倾向于使用SCS进行开发，较少是覆盖ant design vue的风格，手写笔只喜欢这种风格。

本地风格和全球风格

地方风格

通常使用限定范围的方案:

全球风格

全局样式目录:style

variable . scss:global variable management Mixins . scss:global mixins management global . scss:global style

其中，variable.scss和mixinss.scss在global.css之前加载，这些变量和mixin不需要导入就可以在项目中的任何地方使用。

体验优化

页面加载进度条

使用NP progress在路由跳转时制作一个伪进度条，这样用户就可以在网络不好的时候知道页面已经加载了:

美化滚动条

一直用Mac做前端，突然发现同事的Windows上出现了一个非常难看的滚动条。为了保持一致:

静态资源加载页面

第一次加载页面时，会有很多白屏时间。这时候做个加载效果看起来会很友好，其实很简单。用public/index.html写一些静态样式就可以了

移动终端的VH问题100vh

在移动端使用100vh时，发现在Chrome和Safari浏览器中，浏览器栏、部分导航栏和链接栏会导致不同的演示:

你认为100vh ===视口高度是多少

实际上100vh ===视口高度+浏览器工具栏高度

解决办法

安装VH-检查

定义一个CSS混合

之后就没地方点了。

3.组件库

Element UI很久没有更新了，之前使用过React的Ant Design，所以组件库中选择了Ant Design Vue。

覆盖蚂蚁设计风格

设计师眼中的蚂蚁设计= = '丑'。

1.使用。较少文件

Ant Design Vue样式使用Less作为开发语言，定义了一系列全局/组件样式变量，因此需要安装越来越少的loader来覆盖默认样式。

优点是:

方便快捷，可以修改类，覆盖默认变量。

缺点是:

必须导入。导入后会导入所有组件样式，导致打包的css体积约为500kb。

2.使用JavaScript对象

内置变量可以用JavaScript对象修改，需要配置的更少:

这一步可以继续优化，Ant Design Vue的组件样式可以通过babel-plugin-import按需加载:

优点是:

可以根据需要导入，打包的CSS卷取决于你引用了多少组件。

缺点是:

类不能用于样式重写。

杀死无用的图标

Ant Design Vue一次性引入所有图标，使得图标打包后的体积高达几百kb。这些图标大部分不会被设计师采用，所以有些图标应该被扼杀:

创建一个图标. js来管理Ant Design Vue图标。这里，以加载图标为例:

你怎么知道你想加载的图标在哪里？

目录@ant-design/icons/lib中有三种图标，分别是填充、轮廓和双音。内部文件不是svg格式，而是js和ts格式，这就是为什么我们可以这样引入图标。

求解瞬间多语言

解决了这个问题，蚂蚁设计Vue还是很大的。这是因为矩在Ant Design Vue中强烈依赖于这个插件，所以使用webpack插件来减少封装量。这里我们只保留zh-cn语言包:

有些组件需要在页面中引用

比如Ant Design Vue中一些体积较大的组件，应该根据业务需求加载到页面中，尽量保证第一屏的加载速度:

4.静态资源和图标

静态资源

所有的静态资源文件都会上传到阿里巴巴云OSS，所以会区分环境变量。

和的属性分别配置有本地静态资源服务器地址和在线操作系统地址。

本地静态资源服务器是由pm2+http-server创建的，设计人员可以直接剪切并扔进去。

自动注册Svg图标

在日常开发中，总会有大量的图标需要使用。在这里，我们直接选择使用SVG图标。但是每次使用的时候通过路径找到这个图标不是很麻烦吗？

以下是我想要的:

最后，它需要打包后组合成一个雪碧地图。

首先需要自动注册文件夹下的svg图标，需要设置webpack和svg-sprite-loader，所有文件打包成svg-sprite。

编写一个全球通用的Vue组件:

@/components/m-svg/index.vue

参数名

类型:字符串

默认值:null

描述:放置在文件夹下的文件名

风格

图标的大小可以通过宽度+高度属性来更改。

通过更改字体大小属性，宽度和高度= font-zise * 1.4

5.异步请求

封装Axios

Axios封装在路径下，包括请求参数、请求头、错误消息、请求拦截器、响应拦截器、统一错误处理、baseURL设置等。

别废话，直接粘贴代码:

用VUE_APP_BASE_URL来区分在线和开发环境的API地址。

代码起着关键作用，比如令牌过期时的验证。

一个名为sotre的包被用作存储令牌的本地存储工具。

跨域问题

跨域问题通常由后端直接解决。如果不好意思打扰他们，可以使用devServer提供的代理:

模拟数据

很常见的一种情况，后端接口不出来，前端盯着。

mock数据函数基于mock.js开发(打开新窗口)，通过webpack自动加载Mock配置文件。

规则

所有模拟配置文件都应该放在路径中。

在内部，可以建立与业务相关的文件夹，通过分类来存储配置文件。

所有配置文件都应根据的命名标准创建。

使用ES6模块或阵列导出配置文件。

入口文件

样本模板

6.选择途径

布局

布局暂时分为三类:

框架:通常需要登录或授权认证的路由。

框架输出:不需要动态确定权限的路由，如登录页面或常规页面。

错误页面:例如404。

权限验证

通过获取当前用户权限比较路由表，生成当前用户权限可访问的路由表，并通过router.addRoutes动态挂载到路由器上

确定页面是否需要登录状态，必要时跳转到/user/login

如果令牌不在本地存储中，请跳转到/user/login

如果令牌存在，用户信息不存在，则自动调用vuex '/system/user/getInfo '

在路由中，集成了权限验证功能。当您需要为页面添加权限时，请在“元:

作家（author的简写）

类型:布尔值

注意:当身份验证为真时，此页面需要验证登录权限，这仅对框架in路由有效。

许可

类型:对象

描述:权限每个键对应权限功能的验证。当key的值为true时，表示它有权限。如果key为false，可以用指令隐藏对应的DOM。

在此粘贴路由跳转时的权限验证代码:

页面开发

根据业务需求，按照路由层次在视图中创建相应的页面组件，以文件夹的形式创建，并在文件夹中创建index.vue文件作为页面的入口文件。

页面中的组件:在页面文件夹下创建一个组件文件夹，并在其中创建相应的组件文件。如果是复杂的组件，请以文件夹的形式创建该组件。

工具模块:高度抽象的工具模块。js文件应该在@/src/libs中创建。

7.结构优化

包分析工具

建完代码，什么东西占了这么多空？直观猜测或者使用webpack-bundle-analyzer。

打开G

是的，在这句话里，后端就得支持你。gz文件，而你只需要坐着等老板来夸:

路由延迟加载

这一块@vue/cli已经得到了帮助，但是我们需要知道它的原理以及如何配置它。

添加评论webpackChunkName是很有必要的，至少在你打包之后，你就知道哪个页面变臭变大了。

预载&。预取

不知道这两个函数的@vue/cli补课，对你处理加载性能很有帮助。

8.测试框架

直接使用官方的Vue Test Utils，可以测试组件，很不错。

编写单元测试在团队中实际上很难推进。不知道你怎么想的。

9.组件库

对于很多第三方工具，我坚持认为二次打包成vue插件不需要花费太多的开发成本，但是可以让你在后续的开发中更加灵活。

我用vue插件打包了以下库，并将它们提交给npm私有服务:

数字动画

代码高亮显示

大文件上传需要后端配合

图片预览

Excel导入和导出

富文本编辑器

减价编辑器

代码编辑器

如果你有兴趣上传大文件，可以留言。我会单独进行，稍后再详细写这篇文章。

10.状态管理

内置一些功能，主要打包以下功能:

用户信息管理

登陆

菜单管理

普遍获得信息

全屏操作

装货

日志管理

11.过滤器

Filter是Vue提供的一个非常有用的功能。听说vue3没了。

我写了几个常用的过滤器:

日期时间

剩余时间

环境敏感链接

文件大小

数字量

浮点精度

12.说明

自定义说明非常有用:

组件权限验证

文本复制

快捷键绑定

滚动到指定位置

图片延迟加载

焦点

13.开发规格

ESLint

无论是多人合作还是单个项目，代码规范都非常重要。这样做既能很大程度上避免基本语法错误，又能保证代码的可读性。

这里我们使用Airbnb JavaScript风格指南。

这套规格给我的感觉就是很严！

CSS规范

降低选择器的复杂性

浏览器读取选择器，遵循从选择器右侧读取到左侧的原则。

求所有p元素。

找出结果1中的元素是否有包含类名文本的父元素

找出结果2中的元素是否有id为block的父元素

选择器优先级

内嵌>:标识选择器>:类别选择器>:标签选择器

选择器越短越好。

尽量使用高优先级的选择器，比如ID和类选择器。

避免使用通配符*。

使用flexbox

在早期的CSS布局中，我们可以对元素实现绝对定位、相对定位或者浮动定位。现在，我们有了一个新的布局，flexbox，它比早期的布局有一个优势，就是性能更好。但是flexbox兼容性还是有一些问题，不是所有的浏览器都支持，所以要慎重使用。浏览器的兼容性:

Chrome 29+

Firefox 28+

Internet Explorer 11

Opera 17+

Safari 6.1+(前缀为-webkit-)

Android 4.4+

iOS 7.1+(前缀为-webkit-)

动画性能优化

在CSS中，变换和不透明这两个属性的变化并不触发重排和重绘，它们是合成器可以独立处理的属性。

属性值

当数值为0到1之间的小数时，建议省略0的整数部分。

长度为0时建议省略单位。

不建议使用命名颜色值。

建议当一个元素需要被支撑以包含内部浮动元素时，clearfix应该通过将clear设置为伪类或者触发BFC来完成。尽量不要添加空标签。

除了公共风格，尽量不要在业务代码中使用！重要.

建议z-index分层管理文档流外绝对定位元素的可视化层次关系。

字体排版

字体大小应不小于12px。

字体粗细属性建议用数字描述。

行高定义文本段落时，应使用数值。

Vue代码规范

传统的

在组件中使用数据属性时(除了new Vue之外的任何地方)，其值必须是返回对象的函数。

道具的定义要尽可能详细，至少要明确其类型。

布尔类型的属性，如果为真，直接写属性值。

不要对计算中的变量进行操作。

父组件和子组件之间的通信应该优先于此。$parent或通过道具和事件更改道具。

为了维护内部组件及其子树的状态，键必须始终与组件上的v-for一起使用。

V-if和v-for不能同时使用

尽量不要在原型上挂公共方法。它们可以写在utils文件或mixin文件中。不要向全球注册企业公共组件。

请勿在vue原型上安装任何第三方插件。

通用性强的方法应该封装在libs、全局组件或指令集中。

设置组件样式的范围。

尽可能使用说明缩写。

状态管理

状态(打开新窗口)是一个单一的状态树。在State中，我们需要定义数组、对象、字符串等。我们需要管理。只有在这里定义了，才能得到你在vue的组件里定义的这个对象的状态。

被修改的数据必须通过。

必须同步每个可能的更改，以创建一个或多个项目来更改它。

服务器获得的数据存储在中，该数据作为原始数据保留，不能更改。

getter(打开新窗口)有点类似于vue.js的计算属性，当我们需要从存储状态中导出一些状态时，我们需要使用getter，它会接收状态作为第一个参数，getter的返回值会根据其依赖关系进行缓存，只有当getter中的依赖值发生变化时才会重新计算。

通过处理您需要的数据格式，而不是修改原始数据。

它在组件中不是强制的，因为您可能需要使用和。

更改的唯一方法是提交更改(打开新窗口)。

组件中使用辅助函数将组件中的映射为调用。

命名采用+的规则。

定义为确保在交换路由时可以初始化数据。

行动

页面繁重的数据接口应该尽可能在动作中调用(打开新窗口)。

服务器返回的数据尽量不要处理，保留原始数据。

必须通过调用来更改获取的数据。

模块

通常，模块(打开新窗口)根据页面进行划分。

默认情况下，脚手架的基本功能是内置的。

向页面的每个页面模块或子模块添加属性。

14.完整详细的使用文件

无论是函数还是构件库或者其他工具，都需要完善的文档作为参考。即使是车轮的建造者，也忍不住在时间长了之后会忘记很多细节。

这里我用vuepress构建文档，方便快捷。

参考

15.Git多人协作流程

该公司使用内部构建的GitLab托管代码

根仓库

项目开始时，项目经理构建最原始的仓库，称为根仓库。

源仓库有一个功能:

总结参与项目的每个开发者的代码。

存储趋于稳定和可发布的代码。

向主分支提交合并请求可以触发测试环境构建。

源仓库是受保护的，开发者不能直接开发。

开发商仓库

任何开发人员都无权直接操作根仓库。源仓库建立后，每个开发人员需要做的就是把源仓库的一个Fork作为自己日常开发的仓库。

每个开发者Fork的仓库是完全独立的，互不干扰。

每个开发人员将代码提交给自己的仓库。开发工作完成后，开发人员可以向源仓库发送一个Pull Request，本地仓库首先合并源仓库来解决冲突。

发起mergerrequest请求管理员将他们自己的代码合并到主仓库或源仓库的其他分支中。

Git过程

前端项目将在仓库下创建分支，用于提取和合并代码。如果有多个不同的测试环境，将根据测试环境创建分支。

在本地仓库中创建您的分支机构和其他职能分支机构。

在开发过程中，不允许直接在分行上开发，新建分行进行开发。

规范详细的写作，建议使用工具投稿。

完成开发后，将相应的分支合并到自己仓库的分支中。

分支到你自己的远程仓库。

提交给仓库分公司。

提醒前端负责人查看代码，解决冲突或使测试环境在线。

冲突解决后拉最新代码。