分享一個高效能靈活的多頁面Vue腳手架

ChenXiaoSong12321發表於2018-10-25
Vue

最近搭了個腳手架，主要特點是:

  1. 自由控制開發哪個專案，可單頁可多頁
  2. 可自由配置外部cdn
  3. 可上傳至七牛或阿里的儲存空間
  4. 效能高，靈活。

效果就是 html 檔案部署在自己伺服器上，第三方資源就載入第三方的，其他的從七牛或阿里cdn上載入，充分的利用了瀏覽器快取。下一次再建立專案的時候在 project 下建立個資料夾，馬上就可以用。

遂推薦一波，希望能幫助到有需要的小夥伴。

github：高效能靈活的多頁面Vue腳手架

高效能靈活的多頁面Vue腳手架

特點/優點

  1. 可以建立多個單獨專案，每個單獨專案可多頁面可單頁（/src/project 下是不同專案，/src/project/... 下是該專案不同頁面）
  2. 配置CDN連結，公共資源使用CDN
  3. 打包完成後非CDN資源自動上傳至七牛雲端儲存空間或阿里雲OSS，部署時只需要html檔案即可
  4. 充分的利用了快取，效能高，可適用於經常需要做活動的 H5 頁面

使用

  1. 在 src/project 建立新專案，例： hello
  2. 在 config 中的 app.config.js 配置專案或在命令列中直接指定引數
  3. 在 config/cdnConf 建立與專案名相同的js檔案，例： hello.js，配置cdn，配置格式見 config/cdnConf，如果不配置則不適用外部cdn
  4. 開發 yarn dev 或 npm run dev，後皆可接專案名稱 ，例：yarn dev hello 則開發 hello 專案
  5. 打包 yarn build 或 npm run build，後皆可接專案名稱 ，例：yarn build hello 則打包 hello 專案

解析

config/app.config.js

  /**
   * 配置需要開發或打包的專案，專案名為 src/project 的資料夾名
   * 如果命令引數中指定了專案則根據命令引數，否則是這裡的配置，如果都不存在則按 src/project 下的第一個目錄為準
   * **/
const currentProject = 'test'
/**
   * 配置使用阿里雲OSS還是七牛雲
   * 阿里雲OSS或七牛雲的具體配置在下面的config中配置
   * **/
const use = 'ali' // ali 或 qiniu

const config = {
  currentProject: `project/${realProject}`,
  use,
  // 七牛相關配置
  qiNiuCdn: {
    host: '',
    bucket: '',
    ak: '',
    sk: '',
    zone: '',
    prefix: ''  // 路徑前可自定義prefix
  },
  // 阿里OSS相關配置
  aLiOss: {
    host: '',
    accessKeyId: '',
    accessKeySecret: '',
    bucket: '',
    region: '',
    prefix: '' // 路徑前可自定義prefix
  },
  cdnLink: selfCdn[realProject],
  externalsConf: externalsConf
}

複製程式碼

config/cdnConf

配置cdn連結，檔名與專案名即 src/project 的資料夾名相同

格式：

module.exports = {
  css: {
    normalize: 'https://cdn.bootcss.com/normalize/8.0.0/normalize.min.css'
  },
  js: {
    Vue: {
      packageName: 'vue',
      link: 'https://cdn.bootcss.com/vue/2.3.4/vue.min.js'
    }
  },
  VueRouter: {
    packageName: 'vue-router',
    link: 'https://cdn.bootcss.com/vue-router/2.3.1/vue-router.min.js'
  }
}
複製程式碼

這裡有幾個點需要注意：

  1. css是直接引入，不像js那樣會暴露全域性變數，所以直接以字串形式傳遞進去
  2. js中，引入cdn會暴露一個全域性變數，例如引入 https://cdn.bootcss.com/vue/2.3.4/vue.min.js 就暴露了一個 Vue 變數，所以物件的 key 值就為 Vue ，packageName為這個變數的包名，就是在 yarn add xxx 或 npm i xxx 的這個 xxx，這兩個千萬不能錯，不然引入了cdn後會找不到變數

使用的時候，在專案中

import Vue from 'vue' // 這裡的 Vue 就是 cdn 暴露出來的變數，vue就是包名
import VueRouter from 'vue-router' // 同上，其他類庫也相似
複製程式碼

src/

├─common                       所有專案的公共檔案
│  ├─images
│  ├─js
│  └─styles
├─components                   所有專案的公共元件
└─project                        專案
    ├─boost                    專案1（多頁 example）
    │  ├─helpFriends             頁面1
    │  ├─index                   頁面2 
    │  └─inviteFriends           頁面3
    └─test                     專案2 （單頁 spa example）
        └─index                  頁面1
            ├─assets
            ├─components
            └─router
複製程式碼

mock

開發環境基於 express 搭建，可模擬後端資料或介面，可使用 mock.js，例子中沒有使用，後期我再加上去試試

備註

有需要的小夥伴如果有問題可以提 issue 哦，我會及時解決的

相關文章