ant vue 语言_基于Vue的前端架构，我做了这15点

1.分解需求

技术栈

• 考虑到后续招人和现有人员的技术栈，选择 Vue 作为框架。
• 公司主要业务是 GIS 和 BIM，通常开发一些中大型的系统，所以 vue-router 和 vuex 都是必不可少的。
• 放弃了 Element UI 选择了 Ant Design Vue（最近 Element 好像复活了，麻蛋）。
• 工具库选择 lodash。

建立脚手架

• 搭建 NPM 私服。
• 使用 Node 环境开发 CLI 工具，参考我自己写过的一篇 -【 搭建自己的脚手架—“优雅”生成前端工程】。
• 基于 @vue/cli 搭建基础的模板（大家都比较了解，节省开发时间，远胜于从零开始搭建）。
• 根据业务需求定义各种开发中可能用到的功能（组件库、状态管理、过滤器、指令、CSS内置变量、CSS Mixins、表单验证、工具函数等）。
• 性能优化，例如对 Ant Design Vue 组件库的优化。

开发规范

• 对代码风格、命名规则、目录结构进行统一规范。
• 静态资源的使用规范。
• 单元测试、提交线上测试规范。
• Git 提交记录和多人协作规范。

2.样式

CSS 预处理器的选择

• Sass/Scss ✅
• Less ✅
• Stylus ⭕

为什么选择了两个？因为公司团队跟倾向于使用 scss 开发，less 是为了覆盖 ant design vue 的样式，stylus 只有我自己喜欢这种风格。

局部样式与全局样式

局部样式

一般都是使用 scoped 方案：

<style lang="scss" scoped>
  ...
</style>

全局样式

全局样式 目录：@/styles

variable.scss: 全局变量管理 mixins.scss: 全局 Mixins 管理 global.scss: 全局样式

其中 variable.scss 和 mixins.scss 会优先于 global.css 加载，并且可以不通过 import 的方式在项目中任何位置使用这些变量和 mixins。

// vue.config.js
module.exports = {
    
  css: {
    
    loaderOptions: {
    
      sass: {
    
        prependData: `
        @import '@/styles/variable.scss';
        @import '@/styles/mixins.scss';
        `,
      },
    },
  },
}

体验优化

页面载入进度条

使用 nprogress 对路由跳转时做一个伪进度条，这样做在网络不好的情况下可以让用户知道页面已经在加载了：

import NProgress from 'nprogress';

router.beforeEach(() => {
    
  NProgress.start();
});

router.afterEach(() => {
    
  NProgress.done();
});

美化滚动条

一直用 Mac 做前端，突然发现同事的 Windows 上出现了十分丑陋的滚动条，为了保持一致：

::-webkit-scrollbar {
    
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
    
  width: 6px;
  background: rgba(#101F1C, 0.1);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

::-webkit-scrollbar-thumb {
    
  background-color: rgba(#101F1C, 0.5);
  background-clip: padding-box;
  min-height: 28px;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

::-webkit-scrollbar-thumb:hover {
    
  background-color: rgba(#101F1C, 1);
}

静态资源加载页面

首次加载页面时，会产生大量的白屏时间，这时做一个 loading 效果看起来会很友好，其实很简单，直接在 public/index.html 里写一些静态的样式即可。

移动端 100vh 问题

在移动端使用 100vh 时，发现在 Chrome、Safari 浏览器中，因为浏览器栏和一些导航栏、链接栏导致不一样的呈现：

你以为的 100vh === 视口高度

实际上 100vh === 视口高度 + 浏览器工具栏（地址栏等等）的高度

解决方案

安装 vh-check npm install vh-check --save

import vhCheck from 'vh-check';
vhCheck('browser-address-bar');

定义一个 CSS Mixin

@mixin vh($height: 100vh) {
    
  height: $height;
  height: calc(#{
    $height} - var(--browser-address-bar, 0px));
}

之后就是哪里不会点哪里。

3.组件库

因为 Element UI 长期没更新，并且之前使用过 React 的 Ant Design（重点），所以组件库选择了Ant Design Vue。

覆盖 Ant Design Vue 样式

设计师眼中的 Ant Design === '丑'（心酸）。

1.使用 .less 文件

Ant Design Vue 的样式使用了 Less 作为开发语言，并定义了一系列全局/组件的样式变量，所以需要安装了 less、less-loader，在 @/styles/antd-theme.less 可以覆盖默认样式。

优点是：

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

缺点是：

必须引入 @import '~ant-design-vue/dist/antd.less'; ，引入后会将所有的组件样式全部引入，导致打包后的 css 体积达到 500kb 左右。

2.使用 JavaScript 对象

通过 JavaScript 对象的方式可以修改内置变量，需要对 Less 进行配置：

// vue.config.js
const modifyVars = require('./src/styles/antdTheme.js');

module.exports = {
    
  css: {
    
    loaderOptions: {
    
      less: {
    
        lessOptions: {
    
          javascriptEnabled: true,
          modifyVars,
        },
      },
    },
  },
}

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

// babel.config.js
module.exports = {
    
  presets: [
    '@vue/cli-plugin-babel/preset',
  ],
  plugins: [
    [
      'import