The preface

  • 18 days to complete the development of a customer service + background system to online
  • Completed the development and test of a data standardization system in 21 days
  • Completed the development of a data processing system and put it online in 1 month
  • Completed the development of visual system of a bank’s collateral and put it online in one month

The above time is total hours, not working hours. Timing starts from requirement review to test or launch. Except for the first one, which is agile development, all the others are normal development. There aren’t many pages, but they all have everything.

In the past year and a half, some of the high-intensity projects completed were not only about how to work overtime, but also about how to improve development efficiency.

The article part of the custom points to Mac + WebStorm encoder + vue, but the custom is universal.

Project Launch

Compile your own project template by extracting common parts from projects you have already worked on. Of course, many companies have their own project templates or their own architects, but that doesn’t stop us from accumulating our own.

With our own project template, we don’t have to spend too much time on starting a new project. However, for any project, the architecture part is very important. A good project architecture can greatly improve the later development efficiency, and at the same time have a decisive impact on product experience and performance.

Basic template building process:

  • Build a basic template using familiar frameworks (Vue, React, Angular)
  • Introduce basic configuration around the frame (vUE :vuex, VUE-Router)
  • Introduce UI frameworks (Element-UI, Ant-Design, Mint-UI…
  • Configure customary ES/TS configurations
  • Configuration customary and good directory configuration
  • Introduced the commonly used plug-in (axios lodash, less and sass, qs, vuex – persistedstate mockjs…).
  • Commonly used general function introduction
  • Webpack optimization configuration, etc
  • Configuring automated tests (never done…)

The specific project process is not detailed (accumulation will have part of the introduction), their own is not good enough, of course, you can also find the right template online, at the same time, the template needs to continue to optimize the accumulation.

Save the template to your git repository and call it whenever you need it. Here’s how to use a template for a new project:

Edit the article

Common file templates

Webstorm for example

Right-click any project File –> New –> Edit File Templates:

Here we can add our own file templates and save a lot of time when creating new page files.

Common code templates

Open encoder Settings –> Editor –> Live Templates:

Select any of the appropriate classes in the right sidebar and click “+” on the right side to add your own code template.Enter the designation of triggering code blocks in Abbreviation and the instruction Description in Description, using simple console.log() as an example:After editing, click Define, select the effective file, and then click Apply to complete the editing of a code template. This way you can use code command + TAB to quickly enter your code template in the validation file of your choice.

The effect is as follows:

No matter which editor you use, learn to use custom code modules, which can greatly improve your development efficiency!

Commonly used shortcut

Just to name a few shortcuts that are used very frequently during development.

⌘ command; ⇧ shift; ⌥ option

  • Chrome Shortcuts:

⌘ + T: To quickly open a new browser window

⌘ + W: Closes the current browser window

⌘ + E: Open developer tool (to set up custom via computer)

  • Webstorm shortcuts:

⌘ + W: To quickly close the current edit file

⌘ + delete: deletes the entire row where the cursor is located (very useful)

⌘ + D: To quickly copy the current row, or to the selected multiple rows and insert into the next row (very useful)

⌘ + return: Compared to using a line feed directly, the cursor position remains the same

⇧ + return: Insert a descending blank line, cutting the cursor across, regardless of the cursor position in the current row (very useful).

⌘ (+ ⇧) + F: ⌘ to the current file (global) search

⌘ (+ ⇧) + G: matches a lower (up) search

⌘ (+ registering) + R: ⌘ (global) substitution to the current file

⌘ + ⇧ + O: Search by file name

⌘ + ⌥ + L: File formatting (click project folder to format the entire folder)

⌘ + L: to locate to the corresponding row

⌘ (+ ⇧) + Z :(p) revoke

⌘ + ⇧ + V: Invoke a stickboard, which can select a historical copy and paste from the stack

⌘ + ⇧ + C: To copy the file path (click the project directory to copy the corresponding path)

Command line input: open.(Space and dot are instructions, can quickly open the command line current location file)

  • NPM editor features:

The editor allows us to run scripts saved in the Package directly in the NPM module of the editor, which makes it much easier to restart and stop the script than to run it by typing instructions. We can also consider adding automatic packaging and compression instructions, or even code submission instructions.

Accumulation of article

project

  • Axios: including request and response interception configuration, QS data processing, common status code return prompt information processing, etc.
  • UI components: Encapsulate UI components twice according to project requirements.
  • CSS: a set of custom less/sass public method encapsulation, a set of common reset method (reset original style).
  • Store: A custom state manager skeleton that ensures that only data needs to be added after a project starts.
  • Router: Reencapsulation of routes, including cyclic route addition and route interception
  • Image: Introduction of an SVG icon or font icon library
  • Components: Generic project components
  • Tools: general project tools, as well as their own accumulated easy to use JS functions

These do not go into detail, there will be a very complete plan online. All but the last three items can be added to your project template. The last two suggestions are to be accumulated through separate projects.

other

Create a bookmark folder for common tools in your browser:

  • TinyPNG(Image compression)
  • Qr code of forage (QR code generation)
  • BEJSON(JSON online formatting)
  • Wechat public platform
  • Map picker (Map pickup)
  • Echarts community

.

Here are two MAC apps you can use to improve your productivity:

  • CheatSheet(Can press long to ⌘ to view current software shortcut)
  • BetterTouchTool(can add various touchpad commands)

Data report

Fast replication of interface data

Open up Network, select the interface you want to fetch data from, right click ‘Store as Global variable’Switch to the Console, and you can see that a temp1 variable has been generated (the number increases depending on how many times you copy it). The Console type Copy (temp1) and has added the desired data to the clipboard. Use the paste function to copy the desired data.

The data processing

Brush the front question bank (force button) appropriately to improve their data processing ability.

The mock data

In emergency project development, the front-end page must be in front of the back-end interface, so it is inevitable to reserve the interface joint adjustment. How to ensure that the follow-up joint adjustment takes the least time? Mock data is worth having.

Configure your own mock introduction scheme and add it to your project template to add the project Mock launch environment.

  • The installation

yarn add mockjs -D

  • The introduction of

Add the Mock directory and introduce MockJS by determining at the entry whether the Mock environment is there, where @sys is a custom drag alias.

  • The mock configuration

As follows, we can intercept the request for ‘common/login’ and return our custom mock dummy data

  • API configuration

With this configuration, we developed our own page and configured the mock data. During the syncopation, we only need to add the back-end interface link to the realUrl, and then do the corresponding mapping in the data processing to complete the syncopation.

  • API uniform throw

API suggested to make a unified throw, so that the introduction will be very convenient, of course, I here directory file and throw API variable name does not correspond, not do bit, should be adjusted, so that when looking for the interface can directly locate the corresponding folder.

Stern said

Good habits may be uncomfortable at first, but when they are developed, the benefits can be huge.

  • Get used to template development
  • Get used to shortcuts
  • Habit accumulation practical tools

Also strongly recommended: Get your own work laptop (MacBook Pro suggested)