vue cli html5 plus,GitHub - vue-html5plus/vue-webpack-multipage: A modern Vue.js multiple pages cli ...

vue-multiple-pages

A modern Vue.js multiple pages cli which uses Vue 2, Webpack3, and Element-UI

Features

Get Started

Init Project

$ npm install -g vue-cli

$ vue init Plortinus/vue-multiple-pages new-project

$ cd new-project

$ npm install

Dev

# serve with hot reload at localhost:8010

$ npm run dev

Build

$ npm run build

$ node server.js #listen 2333 port

Root Folder Structure

├── src # main folder

│   ├── assets # common assets folder

│   │   ├── img

│   │   │   └── logo.png

│   │   ├── js

│   │   └── css

│   ├── components # common components folder

│   │   └── modal.vue

│   └── pages # pages

│   ├── user # user part (folder name can be customized)

│   │   ├── login # login.html (folder name can be customized)

│   │   │   ├── app.js # entry js (file name can't be customized unless you change the webpack.config.js)

│   │   │   ├── app.vue # login vue (file name can be customized)

│   │   │   └── app.html # template html (file name can't be customized unless you change the webpack.config.js)

│   │   └── index # index.html

│   │   ├── app.js

│   │   ├── app.html

│   │   └── app.vue

│   └── customer # customer part (folder name can be customized)

│   └── home # home.html

│   ├── app.html

│   ├── app.js

│   └── app.vue

├── LICENSE

├── .babelrc # babel config (es2015 default)

├── .eslintrc.js # eslint config (eslint-config-vue default)

├── server.js # port 2333

├── package.json

├── postcss.config.js # postcss (autoprefixer default)

├── webpack.config.js

└── README.md

Dist Folder Structure

├── assets

│ ├── css

│ │ ├── customer

│ │ │ ├── home.css

│ │ │ └── home.css.map

│ │ ├── user

│ │ │ ├── index.css

│ │ │ ├── index.css.map

│ │ │ ├── login.css

│ │ │ └── login.css.map

│ │ ├── vendors.css

│ │ └── vendors.css.map

│ └── js

│ ├── customer

│ │ └── home.js

│ ├── user

│ │ ├── index.js

│ │ └── login.js

│ └── vendors.js

├── b02bdc1b846fd65473922f5f62832108.ttf

├── customer

│ └── home.html

├── logo.png

└── user

├── index.html

└── login.html

How The Multiple Page Works ?(Assumed that you have the basic knowlege of webpack)

Firstly, we need to get the entries and chunks

The constant entries is an Object type, it's prop is the chunk and it's value is the relative path of the entry js file

The constant chunks is an Array type for the CommonsChunkPlugin

This step needs a package called: glob

const entries = {}

const chunks = []

glob.sync('./src/pages/**/app.js').forEach(path => {

// Get all the entry js files and forEach them

const chunk = path.split('./src/pages/')[1].split('/app.js')[0]

// E.g, chunk = 'user/index' path = './src/pages/user/index/app.js'

entries[chunk] = path

// Now we got the entries

chunks.push(chunk)

// Then, we collect the chunks for CommonsChunkPlugin

})

// ...

const config = {

entry: entries, // The constant entries is used here

plugins: [

new CommonsChunkPlugin({

name: 'vendors',

filename: 'assets/js/vendors.js',

chunks: chunks, // The constant chunks is used here

minChunks: chunks.length

})

// ...

],

}

Then,combine the html template file with the right chunk

The second step,we use the webpack plugin: html-webpack-plugin

// ...

const config = {

// ...

}

// ...

glob.sync('./src/pages/**/app.html').forEach(path => {

// Get all the html template files and forEach them

// E.g, path = './src/pages/user/index/app.html'

const chunk = path.split('./src/pages/')[1].split('/app.html')[0]

// E,g. the chunk will be 'user/login'

const filename = chunk + '.html'

// E.g, the html filename will be 'user/index.html' in the 'dist' folder

const htmlConf = {

filename: filename,

template: path,

inject: 'body',

favicon: './src/assets/img/logo.png',

hash: process.env.NODE_ENV === 'production',

chunks: ['vendors', chunk]

}

config.plugins.push(new HtmlWebpackPlugin(htmlConf))

})

License

MIT