VUE-CLI + webpack Multi-page instance application

about Vue.js

Vue.js is a lightweight, progressive front-end framework that builds a user interface. Its goal is to implement responsive data binding and combined view components through the simplest possible API. Using Vue will give you the ultimate programming experience for your development. about VUE-CLI

VUE-CLI is a command-line tool (VUE-CLI) that is officially provided by Vue and can be used to quickly build large single-page applications. The tool provides an out-of-the-box build tool configuration that brings a modern front-end development process. It takes only a minute to start a project with hot reloading, a static check on save, and a build configuration that can be used in a production environment. Questions

VUE-CLI is primarily used to build scaffolding for single-page applications, but in real-world projects, most of the projects are multi-page, so how can you make good use of this set of official configurations? I looked for it on the internet, and could hardly find the Vue multi-page application instance, so it was rebuilt based on the single page application generated by VUE-CLI. Code Address:

Github:https://github.com/breezefeng/vue-cli-multipage, if you feel good, give a star to support it ~ how to use

# Install dependencies
npm install

# Serve with hot reload at localhost:8080/module/index.html
NPM run Dev
  # build for production with minification
NPM Run Build

directory Structure

Vue-cli-multipage
  |---build
  |---config
  |---src
    |---assets
      |---img image file
      |---CSS style file
      |---font fonts file      
    |---  components
      |---Button.vue button assembly
      |---hello.vue
    |---module
      |--- Index  Home Module
        |---index.html
        |---index.js
        |---app.vue
      |---detail  details page Module
        |--- detail.html
        |---detail.js
        |---app.vue

From the directory structure, various components, page modules, resources, etc. are created by the class folder, so that we can save files.

In fact, all of our files, the most important is placed in the module folder, the folder name is the name of the HTML.

For example:

|---index  home module
  |---index.html
  |---index.js
  |---app.vue

The links we visit at this time are:

Http://localhost:8080/module/index.html

It is important to note that in the module sub-folder needs to be Html,js,vue template in the current folder, of course, you can continue to put other resources, such as CSS, pictures, components, etc., Webpack will be packaged into the current page.

If the project does not need this page, you can delete this folder directly, clean, and happy to work.

Like the traditional development projects, all the pictures are accustomed to put in the images, when the project has changed, some pictures and other resources are not used, but also occupy the pit, resulting in more and more large projects, although the current hardware capacity is amazing, but we should still have to keep a good habit. Use of Components

Component (Component) is one of the most powerful features of Vue.js, and when you find that using components can reduce the build wheel, you will fall in love with it deeply.

Our components are placed in the component directory, and the method of invoking the component is simple.

Import Hello from ' Components/hello '

Then remember to register the imported components in *.vue, otherwise you will not be able to use them.

Import Hello from ' Components/hello '

export default {
  name: ' app ',
  component: {
    //register components here, otherwise not available
    Hello
  }
}

Build Code Description

That we use vue-cli of the hand and foot, used to vue-cli students know that the building code is placed in the root directory build, Vue multi-page mainly modified the three JS files: webpack.base.conf.js, webpack.dev.conf.js , Webpack.prod.conf.js.

/**
* *    [webpack.base.conf.js] here mainly lists the relevant code to modify the point, the specific code see build/webpack.base.conf.js
*/
var entries = Getentry ('./src/module/**/*.js '); Get the entry js file

module.exports = {
  entry:entries,
  ....
}

function Getentry (globpath) {
  var entries = {},
    basename, tmp, pathname;

  Glob.sync (Globpath). ForEach (function (entry) {
    basename = path.basename (entry, Path.extname (entry));
    TMP = Entry.split ('/'). Splice ( -3);
    pathname = Tmp.splice (0, 1) + '/' + basename; Correct output of JS and HTML path
    entries[pathname] = entry;
  });

  return entries;
}

/** * * [webpack.prod.conf.js] Here mainly lists the relevant code to modify the point, the specific code see Build/webpack.base.prod.js */function Getentry (globpath) {var ent

  Ries = {}, basename, tmp, pathname;
    Glob.sync (Globpath). ForEach (function (entry) {basename = Path.basename (entry, Path.extname (entry));
    TMP = Entry.split ('/'). Splice (-3); pathname = Tmp.splice (0, 1) + '/' + basename;
  Correct output of JS and HTML path entries[pathname] = entry;
  });
return entries;

} var pages = Getentry ('./src/module/**/*.html '); for (var pathname in pages) {//config generated HTML file, define path such as var conf = {filename:pathname + '. html ', template:pages[ Pathname],//template path Inject:true,//JS insertion position minify: {//removecomments:true,//collapse Whitespace:true,//removeattributequotes:true},//necessary to consistently work with multiple chunks VI

  A commonschunkplugin Chunkssortmode: ' Dependency '}; if (pathname in module.exports.entry) {conf.chunks = [' Manifest ', ' Vendor ', PathnamE];
  Conf.hash = true;
} module.exports.plugins.push (New Htmlwebpackplugin (conf)); }

The modified code is not many, but it provides powerful building support for multi-page applications. Welcome to use, but also hope that we have a lot of exchanges.

Transferred from: https://www.cnblogs.com/fengyuqing/p/vue_cli_webpack.html