Vue企业级优雅实战03-准备工作04-全局设置

本文包括如下几个部分：

• 初始化环境变量文件

• JS 配置文件初始化：如是否开启 Mock 数据、加载本地菜单、URL 请求路径等；

• 国际化文件初始化：初始化国际化文件的结构；

• 整合 Element UI： 将 Element UI 添加到工程中；

• 全局样式初始化：初始化全局样式、通用样式。

1 切换新分支

1.1 查看分支

1、 仅查看本地分支：

git branch

 

本地分支信息：

-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

  ---

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

•