分享一個高性能靈活的多頁面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 哦，我會及時解決的