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 = "//dev-gateway"

    在同樣的位置，繼續創建 sit 默認的環境變數文件，文件名為：env.sit，裡面的內容：

    NODE_ENV = sit
VUE_APP_URL_GATEWAY = "//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: "//dev-gateway", BASE_URL: "/"}

    3、 停止應用後，執行命令 npm run serve_sit， 刷新頁面，控制台列印：

    {NODE_ENV: "sit", VUE_APP_URL_GATEWAY: "//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)

    刷新頁面，可以看見瀏覽器的輸出：

    //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

     

    歡迎關注我的個人公眾號，留言可加我個人微信或交流問題

  • 程式設計師搞藝術

     

VirMach 便宜 VPS

QNews

QNews