分享一个高性能灵活的多页面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 哦，我会及时解决的