Recently a scaffold was erected, and its main features are:

  1. Freedom to control which project to develop, can be single page or multiple pages
  2. You can configure an external CDN
  3. Can be uploaded to qiniu or Ali’s storage space
  4. High performance and flexibility.

The effect is that HTML files are deployed on their own servers, third-party resources are loaded from third parties, and others are loaded from Qiniu or Ali CDN, making full use of the browser cache. Next time you create a project, create a folder under project and use it immediately.

Then recommend a wave, the hope can help to have the small partner in need.

Github: High-performance flexible multi-page Vue scaffolding

High performance flexible multi-page Vue scaffolding

Features/Advantages

  1. Multiple individual projects can be created, and each individual project can be multi-page or single-page (/src/projectHere are the different projects,/src/project/...Below are the different pages of the project)
  2. The CDN connection is configured for public resources
  3. After the package is complete, non-CDN resources are automatically uploaded to qiniu Cloud storage space or Ali Cloud OSS. Only HTML files are required for deployment
  4. Full use of the cache, high performance, can be applied to often need to do activitiesH5page

use

  1. insrc/projectCreate a new project, for example:hello
  2. inconfigIn theapp.config.jsConfigure items or specify parameters directly on the command line
  3. inconfig/cdnConfCreate a js file with the same project name, for example:hello.jsTo configure the CDN. See the configuration formatconfig/cdnConfIf this parameter is not configured, the external CDN does not apply
  4. The development ofyarn dev 或 npm run dev, can be followed by the project name, for example:yarn dev helloThe development ofhelloproject
  5. packagingyarn build 或 npm run build, can be followed by the project name, for example:yarn build helloThe packaginghelloproject

parsing

config/app.config.js

  /** * Configure the project to be developed or packaged, the project name is SRC /project folder name * if the project is specified in the command parameters, otherwise the configuration is here, if neither exists, the first directory under SRC /project will be used ** */
const currentProject = 'test'
/** * The specific configuration of ali Cloud OSS or qiniu Cloud is configured in the following config ** */
const use = 'ali' / / ali or qiniu

const config = {
  currentProject: `project/${realProject}`,
  use,
  // The configuration of the seven cows
  qiNiuCdn: {
    host: ' '.bucket: ' '.ak: ' '.sk: ' '.zone: ' '.prefix: ' '  // Prefix can be defined before the path
  },
  // ali OSS related configuration
  aLiOss: {
    host: ' '.accessKeyId: ' '.accessKeySecret: ' '.bucket: ' '.region: ' '.prefix: ' ' // Prefix can be defined before the path
  },
  cdnLink: selfCdn[realProject],
  externalsConf: externalsConf
}

Copy the code

config/cdnConf

Configure the CDN link with the same file name as the project name, that is, the SRC /project folder name

Format:

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'}}Copy the code

There are a few points to note here:

  1. CSS is imported directly, unlike JS, which exposes global variables, so it is passed in as a string
  2. Js, importing CDN exposes a global variable, such as importinghttps://cdn.bootcss.com/vue/2.3.4/vue.min.jsOne of them was exposedVueVariable, so the key of the object is zeroVue, packageName is the packageName of this variable, which is inyarn add xxx 或 npm i xxxthexxx, these two must not be wrong, or the variable will not be found after the introduction of CDN

When used in the project

import Vue from 'vue' // Vue is the CDN exposed variable, Vue is the package name
import VueRouter from 'vue-router' // As above, other libraries are similar
Copy the code

src/

├ ─ all common items of public documents │ ├ ─ images │ ├ ─ js │ └ ─ styles ├ ─ all project components of common components └ ─ project project ├ ─ the boost project 1 (multi-page example) │ ├ ─help├─ ├─ 2 ├─ ├─ 2test├─ Exercises - Assets ├─ exercises - ├─ Exercises - ExercisesCopy the code

mock

The development environment is built based on Express, which can simulate back-end data or interfaces. You can use mock.js, which is not used in the example

note

If you have any questions, please make an issue. I will solve them in time