分享一个高性能灵活的多页面Vue脚手架

栏目: JavaScript · 发布时间: 6年前

内容简介:最近搭了个脚手架,主要特点是:遂推荐一波,希望能帮助到有需要的小伙伴。github:

最近搭了个脚手架,主要特点是:

  1. 自由控制开发哪个项目,可单页可多页
  2. 可自由配置外部cdn
  3. 可上传至七牛或阿里的存储空间
  4. 性能高,灵活。

遂推荐一波,希望能帮助到有需要的小伙伴。

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,配置格式见,如果不配置则不适用外部cdn
  4. 开发 yarn devnpm run dev ,后皆可接项目名称 ,例: yarn dev hello 则开发 hello 项目
  5. 打包 yarn buildnpm 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 xxxnpm 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
复制代码

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Ruby for Rails

Ruby for Rails

David Black / Manning Publications / 2006-05-11 / USD 44.95

What's Inside * How Ruby and Rails work, separately and together * Extensive Ruby language tutorial * Ruby techniques for Rails applications * Explore the Rails framework source code A new level of pr......一起来看看 《Ruby for Rails》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

URL 编码/解码
URL 编码/解码

URL 编码/解码