摘要：輸入框內(nèi)容過濾產(chǎn)品有一個(gè)需求是，在搜索用戶信息時(shí)，只能通過郵箱搜索，并且只能輸入字母數(shù)字以及。我選擇了輸入框的值這里的坑就是需要在中更新值，因?yàn)樵剡@時(shí)才刷新。是否有一定要用的必要類似的管理系統(tǒng)涉及到不同頁(yè)面之間的交互都很少。

使用 Vue-cli3 初始化項(xiàng)目¹

安裝 Element UI
安裝 Vue-i18n，做相關(guān)配置^2,3

原則上需要對(duì) Element 也做 I18n 的處理，但是我覺得 Element 中已經(jīng)有很完善的多語(yǔ)言翻譯，而 Element 自身尚不支持 Vue-i18n 7+ 版本，要特殊處理，所以就算了，這里直接使用了 Element 自帶的方法。

.
|-- babel.config.js
|-- package.json
|-- public
|   `-- index.html
|-- src
|   |-- App.vue
|   |-- assets 
|   |   |-- override-element-ui.less      // 覆蓋 Element 默認(rèn)樣式
|   |   `-- image                         // 圖片文件目錄
|   |-- components  // 所有非 `` 中顯示的頁(yè)面的 Vue 組件
|   |   |-- mainMenu.vue    // 左側(cè)導(dǎo)航
|   |   |-- pureTitle.vue   // 通用的 Title 組件，項(xiàng)目中有多個(gè)頁(yè)面會(huì)用到
|   |   |-- search.vue      // 通用的 Search 頭部組件，同樣會(huì)用到
|   |   `-- userCenter.vue  // 字面意思用戶中心，目前只需要顯示用戶名，handle 用戶退出操作?？深A(yù)見：下拉菜單操作、頭像顯示等...
|   |-- main.js     // Vue-cli 生成的項(xiàng)目基本文件
|   |-- router.js   // Vue-cli 生成，路由
|   |-- store   // Vuex相關(guān)
|   |   |-- index.js
|   |   |-- mutationTypes.js
|   |   `-- module  // 這里按照路由劃分了 module，不一定對(duì)
|   |   |   |-- someModule.js
|   |   |   `-- elseModule.js
|   |-- utils
|   |   |-- i18n  // 國(guó)際化支持
|   |   |   |-- index.js
|   |   |   `-- lang  // 語(yǔ)言字符串文件
|   |   |       |-- en.json
|   |   |       `-- zh.json
|   |   |-- request  // 處理所有 ajax 請(qǐng)求
|   |   |   |-- index.js    // 基于 axios，封裝了需要用到的方法，例如 token 的處理
|   |   |   |-- someComponentName.js  // 基于組件分割的請(qǐng)求，在 Vuex action 中調(diào)用獨(dú)立方法
|   |   |   `-- elseComponentName.js
|   |   |-- timeHelper.js  // 時(shí)間戳轉(zhuǎn)換幫助函數(shù)
|   |   `-- userHelper.js  // 保存用戶信息幫助函數(shù)
|   `-- views  // ` 下內(nèi)容顯示組件`
|       |-- Home.vue
|       |-- Login.vue
|       |-- MainPage.vue
|       |-- Manage.vue
|       `-- Verify.vue
|-- .env.development // 環(huán)境變量 process.env
|-- .env.production  // 生產(chǎn)環(huán)境下的環(huán)境變量
`-- vue.config.js    // 更改 Vue-cli 默認(rèn)配置

先看一張項(xiàng)目初始狀態(tài)下，全局引入 Element & 按需引入打包大小的對(duì)比：

參考：按需引入

需要注意的地方是：

不用新建 .babelrc 文件，只需要更改 babel.config.js

使用 Vue-cli 初始化項(xiàng)目后， presets 中為 ["@vue/app"]，不需要更改為 element 官網(wǎng)中的 es2015 。原因是 babel 的目前版本已經(jīng)不推薦按照 JavaScript 版本來區(qū)分編譯目標(biāo)。（// todo：添加相關(guān)鏈接）

可用的 babel.config.js 文件如下：

module.exports = {
  presets: [
    ["@vue/app"],
  ],
  plugins: [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

正常情況下，可以通過直接修改對(duì)應(yīng) class 的內(nèi)容修改。但含有 foo__bar 類似格式的樣式不會(huì)應(yīng)用 scoped（因?yàn)椴皇峭粋€(gè) Vue 實(shí)例），因此修改不會(huì)生效。

可以通過在 *.vue 中不使用 scope 來解決這個(gè)問題，Element 在 Issue 中也吐槽過。雖然我不認(rèn)為 scope 不是一個(gè)好的解決方案。

因此，我選擇了在 main.js 中引入外部樣式表，例如override-element-ui.less，在外部樣式表中修改 foo__bar 類名的樣式。

route.js 主要設(shè)計(jì)如下：

  routes: [
    {
      path: "/login",
      name: "login",
      component: Login
    },
    {
      path: "/",
      name: "home",
      component: Home,
      children: [
        {
          path: "/index",
          component: mainPage
        },
        {
          path: "/manage",
          component: manage,
          children: [
            {
              path: "user/:uumsid&:userid",
              component: userDetail
            },
            {
              path: "enterprise/:id",
              component: insDetail
            },
            {
              path: "/",
              component: manageList
            },
          ]
        },
        {
          path: "/verify",
          component: Verify,
        },
        {
          path: "/verify/:id",
          component: VerifyDetail
        },
        {
          path: "*",
          redirect: "/index"
        },
      ]
    },
  ]

555...不太想貼代碼，感覺太亂、太長(zhǎng)。

但不貼又說不清楚。

簡(jiǎn)單來說，項(xiàng)目只分為兩個(gè)部分。登陸頁(yè)和功能頁(yè)。

根路由綁定到了登陸后的首頁(yè)。

首頁(yè)包含頭部標(biāo)題、左側(cè)菜單還有顯示內(nèi)容的 。

因此，如果用戶僅輸入 location.host 訪問網(wǎng)站，會(huì)被帶到 ${host}/index 頁(yè)面。另外，訪問任意未被匹配的 path，都會(huì)重定向到 index 頁(yè)面。

這個(gè)時(shí)候會(huì)出現(xiàn)兩個(gè)分支：

判斷本地是否存在用戶信息是否存在 ？ 進(jìn)行正常操作 ：重定向到登錄頁(yè)

整個(gè)系統(tǒng)只需要分成需要登錄和不需登陸兩個(gè)部分。

當(dāng)前所開發(fā)的系統(tǒng)除登錄頁(yè)外，都需要登錄后訪問。

這個(gè)部分和路由設(shè)計(jì)強(qiáng)相關(guān)。何時(shí)判斷用戶是否登錄在上一部分已經(jīng)解釋過。

使用 localstorage 來持久化保存用戶信息，處理用戶刷新頁(yè)面以及一段時(shí)間內(nèi)關(guān)閉瀏覽器后不用重新登錄的需求。（一段時(shí)間為30min）

在 Home.vue 的 created() 鉤子中做如下操作：

    created() {
      let userInfo = getUserFromLocal("userinfo")
      let verifiedUserInfo = (info) => {
        let now = new Date().getTime()
        const PASS_TIME = 1000 * 60 * 30 // 30min
        if (!info) return false
        if (now - info.time < PASS_TIME) return true
        return false
      }
      if (!!verifiedUserInfo(userInfo)) {
        this.onRefresh(userInfo)
      } else {
        this.$router.push({path: "/login"})
      }
    }

其中，getUserFromLocal 是在 userHelper.js 中寫的從 localstorage 中獲取數(shù)據(jù)的方法。通過判斷用戶信息是否存在以及是否過期來決定是跳轉(zhuǎn)到登錄頁(yè)還是直接使用當(dāng)前已有的用戶信息。

// 我不覺得這是一個(gè)很完美的方案，但根據(jù)我搜索的資料來看，確實(shí)沒有詳細(xì)說過這方面內(nèi)容的文章。所以，期待能看到更好的方案。

Element 的表單驗(yàn)證方法

但沒有給出 async-validator 支持的表單驗(yàn)證觸發(fā)方式。

經(jīng)過查找，支持的觸發(fā)方式有： submit, blur, input

我選擇的方案是在規(guī)則中使用 submit 時(shí)驗(yàn)證（指表單提交時(shí)觸發(fā)，因此實(shí)際情況中永遠(yuǎn)不會(huì)觸發(fā)，但能滿足需求，即手動(dòng)觸發(fā)驗(yàn)證。）

同時(shí)，在點(diǎn)擊登錄或者發(fā)送請(qǐng)求按鈕時(shí)，調(diào)用 this.$refs.[formEl].validate((boolean) => { // callback})

清除表單驗(yàn)證結(jié)果: ...

當(dāng)表單項(xiàng)很多時(shí)，也可以在

value(val) {
  this.$nextTick(() => {
    this.value = this.reg ? val.replace(this.reg, "") : val
  })
}

import axios from "axios"

// BASE_HOST 通過 .env.[development|production] 配置。注意：每個(gè)變量都要用 VUE_APP作為前綴，否則不能識(shí)別
const BASE_HOST = process.env.VUE_APP_API_BASE
const TIME_OUT = 1000 * 10

/**
 *
 * @param URL {string}
 * @param params {Object}
 */
export function POST(URL, params) {
  if (!URL.includes(BASE_HOST)) URL = BASE_HOST + URL
  return axios({
    method: "post",
    url: URL,
    data: params,
    timeout: TIME_OUT
  })
}

export function GET(URL, data) {
  // like POST
}

/**
 * @param URL {string}
 * @param token {string}
 * @param params {Object}
 */
export function GET_WITH_TOKEN(URL, token, params) {
  if (!URL.includes(BASE_HOST)) URL = BASE_HOST + URL
  return GET(URL, {
    params,
    headers: {
      token: token
    },
    timeout: TIME_OUT
  })
}