搭建Vue框架

建立脚手架

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

局部样式与全局样式

局部样式

<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();
});

美化滚动条

::-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 里写一些静态的样式即可。

组件库

Element UI
Vant
Vant Weapp
Ant（基于React UI 组件库）
Ant（基于Vue UI 组件库）

异步请求

参考我自己写过的一篇 -【 vue–封装axios】

跨域问题

跨域问题一般情况直接找后端解决了，你要是不好意思打扰他们的话，可以用 devServer 提供的 proxy 代理：

// vue.config.js
devServer: {
  proxy: {
    '/api': {
      target: 'http://47.100.186.132/your-path/api',
      ws: true,
      changeOrigin: true,
      pathRewrite: {
        '^/api': ''
      }
    }
  }
}

Vuex

内置一些功能，主要是对以下这些功能做了一些封装：

1. 用户信息管理（储存信息、对 token 进行操作等）
2. 登陆（调接口）
3. 菜单管理（储存路由信息，生成菜单，模糊查询等功能）
4. UA信息
5. 全屏操作
6. Loading
7. 日志管理（消息提醒、日志留存、日志上报）

State (opens new window)为单一状态树，在 state 中需要定义我们所需要管理的数组、对象、字符串等等，只有在这里定义了，在 vue 的组件中才能获取你定义的这个对象的状态。

1. 修改 state 中数据必须通过 mutations。
2. 每一个可能发生改变的 state 必须同步创建一条或多条用来改变它的 mutations。
3. 服务端获取的数据存放在 state 中，作为原始数据保留，不可变动。

Getters (opens new window)有点类似 vue.js 的计算属性，当我们需要从 store 的 state 中派生出一些状态，那么我们就需要使用 getters，getters 会接收 state 作为第一个参数，而且 getters 的返回值会根据它的依赖被缓存起来，只有 getters 中的依赖值（state 中的某个需要派生状态的值）发生改变的时候才会被重新计算。

1. 通过 getters 处理你需要得到的数据格式，而不是通过修改 state 原始数据。
2. 组件内不强制使用 mapGetters，因为你可能需要使用 getter 和 setter。
3. 改变 state 的唯一方法就是提交 mutations (opens new window)。
4. 组件内使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用。
5. 命名采用 大写字母 + 下划线 的规则。
6. 定义 CLEAR，以确保路由切换时可以初始化数据。

Actions

1. 页面重的数据接口尽量在 actions (opens new window)中调用。
2. 服务端返回的数据尽量不作处理，保留原始数据。
3. 获取到的数据必须通过调用 mutations 改变 state。

Modules

1. 通常情况下按照页面划分 modules (opens new window)。
2. 默认内置了 system 保证了脚手架的基础功能。
3. 每个页面模块或页面的子模块添加属性 namespaced: true。