Vue企业级优雅实战-03-全局设置

2020-08-26 本文已影响0人程序员搞艺术

（后续的文章公众号会提前一周更新，欢迎关注文末的微信公众号：程序员搞艺术）

本文包括如下几个部分：

初始化环境变量文件
JS 配置文件初始化：如是否开启 Mock 数据、加载本地菜单、URL 请求路径等；
国际化文件初始化：初始化国际化文件的结构；
整合 Element UI：将 Element UI 添加到工程中；
全局样式初始化：初始化全局样式、通用样式。

1 切换新分支

1.1 查看分支

1、仅查看本地分支：

git branch

本地分支信息：

s-MacBook-Pro dscloudy-admin-single % git branch                   
* master

2、查看本地和远程分支：

git branch -a

显示信息如下：

-MacBook-Pro dscloudy-admin-single % git branch -a
* master
  remotes/gitee_origin/master
  remotes/github_origin/master

3、仅查看远程分支：

git branch -r

显示信息如下：

-MacBook-Pro dscloudy-admin-single % git branch -r
  gitee_origin/master
  github_origin/master

1.2 开启本地新分支

当前本地只有一个 master 分支，现在基于这个分支，开启一个新分支 01_GlobalInit (全局初始化)。待本文结束后，再将其合并到 master 分支上，并将新分支 01_GlobalInit 和 master 都推送到 Gitee 和 GitHub。

切换新分支的命令：

git checkout -b 01_GlobalInit

再执行 git branch 命令，查看本地分支，显示：

-MacBook-Pro dscloudy-admin-single % git branch
* 01_GlobalInit
  master

* 表示当前位于哪个分支。

2 初始化环境变量文件

在 package.json 的 scripts 节点中，配置了 serve 与 build ，默认情况下，serve 对应模式 development, build 对应 模式 production。咱可以自定义模式，每个模式对应一套环境。在高逼格的开发团队中，通常会有四套环境：

开发环境 dev
sit
uat
生产环境 prod

由于每套环境对应的请求路径或其他配置不同，故每套环境可对应各自的环境变量文件。此处先简化为 dev 环境和 sit 环境。以后上线时如果有 uat 与 prod 环境，操作完全一样，复制环境变量文件并修改配置即可。

2.1 创建环境变量文件

在项目的根目录（与 src 平级），创建 dev 模式的环境变量文件，文件名为： .env.dev，里面的内容：

NODE_ENV = dev
VUE_APP_URL_GATEWAY = "http://dev-gateway"

在同样的位置，继续创建 sit 默认的环境变量文件，文件名为：env.sit，里面的内容：

NODE_ENV = sit
VUE_APP_URL_GATEWAY = "http://sit-gateway"

（上面的 Gateway 并不是真实的，仅此处演示环境变量使用。后面会替换为真实路径）

2.2 修改 package.json 脚本

1、修改 scripts 中的 serve 命令，修改为：

"serve": "vue-cli-service serve --mode dev",

2、添加 scripts 命令：

"serve_sit": "vue-cli-service serve --mode sit",

2.3 测试环境变量

1、在 main.js 中，测试环境变量：

console.log(process.env)

（测试完后记得自己删除这个语句）

2、点击按钮启动应用（npm run serve），刷新页面，控制台打印：

{NODE_ENV: "dev", VUE_APP_URL_GATEWAY: "http://dev-gateway", BASE_URL: "/"}

3、停止应用后，执行命令 npm run serve_sit，刷新页面，控制台打印：

{NODE_ENV: "sit", VUE_APP_URL_GATEWAY: "http://sit-gateway", BASE_URL: "/"}

测试发现已经完美通过环境变量文件在不同模式下配置不同变量。需要注意的是，自己定义的变量，必须以 VUE_APP_ 开头，否则无法获取到对应的值。

3 JS 配置文件

在 config/ 目录下创建两个文件： index.js, urls.js。

src
|-- config
        |-- index.js
        |-- urls.js
|-- ...

3.1 config/index.js

index.js 存放全局的配置，如是否开启 Mock 请求、是否使用本地 Mock 菜单、分页请求默认每页的大小等，代码如下：

/**
 * 全局配置文件
 */
const config = {
  /**
   * 是否使用 Mock 请求
   */
  isMock: true,

  /**
   * 是否使用本地 Mock 菜单
   */
  isMockMenu: false,

  /**
   * 网络请求的超时时间
   */
  timeout: 30 * 1000,

  /**
   * 请求的 host （联调时方便直连后端每个微服务）
   */
  host: {
    core: `${process.env.VUE_APP_URL_GATEWAY}/core`, // 核心模块
    demo: `${process.env.VUE_APP_URL_GATEWAY}/demo`, // 演示模块
    system: `${process.env.VUE_APP_URL_GATEWAY}/system` // 系统管理模块
  },

  /**
   * 路由的白名单
   */
  whiteList: []
}

export default config

3.2 config/urls.js

import config from '@/config/index'

/**
 * 系统所有请求的请求路径
 * @type {{core: {}}}
 */
const urls = {
  /**
   * 核心模块
   */
  core: {
    test: `${config.host.core}/test`
  },

  /**
   * 演示模块
   */
  demo: {
    test: `${config.host.demo}/test`
  },

  /**
   * 系统管理模块
   */
  system: {
    test: `${config.host.system}/test`
  }
}

export default urls

3.3 测试

依然在 main.js 进行测试：

import urls from '@/config/urls'
....
console.log(urls.core.test)

刷新页面，可以看见浏览器的输出：

http://dev-gateway/core/test

4 国际化配置

4.1 添加依赖

vue 提供了 vue-i18n 依赖来支撑国际化的实现。用户可以手动切换语言 locale, locale 信息存储在 cookie 中。首先为项目分别添加 vue-i18n 和 js-cookie 依赖：

npm install vue-i18n --save
npm install js-cookie --save

4.2 添加语言文件

在 src/i18n 目录下，分别创建 en.js 和 zh.js，分别存放英文和中文：

zh.js ：

export default {
  route: {
    test: '测试'
  },
  valid: {
    notNull: ' 不能为空',
    minLength: ' 最小长度是 ',
    maxLength: ' 最大长度是 ',
    lengthIs: ' 长度必须是 '
  },
  icon: {
    changeLanguage: '切换语言',
    errorLog: '错误日志',
    screenFull: '全屏查看',
    screenNormal: '退出全屏'
  },
  tags: {
    closeCurrent: '关闭当前',
    closeOther: '关闭其他',
    closeAll: '关闭全部'
  },
  login: {
    pageTitle: '微服务微前端基础框架',
    loginTitle: '用户登录',
    usernamePlaceHolder: '请输入用户名',
    passwordPlaceHolder: '请输入密码',
    checkCodePlaceHolder: '请输入验证码',
    login: '登录',
    username: '用户名',
    password: '密码',
    checkCode: '验证码',
    loginError: '登录失败',
    userInfoError: '获取用户信息失败',
    noFunctionPermission: '该用户没有菜单权限'
  },
  home: {
    changePwd: '修改密码',
    logout: '退出系统',
    test: '测试'
  }
}

复制 zh.js 的内容到 en.js，将里面的中文文本都修改为英文文本：

export default {
  route: {
    test: 'test'
  },
  valid: {
    notNull: ' Not Blank',
    minLength: ' min length is ',
    maxLength: ' max length is ',
    lengthIs: ' length must '
  },
  icon: {
    changeLanguage: 'Change Language',
    errorLog: 'View Error Logs',
    screenFull: 'View Full Screen',
    screenNormal: 'Exit Full Screen'
  },
  tags: {
    closeCurrent: 'close current tab',
    closeOther: 'close other tabs',
    closeAll: 'close all tabs'
  },
  login: {
    pageTitle: 'Member System Platform',
    loginTitle: 'MSP User Sign In',
    usernamePlaceHolder: 'Please input username',
    passwordPlaceHolder: 'Please input password',
    checkCodePlaceHolder: 'Please input check code',
    login: 'SIGN IN',
    username: 'Username',
    password: 'Password',
    checkCode: 'Check Code',
    loginError: 'Sign Error',
    userInfoError: 'Get User Info Error',
    noFunctionPermission: 'the account has no function permission'
  },
  home: {
    changePwd: 'Change Password',
    logout: 'Sign Out',
    test: 'test'
  }
}

后续不断往这两个文件中扩充文本。国际化的内容，也可以分散在各个模块中，然后在此处引入。

4.3 添加国际化的入口文件

在 src/i18n/ 下创建 index.js，该文件用来配置 i18n。

src/i18n/index.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import cookie from 'js-cookie'
import enLocale from './en'
import zhLocale from './zh'

Vue.use(VueI18n)

const messages = {
  en: {
    ...enLocale
  },
  zh: {
    ...zhLocale
  }
}

/**
 * 获取浏览器的语言
 */
const getBrowserLang = function () {
  const browserLang = navigator.language ? navigator.language : navigator.browserLanguage
  let defaultBrowserLang = ''
  if (browserLang.toLowerCase() === 'cn' ||
    browserLang.toLowerCase() === 'zh' ||
    browserLang.toLowerCase() === 'zh-cn') {
    defaultBrowserLang = 'zh'
  } else {
    defaultBrowserLang = 'en'
  }
  return defaultBrowserLang
}

/**
 * 获取语言。
 *
 * 如果用户设置过语言，使用用户设置的；
 * 如果没有设置，使用浏览器语言。
 */
const getLanguage = () => {
  const lang = cookie.get('language')
  if (lang) {
    return lang
  }
  const defaultLang = getBrowserLang()
  cookie.set('language', defaultLang)
  return defaultLang
}

const i18n = new VueI18n({
  locale: getLanguage(),
  messages,
  // 当没有 key 值时，不发出警告
  silentTranslationWarn: true
})

export default i18n

4.4 在 main.js 中引入

import i18n from '@/i18n'
...
new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount('#app')

4.5 测试

在 main.js 中，测试国际化是否生效：

console.log(i18n.t('route.test'))

手动切换 src/i18n/index.js 中的 locale 测试是否会自动切换语言。

5 Element UI

5.1 添加依赖

npm install element-ui --save

5.2 引入 Element UI

修改 main.js 文件，引入 element ui：

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

...

Vue.use(ElementUI, {
  size: 'mini',
  i18n: (key, value) => i18n.t(key, value)
})

5.3 修改国际化配置

由于 Element UI 组件中也有一些文本，也支持国际化，故在国际化配置文件中需要引入 Element UI 中的这些信息。修改 src/i18n/index.js：

import elementEnLocale from 'element-ui/lib/locale/lang/en'
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'

...

const messages = {
  en: {
    ...enLocale,
    ...elementEnLocale
  },
  zh: {
    ...zhLocale,
    ...elementZhLocale
  }
}

...

5.4 测试

在 src/components/HelloWorld.vue 中，使用 Element UI 的组件，测试 Element UI 是否引入成功：

<template>
  <div class="hello">
    <el-button>Test Button</el-button>
  </div>
</template>

6 全局样式

全局样式包括几个部分：

屏蔽浏览器差异的样式，我使用 normalize.css
基础样式（index）：对全局的设置和公共样式类
变量配置文件（config）：设置字号颜色的变量
可复用的样式（mixin）：如弹性布局、图片样式等
覆盖 element ui 的样式。

6.1 添加 normalize.css

npm install normalize.css --save

6.2 config.scss

在 src/assets/scss 下新建变量配置文件：config.scss

/* 尺寸 */
$pageMinWidth: 1080px;
$pageMinHeight: 600px;
$topNavHeight: 54px;
$leftWidthMax: 220px;
$leftWidthMin: 65px;
$pagePadding: 12px;
$inputRadius: 4px;
$commonPadding: 10px;

/* 主颜色 */
$colorM1: #4B9ADE !default;
$colorM2: #034278 !default;
$colorM3: #9CC7EC !default;
$colorM4: #1E63A0 !default;

/* 其他颜色 */
$color1: #203025 !default;
$color2: #333333 !default;
$color3: #69707E !default;
$color4: #9CA6B9 !default;
$color5: #FBFBFB !default;
$color6: #FFFFFF !default;
$color7: #F4F4F4 !default;
$color8: #E9E9E9 !default;
$color9: #4C8DC5 !default;
$color10: #E6E4E4 !default;
$color11: #447DAD !default;
$color12: #255884 !default;
$color13: #c1c1c1 !default;
$color14: #1A2225 !default;
$color15: #13181A !default;

/* 字号大小 */
$fontA: 28px !default;
$fontB: 24px !default;
$fontC: 20px !default;
$fontD: 18px !default;
$fontE: 16px !default;
$fontF: 14px !default;
$fontG: 12px !default;
$fontH: 10px !default;
$fontI: 8px !default;
$fontJ: 6px !default;

$asideDivider: 1px solid rgba($color8, 0.17);
$asideHoverBg: rgba($colorM3, 0.1) !important;

/* 导出给 JS 使用 */
:export {
  colorM1: $colorM1;
  colorM2: $colorM2;
  colorM3: $colorM3;

  color1: $color1;
  color2: $color2;
  color3: $color3;
  color4: $color4;
  color5: $color5;
  color6: $color6;

  topNavHeight: $topNavHeight;
  leftWidthMax: $leftWidthMax;
  leftWidthMin: $leftWidthMin;
}

6.3 mixin.scss

在 src/assets/scss 下新建变量配置文件：mixin.scss

@import "config";

/** flex 布局 */
@mixin flex($hov: space-between, $col: center) {
  display: flex;
  justify-content: $hov;
  align-items: $col;
}

@mixin flex-col($hov: space-between, $col: center) {
  @include flex($hov, $col);
  flex-direction: column;
}

@mixin img($width, $height) {
  width: $width;
  height: $height;

  img {
    width: 100%;
    height: 100%;
  }
}

@mixin container() {
  border: 1px solid $color7;
  box-shadow: 0 1px 7px 0 rgba(0,0,0,0.04);
  box-sizing: border-box;
}

config.scss 定义的变量、mixin.scss 定义的样式，在后面都会使用到，可以简化代码、统一样式风格、快速修改主题。

6.4 element-ui.scss

在 src/assets/scss 下新建变量配置文件：element-ui.scss

@import "config";

/* 改变主题色变量 */
$--color-primary: $colorM2;

$--font-path: '~element-ui/lib/theme-chalk/fonts';

@import "~element-ui/packages/theme-chalk/src/index";

6.5 index.scss

在 src/assets/scss 下新建变量配置文件：index.scss

在 index.scss 中引入上面各种 scss 文件，并定义一些全局样式：

@import "config";
@import "element-ui";
@import "~normalize.css/normalize.css";

html, body, #app, .site {
  width: 100%;
  height: 100%;
  min-width: $pageMinWidth;
  min-height: $pageMinHeight;
  overflow: scroll;
  margin: 0 !important;
  padding: 0 !important;;
  font-family: "PingFangSC-Regular", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Heiti SC", "Microsoft Yahei", "WenQuanYi Micro Hei", "sans-serif";
  background-color: $color10;
}

.mt10 {
  margin-top: 10px !important;
}
.full-width {
  width: 100%;
}

6.6 添加到 main.js

修改 main.js，将之前引入的 Element UI 的样式删除（删除下面的语句）：

import 'element-ui/lib/theme-chalk/index.css'

并引入 index.scss：

import '@/assets/scss/index.scss'

main.js 完整代码如下：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import i18n from '@/i18n'
import ElementUI from 'element-ui'
import '@/assets/scss/index.scss'

Vue.use(ElementUI, {
  size: 'mini',
  i18n: (key, value) => i18n.t(key, value)
})

Vue.config.productionTip = false

new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount('#app')

刷新页面，程序能正常运行，界面如下则完成本文内容：

运行效果

7 合并代码

提交代码：

git add .
git cz
[准备工作] 全局设置

合并到 master 分支：

git checkout master
git merge 01_GlobalInit

将本地分支分别全部推送到 Gitee 和 GitHub

git push --all gitee_origin
git push --all github_origin

欢迎关注我的个人公众号，留言可加我个人微信或交流问题

程序员搞艺术