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

摘要： 最近搭了個腳手架，主要特點是: 自由控制開發哪個專案，可單頁可多頁 可自由配置外部cdn 可上傳至七牛或阿里的儲存空間 效能高，靈活。 遂推薦一波，希望能幫助到有需要的小夥伴。 github：高效能靈活的多頁面Vue腳手架 ...

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

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

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

github：ofollow,noindex">高效能靈活的多頁面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，配置格式見，如果不配置則不適用外部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
複製程式碼