Поделитесь высокопроизводительным и гибким многостраничным каркасом Vue

внешний интерфейс JavaScript CDN

Недавно построенные леса, основные особенности:

  1. Свободно контролируйте, какой проект разрабатывать, одну страницу или несколько страниц.
  2. Свободно настраиваемый внешний cdn
  3. Можно загрузить в хранилище Qiniu или Ali
  4. Высокая производительность и гибкость.

эффектhtmlКогда файлы развертываются на собственных серверах, сторонние ресурсы загружаются со сторонних ресурсов, а другие загружаются с Qiniu или Ali cdn, в полной мере используя кэширование браузера. в следующий раз, когда вы создадите проект,projectСоздайте папку ниже, вы можете использовать ее немедленно.

Поэтому я рекомендую волну, я надеюсь, что это может помочь нуждающимся друзьям.

гитхаб:Высокопроизводительные и гибкие многостраничные скаффолдинги Vue

Высокопроизводительные и гибкие многостраничные скаффолдинги Vue

Особенности и преимущества

  1. Можно создать несколько отдельных проектов, каждый отдельный проект может быть многостраничным или одностраничным (/src/projectНиже представлены различные проекты,/src/project/...Ниже представлены разные страницы проекта)
  2. Настройте ссылки CDN, общедоступные ресурсы используют CDN
  3. После завершения упаковки ресурсы, отличные от CDN, автоматически загружаются в облачное хранилище Qiniu или Alibaba Cloud 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 выставит глобальную переменную, такую ​​как importinghttps://cdn.bootcss.com/vue/2.3.4/vue.min.jsразоблачилVueпеременная, поэтому ключевое значение объекта равно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о, я исправлю это вовремя

Категории