preface

This project was initially established in 2016. Now more than 4 years have passed, and time flies. Now TS has become popular, and I have practiced a lot in SSR, so I spent half a day writing a complete Vue SSR demo using Genesis.

Rapid development of

# Start the development environment
npm run dev
Package production environment code
npm run build
# Production environment run
npm run start
Copy the code

docker

After running the yarn build command, copy the dist, node_modules, directory, and package.json files to the image, and run the yarn start command to start the program

Technology stack

  • Vue
  • Genesis
  • vue-router
  • vuex
  • axios
  • vue-meta
  • TS

The function point

  • Realize login, exit, micro-blog list
  • Use vue-meta to manage page SEO information
  • TS encapsulates the AXIos request class, involving header forwarding of server requests
  • Vue base class is written to make Vue, Vuex and TS better match
  • A complete display of the development of Vue SSR project need to pay attention to the knowledge points
  • Fully functional demo based on Genesis development
  • Demonstrates how to prefetch data on the server side and restore server state on the client side
  • Demonstrates how to compile code for SSR and TS production environments

Directory description

. ├ ─ ─ dist yarn build the compiled source directory ├ ─ ─ the mock simulation interface │ └ ─ ─ the mock. Login ts implementation, exit, weibo list mock API ├ ─ ─ the SRC source directory │ ├ ─ ─ components common components │ | └ ─ ─ v - header. Vue encapsulate a head component | ├ ─ ─ request request processing directory | | └ ─ ─ index. The realization of the ts encapsulation axios request class | ├ ─ ─ the router routing management directory | | └ ─ ─ index. The ts Provide create routing methods | ├ ─ ─ store state management directory | | └ ─ ─ index. The realization of the global state of ts program | ├ ─ ─ utils package tool function directory | | └ ─ ─ but ts tools function encapsulation | ├ ─ ─ views the page directory | | ├ ─ ─ home. Vue web site home page | | └ ─ ─ signin. Vue login page | ├ ─ ─ app. The common components of the vue application | ├ ─ ─ base - vue. Ts of vue enclosed a letter, Packaging vuex, request | ├ ─ ─ entry - client. Ts client entry file | ├ ─ ─ entry - server. Ts server entry file | └ ─ ─ shims - vue. Ts statement which s vue file ├ ─ ─ .EditorConfig Editor Configure ├─.eslintignore EsLint Ignore Configure ├─.eslintrc.js EsLint Configure ├─.gitignore Git Ignore File ├─ .stylelintignore Ignore file ├─ build.sh Compile production environment code to dist directory Yarn start executing ├ ─ ─ genesis. Build. Ts genesis build production code ├ ─ ─ genesis. Dev. Ts dev environment development entrance ├ ─ ─ genesis. Prod. Ts production development entrance ├ ─ ─ Genesis. Ts Dev and production environment, General Logic Package ├─ Index.html Basic HTML Template ├─ Package. json Package Management Configuration ├─ Readme.md Project Description Document ├─ Stylelint.config.js Stylelint ├─ └─ ├─ ├─ map.lock ├ -dependent version lockCopy the code

Genesis

Genesis is a Vue SSR library, which provides the most basic SSR capabilities, based on which you can implement microfront-end, microservice architecture, if you want to know more about it, please check its official documentation

portal

Github.com/lzxb/vue2-d…