1. 程式人生 > >vue-cli 3.0腳手架配置及擴充套件 (五):AppConf類

vue-cli 3.0腳手架配置及擴充套件 (五):AppConf類

本類為config.app.js提供基礎服務,主要業務為對外應用資訊、頁面資訊、頁面URL資訊、baseUrl資訊以及應用和頁面是否存在校驗服務

程式碼如下,不懂可留言討論:

/**
 * @fileOverview app配置資料處理類
 * @author Franks.T.D
 * @date 2018/06/17
 */

const [
  appConfig,
  resolveConf,
  fnRecursive,
  parseUrl,
  exists
] = [
  require('./../../../config.app'),
  Symbol.for('resolveConf'),
  Symbol.for('fnRecursive'),
  Symbol.for('parseUrl'),
  Symbol.for('exists')
]

module.exports = class AppConf {
  constructor () {
    this.appConfig = appConfig
    this.apps = appConfig.APP_NAME
    this.modulesList = []
    this.urlsObject = Object.create(null)
  }
  get modules () {
    try {
      this[resolveConf]()
      return [...new Set(this.modulesList)]
    } catch (err) {
      console.log('獲取模組時出錯:', err)
    }
  }
  get urls () {
    try {
      this[resolveConf]()
      return this.urlsObject
    } catch (err) {
      console.log('獲取頁面路徑時出錯:', err)
    }
  }
  [resolveConf] () {
    for (let [key, item] of this.appConfig.APP_LIST.entries()) {
      const appName = this.appConfig.APP_NAME[key]
      this.modulesList.push(item.INDEX_HTML)
      Reflect.set(this.urlsObject, appName, Object.create(null))
      this.urlsObject[appName][item.INDEX_HTML] = this[parseUrl]([], item.INDEX_HTML)
      this[fnRecursive](appName, [], item.CONTEXT_DIRECTORY)
    }
  }
  [fnRecursive] (appName, pathsArr, list) {
    for (let item of list) {
      if (typeof item === 'string') {
        this.modulesList.push(item)
        this.urlsObject[appName][item] = this[parseUrl](pathsArr, item)
      } else if (item instanceof Object) {
        for (let [key, val] of Object.entries(item)) this[fnRecursive](appName, [...pathsArr, key], val)
      } else {
        throw new Error('無法識別的模組配置')
      }
    }
  }
  [parseUrl] (...args) {
    let tempArr = []
    for (let item of args) {
      if (item instanceof Array) {
        tempArr = [...tempArr, ...item]
      } else {
        tempArr.push(item)
      }
    }
    return `${tempArr.join('/')}.html`
  }
  appExist (app) {
    return this.apps.includes(app) ? !0 : !1
  }
  appsExist (appArr) {
    return this[exists](appArr, 'app')
  }
  moduleExist (module) {
    return this.modules.includes(module) ? !0 : !1
  }
  modulesExist (modArr) {
    return this[exists](modArr, 'module')
  }
  [exists] (arr, type) {
    let existFlag = true
    for (let item of arr) {
      if (type === 'module') existFlag = this.moduleExist(item)
      if (type === 'app') existFlag = this.appExist(item)
      if (!existFlag) break
    }
    return existFlag
  }
  baseUrl (app) {
    return `/${this.appConfig.APP_LIST[this.apps.findIndex(item => item === app)].BASE_URL}/` || ''
  }
}

相關推薦

vue-cli 3.0腳手架配置擴充套件 AppConf

本類為config.app.js提供基礎服務,主要業務為對外應用資訊、頁面資訊、頁面URL資訊、baseUrl資訊以及應用和頁面是否存在校驗服務程式碼如下,不懂可留言討論:/** * @fileOverview app配置資料處理類 * @author Franks.T.

vue-cli 3.0腳手架配置擴充套件 VueConf

本類為vue.config.js提供基礎服務,主要業務為根據當前命令獲得有效的頁面資訊,將頁面資訊整合為多頁資料結構,供vue.config.js檔案使用;也同時提供baseUrl屬性,因涉及到多應用會有多個baseURL,baseUrl屬性在npm run serve時恆為

vue-cli 3.0腳手架配置擴充套件 config.app.js應用目錄配置

工程目錄如圖,config.app.js檔案在src原始碼目錄下config.app.js檔案是我為了方便測試模擬的專案結構,程式碼如下:/** * @fileOverview app配置 * @author Franks.T.D * @date 2018/06/17

Vue CLI 3.0腳手架如何在本地配置mock資料

前後端分離的開發模式已經是目前前端的主流模式,至於為什麼會前後端分離的開發我們就不做過多的闡述,既然是前後端分離的模式開發肯定是離不開前端的資料模擬階段。 我們在開發的過程中,由於後臺介面的沒有完成或者沒有穩定之前我們都是採用模擬資料的方式去進行開發專案,這樣會使我們的前後端會同時的進行,提高我們的開發效率

Vue-cli 3.0 打包配置

關於Vue-cli3.0打包官網上也沒有給出什麼具體的例子,下面是個人根據專案打包執行成功之後的一些記錄: vue-cli 3.0創立的專案所有的配置都在vue-config.js中完成,下面是我自己的配置: const path = require('path') const

vue-cli 3.0 腳手架使用記錄

一/ 在2.X中靜態資原始檔放在static資料夾中,此資料夾裡的東西不會被webpack打包,而在3.X中沒有該檔案,於是我在根目錄新建了一個static資料夾存放reset.css檔案,出現了在index.html引入reset無效的問題,經過查資料發現3.X中的public資料夾類似於

vue/cli 3.0腳手架搭建

在vue 2.9.6中,搭建vue-cli腳手架的流程是這樣的:  首先 全域性安裝vue-cli,在cmd中輸入命令: npm install --global vue-cli  安裝成功:  安裝完成之後輸入 vue -V(注意這裡是大寫的“V”),如下圖,如果出現

真小白體驗 vue-cli 3.0 腳手架搭建~

真小白體驗 vue-cli 3.0 專案搭建~ Vue.js(讀音 /vjuː/, 類似於 view)是一個構建資料驅動的 web 介面的漸進式框架。Vue.js 的目標是通過儘可能簡單的 API 實現響應的資料繫結和組合的檢視元件。它不僅易於上手,還便於與第三

深入解析Vue CLI 3.0腳手架如何mock資料

前後端分離的開發模式已經是目前前端的主流模式,至於為什麼會前後端分離的開發我們就不做過多的闡述,既然是前後端分離的模式開發肯定是離不開前端的資料模擬階段。 我們在開發的過程中,由於後臺介面的沒有完成或者沒有穩定之前我們都是採用模擬資料的方式去進行開發專案,這樣會使我們的前後端會同時的進行

vue-cli 3.0 實用配置

進行 ngs .com .config 移除 目的 local github 開始 文件壓縮如何去掉console 在使用vue開發項目的過程中,免不了在調試的時候會寫許多console,在控制臺進行調試;在開發的時候這種輸出是必須的,但是build後線上運行時這個東西是不

[Vue 牛刀小試]第十七章 - 優化 Vue CLI 3 構建的前端專案模板1- 基礎專案模板介紹

 一、前言   在上一章中,我們開始通過 Vue CLI 去搭建屬於自己的前端 Vue 專案模板,就像我們 .NET 程式設計師在使用 asp.net core 時一樣,我們更多的會在框架基礎上按照自己的開發習慣進行調整。因此在後面幾章的學習中,我將會在整個專案基礎上,按照自己的需求進行修改設定。

Sybase的安裝、配置使用

第五章  Sybase資料庫的常用工具說明 Sybase的資料庫安裝目錄中提供了我們常用的幾種工具,依次開啟開始->程式->Sybase,這裡只說明我們常用的幾種工具。如下圖: 1.Ds

[學習筆記]機器學習——演算法模型貝葉斯演算法

傳統演算法(五) 貝葉斯演算法 一、貝葉斯定理 簡介 貝葉斯定理是18世紀英國數學家托馬斯·貝葉斯(Thomas Bayes)提出得重要概率論理論;貝葉斯方法源於他生前為解決一個“逆概”問題寫的一篇文章

vue-cli 3.0.3配置基本環境打包

-c 新建 例如 pro devel ase 語句 項目 git 從新建項目到設置打包環境 1.vue create vue-cli-env 2.新建 vue.config.js 文件,設置baseUrl: ‘./‘ 3.新建各個環境的文件,例如:.env.developm

git bash here 的 ~/.bashrc 配置檔案。和 vue/cli 3. 0 的 .vuerc檔案preset

  今天就來講一下git有關的小技巧,.bashrc檔案是使用者配置文環境變數的檔案,每次git bash會首先執行裡面的內容 1.自動執行      每次進入git bash都會先讀取.bashrc

vue-cli 3.0 使用axios配置跨域訪問豆瓣接口

mbo 環境 因此 代碼 compile onf demo sub style vue-cli 3.0 配置axios跨域訪問豆瓣接口 自己做的小demo 由於豆瓣api跨域問題,因此不能直接通過ajax請求訪問,我們通過vue-cli提供給我們的代理 進行配置即可,

vue-cli#2.0 webpack 配置分析

尋找 see pac 目錄結構 display stop 發布 after targe 前言 作為 Vue 的使用者我們對於 vue-cli 都很熟悉,但是對它的 webpack 配置我們可能關註甚少,今天我們為大家帶來 vue-cli#2.0 的 webpack 配置分

【bug】vue-cli 3.0報錯的解決辦法

文件中 分享圖片 not main res idt 說明 exports 修改 先上bug圖片 bug說明:初裝vue_cli3.0寫了個組件,運行錯誤,顯示如圖, 代碼提示:[Vue warn]: You are using the runtime-only bu

vue-cli 3.0 初體驗

img 項目 alt 3.x ini cti eight for clean 一. 準備   1.卸載vue-cli 1.x 或2.x版本,npm uninstall -g vue-cli   2.node版本需 8.9 及以上 二. 安裝   1. 安裝3.x版本 npm

VUE CLI 3.0和2.0的引入模組的一些改變

1.引入模組一定要加.vue 剛剛接觸vue cli 3.0 自己開發中引入模組遇到一些問題。 因為2.0中 引入模組的字尾可以不用.vue.字尾 在3.0中就會出現 下圖的 錯誤 提示你 未找到模組。     加了.vue字尾之後模組之後. 再次執行 npm run s