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, how can you make good use of this set of official configuration? 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

How to use

 with hot reload @ localhost:8080/module/ for with MINIFICATIONNPM run build 

Directory structure

vue-cli-MultiPage|---Build|---Config|---src|---Assets|---img Image File|---CSS style files|---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 'default  {  ' apps ', Components  : {       Register the component here, or you will not be able to use     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*/varEntries = Getentry ('./src/module/**/*.js ');//get the entry JS fileModule.exports={entry:entries, ....}functiongetentry (globpath) {varEntries ={}, 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 pathsentries[pathname] =entry;  }); returnentries;}

/** * * [webpack.prod.conf.js] here mainly lists the relevant code to modify the point, the specific code see Build/webpack.base.prod.js*/functiongetentry (globpath) {varEntries ={}, 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 pathsentries[pathname] =entry;  }); returnentries;}varPages = Getentry ('./src/module/**/*.html ')); for(varPathnameinchpages) {  //Configure generated HTML files, define paths, etc.  varconf ={filename:pathname+ '. HTML ', template:pages[pathname],//Template PathInjecttrue,//JS Insertion Positionminify: {//removecomments:true,      //collapsewhitespace:true,      //removeattributequotes:true    },    //necessary to consistently work with multiple chunks via CommonschunkpluginChunkssortmode: ' dependency '  }; if(pathnameinchModule.exports.entry) {conf.chunks= [' manifest ', ' Vendor ', pathname]; Conf.hash=true; } Module.exports.plugins.push (NewHtmlwebpackplugin (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.

VUE-CLI + webpack multi-page instance application