VUE-CLI + Webpack

Source: Internet
Author: User
Tags glob

Vue-cli + webpack 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.


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.


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:


How to use
# Install DEPENDENCIESNPM install# serve with hot reload at LOCALHOST:8080/MODULE/INDEX.HTMLNPM run dev# build for product Ion with MINIFICATIONNPM 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:


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.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;}
/**** [] here mainly lists the relevant code to modify the point, the specific code see Build/*/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;} var pages = Getentry ('./src/module/**/*.html '); for (var pathname in pages) {//config generated HTML file, define path, etc. var conf = {Filena      Me:pathname + '. html ', Template:pages[pathname],//template path Inject:true,//JS Insert position minify: { Removecomments:true,//collapsewhitespace:true,//removeattributequotes:true},//necessary to Consi  stently work with multiple chunks via 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.

VUE-CLI + Webpack

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.