Webpack4+vue2+axios+vue-router Multi-page + single-page hybrid application framework

VUE2 single-page application framework someone shared, a multi-page application framework is shared, and a single-page and multi-page hybrid application framework is shared, and there are a lot of places to optimize and improve ...

At the end there is a GitHub address.

Project structure

│├─build/* Webpack configuration directory */│├─config.js/* Public constants for configuration file */│├─utils.         JS/* Tool function for configuration file */│├─webpack.base.conf.js/* Public Profile */│├─webpack.dev.conf.js     /* Development Environment Profile */│└─webpack.prod.conf.js/* Production Environment Profile */│├──mock/* Mock service and mock data */│                              ├─API/* Store mock data */│└─mock-server.js/* Mock service */│├──SRC /* Project Source */│││├─API/* All back-end interface */││├──index.js││└──product.js││                        │├─assets/* public static file */││├─fonts││├─img││└─style│││├─utils /* Business-agnostic tool functions */│││├─common/* Business-related public function */││config.js││http.                        Js│││├─components/* Common components such as dialog, loading, etc. */││└─navbar│││├─pages /* Page ││││    │├─index/a folder for each page, the current page style, pictures, sub-components are stored in their own folders. │││ for the project structure is clear, the first class directory is divided into modules, the level two directory is the page directory. ││├─my/*/│││└─order/│││││├─product/│││└─list/│││││├─ App.vue/* Common entry page for multi-page applications */│││││└─main.js/* Public entry function for multi-page applications */│││├─rout ER/* Routing configuration */││router.js│││└─store/* State management */││act Ions.js││getters.js││index.js││mutation-types.js││mutations.js│││└─modul                     ES│├───.BABELRC/* Babel configuration */├───.editorconfig/* Development tool configuration */├───index.html /* Public template file */├───package.json/* Package description file */└───postcss.config.js/* POSTCSS related plug-in Parts Configuration */

Project Introduction

A hybrid project framework that integrates multi-page Applications + single-page applications .

Applies to the main portal page to generate multiple pages, sub-pages and secondary pages using a single-page form of items.

Technology stack

• es6+
• Vue2.0
• Vuex
• Vue-router
• Axios
• Webpack4

Project Packaging Instructions

• NPM module (vue, VUEX, etc.) packaged into a separate JS file
• Common components and public functions packaged into a single JS file
• Single-page and multi-page, are packaged according to the page, that is, each page component is packaged into a separate JS file, load on demand
• Common styles and individual page styles are packaged separately into separate CSS files

How do I configure multiple pages?

Multiple pages automatically generates HTML pages based on the addition of a simple portal file (entry.js).

When packaging, the "/src/pages/" directory is automatically traversed to find "entry.js" files in all directories.

Each "entry.js" file is a separate, packaged entry that generates a separate. html file for each entry

Multi-entry configuration

Create a new file in the directory where you want to generate a separate HTML page entry.js , and introduce a common entry JS file /src/pages/main.js ,

Pass a page component to the public entry function that is displayed by default for the current HTML page.

Portal Example

Entry.js The portal file, you only need to modify the page components to be loaded, such as in this example./list.vue

//导入公共入口文件 (必须)import main from '@/pages/main'//默认加载的页面组件 (必须)import List from './list.vue'//传递一个要展示的页面组件给公共入口函数 (必须)main.init(List)

HTML templates

A packaged entry corresponds to an HTML template.

All pages are used as templates by default in the project root directory /index.html .

If a page requires a separate HTML template, you can create a new file named in its directory entry.html and automatically recognize it as a template for the current page when you package it.

Note: It is only valid to add a separate HTML template to a directory with a portal file (entry.js).

Single page configuration

(./router/router.js)generates a single-page JS file based on the routing configuration of the Vue-router plugin.

Each HTML page is shared with the same routing configuration (router.js文件) , so the page component of a single page can be rendered in any HTML.

Plugin description

This example does not use Generator函数 and async/await , so the corresponding Babel plug-in is excluded, the package file is also 20 kb smaller,

If you need them, you can .babelrc remove the exclusions from the file.

The plugin used in the Package.json file can be viewed, the specific plug-in function and configuration can go to the plugin's NPM package home view

Installing plugins

npm installoryarn install

Development & Packaging

Perform the following command to preview a very simple demo

//启动 Web 开发服务器与 Mock 服务器npm start//构建生产文件npm run build

Mock Data Service Overview

1. All mock files are placed directly ./api under the directory's root directory. (Does not support subdirectories, can modify mock-server.js to implement)
2. The mock file name must be the same as the interface file name in order to match the request interface to the mock files.
3. A mock file can be a .js file or file .jso , and if you create JS and JSON two mock files on the same interface, the data of the JS file will be taken precedence.
4. JSON files are used to hold fixed mock data, and JS files are more free to process and return mock data.
5. After modifying the mock file in the API directory, you do not need to restart the node service, and the recall interface will return the new data.

Start the mock service

There are two ways of doing this:

1. When the command NPM start starts the current project, the mock service is automatically started (this is the default, configured in Package.json).

$ npm start

2. Manually execute the node service file./mock/mock-server.js

$ node ./mock/mock-server.js

Using mock interfaces in projects

In the configuration file /build/webpack.dev.conf , use webpack-dev-server the proxy properties of the Webpack plugin to (proxy) forward the interface server to the mock server.

After the mock server receives the forwarded request, intercepts the interface name in the URL request path, and then uses the API interface name to match the ./mock/api mock file name under the directory.
Finally, the data in the mock file is returned.

Mock file Naming conventions

The mock file name must match the interface file name

Example 1:

If the interface is "/service/user/getuserinfo"

The mock data file is named "Getuserinfo.js" or "Getuserinfo.json"

Example 2:

If the interface is "/service/user/getuserinfo.do"

The mock data file is named "GetUserInfo.do.js" or "GetUserInfo.do.json"

Mock file Authoring Rules

API接口名.jsonThe file supports only JSON-formatted data, for example:

{  "code": 1,  "msg": "失败",  "data":{      "age": 520,      "card": 10099  },  "servertime": 1534835882204}

API接口名.jsThe file must export a function that takes two parameters and returns the mock data in the function, for example:

/*    返回mock数据    @param {object} getData  接口的GET数据    @param {object} postData 接口的POST数据 */module.exports = function(getData, postData) {  //to do something...  return {    code: 0,    msg: "成功"    data: {}  }}

Finally, the framework source address: github.com/ahbool/vue-mix-pages, welcome +star

The demo sucks, just watch it!-_-

In the use of the process if you find the place to be optimized or good advice, welcome to the proposed ...