Development tool IDE

  1. Download from webstorm’s official website. You need to activate or download the cracked version directly. It has full and powerful functions and has its own git version management tool
  2. Download vscode from the official website
  3. Sublime Text3 download from sublime Text3

System environment

Development environment: Windows10, NodeJS V8.0.0 +

Production environment: Centos 7/8, Ubuntu 14.04/16.04, Nginx V1.12.0 +

Mainstream development front-end frameworks

  1. Vue 2.x official website download v2 / vue 3.x official website download V3
  2. React React
  3. Angular Official website to download.The Chinese version of, Angular is not recommended because it is expensive to develop and difficult to learn, and Angular is not suitableIndividual soldiers.
  4. Jquery 官网

Server render framework

Vue —-> nuxt react —-> next

Front-end automation packaging tool

  1. Webpack official website address
  2. Gulp official website address
  3. Grunt’s official website

Supporting UI framework

Based on VUE PC

  1. Element ele. me front-end team development
  2. Developed by iView View Update Technology Inc
  3. Ant Design Front-end team development of Ali Ant Financial

Based on VUE mobile terminal H5

  1. Vant has great front-end team development
  2. NutUi JD front-end team development

Based on the React UI framework

Ali Ant Design series

Wechat applets

  1. Appapp.com website of vtmagnetism
  2. Www.iView-app.com
  3. Weui official wechat UI, designed in the same style as wechat APP

other

Bootstrap official website. Small and medium-sized projects are recommended to use the free and open source CDN acceleration service. Visit www.bootcss.com/

Basic development template framework

Out of the box

  1. Vue2.0 + Echarts big data visualization template github source code download, demo address
  2. Vue2.0 + AXIos multi-page H5 e-commerce website Github source download, demo address
  3. Vue2.0 + iView front-end user interface Github source download, demo address
  4. Nodejs + express + mysql API github source code download
  5. React + TS + ANTD front-end UI Github
  6. Native + ColorUI wechat small program github source download

CMS Background management framework

  1. Vue-element-admin Github source code download, demo address
  2. Iview-admin Github source code download, demo address
  3. D2-admin Github source code download, demo address
  4. Vue-manage-system github source code download, demo address
  5. React Ant-Design Pro

Commonly used JS function library

  1. lodashjs www.lodashjs.com/
  2. Rx. Js responsive asynchronous programming library, vuE-RX needs to be introduced in VUE
  3. Jquery is a library of functions, a JS file, that pages can use with script tags.

Common front-end plug-ins

  1. The utility library function js-utils
  2. Rich text editor ushare-Editor
  3. Swiper
  4. Visual chart plug-in
  • echarts
  • vcharts
  • G2
  • D3
  • highcharts
  1. The HTTP request axios
  2. Picture cropped cropperjs
  3. The front div turns to canvas to generate html2Canvas
  4. Cookie operation js – cookies
  5. Time manipulation moment
  6. Page loading progress bar nProgress
  7. Mobile terminal development PX to REM or VW, VH postCSS
  8. Numeric scroll effect jquery.countup.js vue-count-to
  9. Front-end encryption crypto-JS
  10. The code highlights highlight.js
  11. Markdown text to HTML marked. Js
  12. Front-end QR code QrcodeJS
  13. Prevents XSS from attacking JS-XSS
  14. Front-end multilanguage switch I18N
  15. Optimized fastClick for mobile click events
  16. Vue – meta meta operation
  17. Js front-end signature jSignature

Front-end base animation

  1. animate.css
  2. animejs

Nodejs development framework

  1. express
  2. koa
  3. egg

Version control tool

Intranet git: git-scm.com/downloads

Github.com: github.com/

File/resource name

In a Web project, all file names should follow the same naming convention.

  1. For readability, the minus sign (-) is the best way to separate file names. It is also a common URL separator.
  2. Make sure file names always start with a letter and not a number. Files named with special characters usually have special meanings and uses.
  3. Resource names must be all lowercase. This is because in some case-sensitive operating systems, when files are compressed and confused by tools or manually modified, errors that refer to different files due to different case may be difficult to detect.
  4. In other cases, you may need to add a suffix or specific extension to the file (e.g..min.js,.min.css), or a string of prefixes (e.g. 5fa89b.main.min.css). In this case, it is recommended to use dot delimiters to distinguish metadata that has a clear meaning in the file name.
  5. Avoid using Chinese names as file names.

Is not recommended

MyScript.js
myCamelCaseName.css
i_love_underscores.html
1008-scripts.js my-file-min. CSS Tianhe.zipCopy the code

recommended

my-script.js
my-camel-case-name.css
i-love-underscores.html
thousand-and-one-scripts.js
my-file.min.css
tianhe.zip
Copy the code

The HTTP/HTTPS protocol

Do not specify the specific protocol that the imported resource comes with.

The specific path that URLs point to when importing images or other media files, as well as styles and scripts, do not specify the protocol part (HTTP: or HTTPS:) unless neither protocol is available.

Not specifying a protocol changes the URL from an absolute fetch path to a relative one, which is useful when the requested resource protocol is uncertain, and also saves a few bytes of file size.

Is not recommended

<script src="http://cdn.com/foundation.min.js"></script>
Copy the code

recommended

<script src="//cdn.com/foundation.min.js"></script>
Copy the code

Is not recommended

.example {
  background: url(http://static.example.com/images/bg.jpg);
}
Copy the code

recommended

.example {
  background: url(//static.example.com/images/bg.jpg);
}
Copy the code

Text indentation

Indent two Spaces at a time (not tap, tap is interpreted differently in different editors or operating systems).

<ul>
    <li>Fantastic</li>
    <li>Great</li>
    <li>
        <a href="#">Test</a>
    </li>
</ul>
Copy the code

annotation

Comments are the only way for you and your friends to understand how code is written and what it is for.

Comments are especially important when writing seemingly trivial and inconsequential code because memory points are not deep enough.

You can never have too many code comments.

When writing comments, be careful not to write about what your code does, but about why your code is doing what it is doing, and what the reasoning behind it is. Of course, you can also add a link to the problem or solution.

Is not recommended

var offset = 0, 
	includeLabels = true;
if (includeLabels) {
  // Add offset of 20
  offset = 20;
}
Copy the code

recommended

var offset = 0, 
	includeLabels = true;
if (includeLabels) {
  /* If the labels are included we need to have a minimum offset of 20 pixels We need to set it explicitly because of the following bug: http://somebrowservendor.com/issue-tracker/ISSUE-1*/
  offset = 20;
}
Copy the code

Code review

For more liberal programming languages, it is extremely important to strictly follow coding specifications and formatting style guidelines. It’s great to follow specifications, but it’s even better to have an automated process to make sure they’re followed. Trust is good, control is better.

For JavaScript, JSLint or JSHint is recommended.