• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

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

开发技术 开发技术 3周前 (09-05) 18次浏览

本文包括如下几个部分:

  • 初始化环境变量文件

  • 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_GlobalInitmaster 都推送到 Gitee 和 GitHub。

切换新分支的命令:

 git checkout -b 01_GlobalInit
 

再执行 git branch 命令,查看本地分支,显示:

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

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

2 初始化环境变量文件

在 package.json 的 scripts 节点中,配置了 servebuild ,默认情况下,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.jszh.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')

     

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

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

     

    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

     


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

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

     


喜欢 (0)