类vue-cli中webpack模板的多页+elementUI模板

在网上找vue-cli的多页模板 然后在引入各种组件库总是有问题，并且各个配置文件说明都不同，于是参照官方vue-cli来做了同配置的多页面脚手架出来，并且适当简化了一些功能（删除了测试库） 并引入了外部mock和axios两个常用库可以灵活配置，欢迎大家star和使用 提issue

vue-multiple-pages-cli

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

Features

1. Vue2
2. Webpack3
3. ElementUI
4. Eslint(eslint-config-vue default)
5. Postcss(autoprefixer default)
6. Less
7. Sass
8. VueRouter
9. mock.js
10. axios

Get Started

vue-cli

Init Project

$ npm install -g vue-cli
$ vue init wlx200510/vue-multiple-pages-cli new_project
$ cd new_project
$ npm install
复制代码

Dev

# serve with hot reload at localhost:8060
$ npm run dev
复制代码

visit http://localhost:8060/user/login.html

visit http://localhost:8060/user/index.html

visit http://localhost:8060/customer/index.html

Build

$ npm run build
$ node server.js #listen 2333 port
复制代码

visit http://localhost:2333/user/login.html

visit http://localhost:2333/user/index.html

visit http://localhost:2333/customer/index.html

Root Folder Structure

├── build
│   ├── build.js # build entry
│   ├── utils.js # tool funcs
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   └── webpack.prod.conf.js
│
├── config
│   ├── index.js  # config index settings
│   ├── dev.env.js # dev env
│   └── prod.env.js # prod build env
│
├── 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
│               ├── mock
│               │   └── index.js # mock.js to mock API
│               ├── router
│               │   └── index.js # vue-router use example
│               └── selfComponents
│                   └── notFound.vue # components example with vue-router
├── 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)

1. 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
       })
       // ...
     ],
   }
   复制代码

2. 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))
})
复制代码

Inspired by element-starter

Inspired by Plortinus/vue-multiple-pages

I base on vuejs-templates/webpack to edit the vue-multiple-pages scaffold, if you are familiar with vue-cli's webpack scaffold. it is easy to use this with some special features.

License

MIT