This paper mainly summarizes the selection of technical solutions in the author’s years of front-end work, and combines various types of projects to build a complete set of front-end integrated solutions, which mainly includes the following contents:

  • Vue + Vue-Router + VUex +elementUI/ ANTD/Mint + Stylus /less/ SCSS single/multi-page project built based on VUe-CLI3
  • React-router +redux+redux-thunk+ immirror + ANTD is mutable. React-router +redux+redux-thunk+ immirror + ANTD
  • Based on gulp4.0 built native JS /jquery+less/ SCSS traditional solution

Next, I’ll cover the basic architecture and design ideas of the project, and use shell scripts to implement an integrated solution for automated installation technologies. Finally, the github address will be attached at the end of the article, so that interested friends can refer to it or use it directly. If you’re not already familiar with the shell, check out my last article on the non-negligible automated deployment solution for the Vue/React project

The body of the

1. Vue integration solution — VUE + Vue-Router +vuex+elementUI/ ANTD/Mint +stylus/less/ SCS

  1. Design ideas

2. Project architecture

  1. Start the screenshots

React-router +redux+redux-thunk+ imMirror + ANTD

  1. Design ideas

2. Project architecture

  1. Start the screenshots

3. Native JS /jquery integration solution — native JS /jquery+ Less/SCSS traditional solution based on Gulp4.0

  1. Design ideas

2. Project architecture

Use shell scripts to implement automated installation technology integration solutions

#! /bin/bash
echo "Please choose technical solution vue or React or GULp"
read name
if [ $name= ='vue' ]
then
   git clone [email protected]:MrXujiang/vue_muti_cli.git
elif [ $name= ='react' ]
then
   git clone [email protected]:MrXujiang/webpack3_react.git
elif [ $name= ='gulp' ]
then
   git clone [email protected]:MrXujiang/gulp4_multi_pages.git
else
   echo "Invalid input"
fi
Copy the code

At this point we can use the following command to install the integration solution you want:

Making address:

  • Integrated VUex based on CLI3, element/ ANTD/Mint single/multi-page scaffolding
  • Package single-page multi-page applications based on WebPack3
  • Gulp4 packages multi-page applications

More recommended

  • Teach you to use 200 lines of code to write a love bean spell H5 small game (with source code)
  • How to use gulP4 development project scaffolding
  • How to write your own JS library in less than 200 lines of code
  • A summary of common JS functions that make you more productive in an instant
  • A picture shows you how to play vue-Cli3 quickly
  • 3 minutes teach you to use native JS implementation with progress listening file upload preview component
  • 3 minutes teach you to use native JS implementation with progress listening file upload preview component
  • Developing travel List with Angular8 and Baidu Maps API
  • Js basic search algorithm implementation and 1.7 million data under the performance test
  • How to make front-end code 60 times faster
  • Front End Algorithm series array deweighting
  • Vue Advanced Advanced series – Play with Vue and vuex in typescript
  • In the first three years, talk about the top five books worth reading

To restore the learning path, it will acquire the mind map of the front-end learning path of the author’s years of experience;