Egg+Vue+Webpack progressive front-end skeleton engineering

Based on the Egg+Vue multi-page and single-page server client rendering isomorphic engineering skeleton project, please refer to the document: Egg+Vue Solution

Characteristics of 1.

Support server-side rendering, front-end rendering, static page rendering three ways,
Support single page, multi page server rendering, front-end rendering mode
Support server and client code modification, Webpack always compile and hot update, NPM start one-click start application
Based on Vue + AXIOS multi-page server rendering, client rendering isomorphic implementation
Based on vUE + VUex + VUE-Router + AXIOS single page server client isomorphism
Based on easyWebPack basic configuration, using ES6 class inheritance method to write webPack configuration and CLI construction
Supports Js/Css/Image resource dependency and built-in CDN feature
Supports CSS/SASS/LESS
Supports automatic creation of entry files based on. Vue files
Supports asynchronous loading of Vue components. For an example, see app/ Web/Page/Dynamic
Support vUE 2.3 official VueSSRPlugin implementation scheme, code branch feature/VueSSRPlugin

2. Rely on

easywebpack programming instead of configuration, webpack is no longer complex.
egg-view-vue egg view plugin for vue.
egg-view-vue-ssr vue server side render solution for egg-view-vue.
egg-webpack webpack dev server plugin for egg, support read file in memory and hot reload.
egg-webpack-vue egg webpack building solution for vue.

Easywebpack, egg-webpack, egg-webpack-vue is separated from egg-vue-webpack-dev to ensure a single function, you can expand more webpack-based packaging solutions, such as vue, React.

For those compiled based on the older egg-vue-webpack-dev plug-in switch to the egg-vue-webpack-dev branch of the project

Use 3.

3.1 installation cli

npm install easywebpack-cli -gCopy the code

3.2 Installation Dependencies

npm install
npm startCopy the code

3.3 Starting an Application

npm startCopy the code

Application access: http://127.0.0.1:7001

3.4 Project Construction

NPM run build-dev or easywebpack build dev // Compile files to disk for packaging use (release official environment) NPM Run Build or easyWebPack Build prodCopy the code

4. Configuration Description (Two methods are supported)

4.1 Method 1:`easywebpack-cli`According to the`webpack.config.js`Automatically create Webpack Config

`config/config.local.js` 
const EasyWebpack = require('easywebpack-vue');
exports.webpack = {
    webpackConfigList:EasyWebpack.getWebpackConfig()
  };Copy the code

4.2 Method 2: Write Webpack configuration

See tag 1.0.0 build directory code for the configuration

`config/config.local.js` exports.webpack = { webpackConfigList: [require(path.join(app.basedir, 'build/client')), // http://127.0.0.1:9000 require(path.join(app.basedir, 'build/client')), // http://127.0.0.1:9000 require(app.basedir, 'build/server')), // http://127.0.0.1:9001]};Copy the code

The build starts two WebPack build services at the same time: client JS build (build/client), server build (build/ Server), default port 9000, and The webpackConfigList port successively.

5. Project structure and basic specifications

├ ─ ─ app │ ├ ─ ─ controller │ │ ├ ─ ─ the test │ │ │ └ ─ ─ test. The js │ ├ ─ ─ the extend │ ├ ─ ─ lib │ ├ ─ ─ middleware │ ├ ─ ─ away │ ├ ─ ─ the proxy │ ├ ─ ─ the router. Js │ ├ ─ ─ the view │ │ ├ ─ ─ the about the compiler / / server jsbundle file │ │ │ └ ─ ─ the about the js │ │ ├ ─ ─ home │ │ │ └ ─ ─ home. Js / / └ │ ├ ─ layout (2 files, PDF, PDF, PDF, PDF) Render for server fails, the client rendering │ │ └ ─ ─ layout. The HTML │ └ ─ ─ web / / front-end engineering │ ├ ─ ─ asset/deposit/public js, CSS resource │ ├ ─ ─ framework / / front public libraries, and third-party libraries │ │ ├ ─ ─ fastclick │ │ │ └ ─ ─ fastclick. Js │ │ ├ ─ ─ the SDK │ │ │ ├ ─ ─ the SDK. Js │ │ ├ ─ ─ storage │ │ │ └ ─ ─ storage. Js │ │ └ ─ ─ vue / / Vue related public code │ │ ├ ─ ─ app. Js / / call the entrance before and after the end, the default introduced componet/directive/filter │ │ ├ ─ ─ component. The js / / component entry, You can add a component directory like the following: Directive │ │ ├─ directive. Js // Directive │ └ ─ ─ filter. Js/reference/filter entry │ ├ ─ ─ page / / front page and webpack build directory, namely webpack packaging configuration entryDir │ │ ├ ─ ─ home / / each page follow the directory name, js file name, SCSS file name, Vue file name the same │ │ │ ├ ─ ─ home. The SCSS │ │ │ ├ ─ ─ home. Vue │ │ │ ├ ─ ─ images / / page has its own image, under the public images and CSS on asset │ │ │ │ └ ─ ─ icon_more. PNG │ │ │ └ ─ ─ w - week / / page has its own components, common components in the widget below │ │ │ ├ ─ ─ w - week. SCSS │ │ │ └ ─ ─ w - week. Vue │ │ └ ─ ─ the test / / each page follow the directory name, js file name, SCSS filename, vue file name the same │ │ └ ─ ─ test. The vue │ ├ ─ ─ store / / introduce vuex basic specification, Can divide modules │ │ ├ ─ ─ app │ │ │ ├ ─ ─ actions. Js │ │ │ ├ ─ ─ getters. Js │ │ │ ├ ─ ─ index. The js │ │ │ ├ ─ ─ mutation - type. Js │ │ │ └ ─ ─ Mutations. Js │ │ └ ─ ─ store. Js │ └ ─ ─ component / / public business components, such as loading, toast, etc., follow the directory name, js file name, SCSS filename, Vue file name the same │ ├ ─ ─ loading │ │ ├ ─ ─ loading. The SCSS │ │ └ ─ ─ loading. The vue │ ├ ─ ─ the test │ │ ├ ─ ─ test. The vue │ │ └ ─ ─ test. The SCSS │ └ ─ ─ ├── ├─ ├─ build // webPack, Will merge with the default configuration (see so many, in fact here only bits explain) │ ├ ─ ─ base │ │ └ ─ ─ index. The js / / common configuration │ ├ ─ ─ client / / client webpack compiler configuration │ │ ├ ─ ─ dev. Js │ │ ├ ─ ─ the prod. Js │ │ └ ─ ─ index. The js │ ├ ─ ─ server / / server webpack compiler configuration │ │ ├ ─ ─ dev. Js │ │ ├ ─ ─ the prod. Js │ │ └ ─ ─ index. The js │ └ ─ ─ ├── ├.├.js │ ├── ├.prod.js │ ├── ├.prod.js │ ├── ├.test.js │ ├── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ─ Plugin.js ├── Index.js ├─ public // WebPack Json // Resource Dependant table │ ├── Static │ ├─ CSS │ ├─ home │ │ ├─ home.07012d33. CSS │ │ ├─ home │ │ ├─ └ ─ ─ the test │ │ │ ├ ─ ─ test. 4 bbb32ce. CSS │ │ ├ ─ ─ img │ │ │ ├ ─ ─ change_top. 4735 c57. PNG │ │ │ └ ─ ─ intro. 0 e66266. PNG │ ├ ─ ─ the test │ ├ ─ ├ ─ garbage, ├ ─ garbage, │ ├ ─ garbage, │ ├ ─ garbage, │ ├ ─ garbage, │ ├ ─ garbageCopy the code

6. Function realization

Support multi-page/single page server rendering, front-end rendering, static page three ways.

6.1 Multi-page server rendering/front-end rendering isomorphism implementation

6.1.1 Multi-page front-end page implementation

Create a home directory and a home.vue file under the app/web/page directory. Webpack automatically creates an entry from the. Vue file. For details, see webpack.config.js

Layout (custom component, global registration, uniform HTML, Meta, header, body)

<template> <layout title=" Description ="vue server side render" keywords="egg, vue, webpack, server side render"> {{message}} </layout> </template> <style> @import "home.css"; </style> <script type="text/babel"> export default { components: { }, computed: { }, methods: { }, mounted() { } } </script>Copy the code

6.1.2 Multi-page back-end rendering implementation, through`egg-view-vue-ssr`The plug-in`render`Method implementation

Create the controller file home.js

exports.index = function* (ctx) {
  yield ctx.render('home/home.js', { message: 'vue server side render!' });
};Copy the code

Adding a Route Configuration

app.get('/home', app.controller.home.home.index);Copy the code

6.1.3 Multi-page front-end rendering (back-end routing), through`egg-view-vue-ssr`The plug-in`renderClient`Method implementation

Create the controller file home.js

exports.client = function* (ctx) {
  yield ctx.renderClient('home/home.js', { message: 'vue server side render!' });
};Copy the code

Adding a Route Configuration

app.get('/client', app.controller.home.home.client);Copy the code

6.1.4 HTML Static page front-end rendering

Direct easyWebpack to build a static HTML file, see webpack.config.js configuration and APP/Web/Page/HTML code implementation
Access HTML files through egg-static static files

6.2 Isomorphic implementation of single page server rendering

6.2.1 Single-page front-end implementation

Create the app directory, app.vue, app.js files under the app/web/page directory.

App.vue programming interface logic, the root element is layout(custom components, global registration, uniform HTML, meta, header, body)

<template>
  <app-layout>
    <transition name="fade" mode="out-in">
      <router-view></router-view>
    </transition>
  </app-layout>
</template>
<style lang="sass">

</style>
<script type="text/babel">
  export default {
    computed: {

    },
    mounted(){

    }
  }
</script>Copy the code

App.js page call entry

import { sync } from 'vuex-router-sync'; import store from 'store/app'; import router from 'component/app/router'; import app from './app.vue'; import App from 'app'; import Layout from 'component/layout/app'; App.component(Layout.name, Layout); sync(store, router); export default App.init({ base: '/app', ... app, router, store });Copy the code

6.2.2 Single-page back-end implementation

Create the controller file app.js

exports.index = function* (ctx) {
  yield ctx.render('app/app.js', { url: this.url.replace(/\/app/, '') });
};Copy the code

Adding a Route Configuration

app.get('/app(/.+)? ', app.controller.app.app.index);Copy the code

7. Engineering examples

Multi-page server client isomorphism based on Vue + AXIOS: http://127.0.0.1:7001

Based on vue + vuex + vue router + axios single-page server client isomorphism entry: http://127.0.0.1:7001/app

8. Implementation principle

8.1 the local`npm start`Start the process

8.2 Server Rendering page Access process

8.3 Details

Egg+Vue solution development process

Webpack-based front-end engineering solutions and Egg + Vue server-side rendering project practices

Koa and Egg project Webpack in-memory compilation and hot update implementation

License

MIT