❝

I have long wanted to write an article about the front-end man’s tool library, because I found that having tools is the foundation of becoming a tool man.

❞

01 preface

Recently there are a lot of beginners in the background message said: “I am a small white, how can quickly start the front end ah?” . It’s not an easy question to answer, because it’s like saying I’m a pauper how to get rich quick. But it is not without a way to answer you this question, after all, master a knowledge point or its path, can not say the path is the same, but at least can refer to.

Next, I will be a beginner but is not a beginner’s point of view to introduce the front end of the people’s tool library exactly what, how to quickly help you comb knowledge points, quick entry (master on their own).

02 Basics

Said the basic entry, in fact, is really very basic, I began to come over so. Nothing more than to start with the simplest HTML/CSS, at that time everything had to knock on their own, which is now so convenient component library! Can only say that now we are too happy, the so-called predecessors plant trees, descendants enjoy the shade. But don’t forget how trees are planted.

• Novice tutorial

You probably know this site, it’s a beginner’s Gospel, it’s got everything, but it’s very basic. We must not think that the foundation is not hard to learn, just like the university to learn the subject, with the basic two words of the book is often the most difficult. It can be said that the front end of the friends if you go through the above about the front end, you will get started. Time is ok probably one to two weeks, and also be to do not have what difficulty, if you are section of one’s previous experience, that is easier to enter.

• W3school

This is actually about the same as the rookie tutorial, but also the basic tags and other knowledge points, I think it is good to see the rookie tutorial, we can also understand.

• For class network

This is really my enlightenment site, and although it’s not used much anymore, it’s always number one on my favorites list. No reason, just for a feeling. This website was recommended by one of my senior students before I went to university. At that time, I mainly learned c++ courses, but later I went to learn front-end (because it was easy).

There are a lot of courses that are paid for, but there are also good free courses that you can go to if you don’t want to read a book or a course.

• MDN

This is also a more basic document, the content is a little deeper than the first two, knowledge explanation is also more in place, usually refer to the time can be used as their own document, the layout of the site I think is good, knowledge classification page is very organized.

03 Advanced exercise

When you learn the basics, you should learn some interesting technologies. For example, Vue and React are popular front-end technologies, which are required to learn, because you will not find a job if you do not master or use them.

• Vue.js

This is a very easy front-end framework to get started with, if you’ve already gone through the basics. It also has a very complete environment and ecology, as well as many supported component libraries, which will be described later. So I strongly recommend you to learn this framework, to be able to write a simple effect and so on, find the front end of the fun.

• Vue CLI

Also talk about Vue’s scaffolding tools, which allow you to quickly generate a Hello World project and then develop it quickly and focus on the business. Usually used is more.

• React

I’m not very familiar with react stack, so I just stick to documents. However, I have done simple demo, and I know the ideas of reference components and service separation. Personally, I think they are similar to VUE.

❝

I won’t say more about this because I haven’t touched Angular, but there are companies that use Angular technology, and you should learn more about it if you have time. I want to know

❞

04 Exquisite component library

Ok, here comes the part I want to introduce most, in fact, this is more convenient for our front-end daily business needs. To put it bluntly, it frees up our front-end development, no need to write complex CSS or HTML, out of the box. Thanks to the front-end community for their tremendous contribution.

• Element-ui

I like this component library very much, because some of the functions are basically able to meet my development needs, but also very easy to get started, direct CDN introduction or NPM installation, you choose. The most important thing is to cooperate with vue.js for project development.

• Ant Design

This is produced by ant Financial front end component library, is also very easy to use, say more is not as good as everyone to experience, it is also support front end framework use, and now version 4.0 has been released.

• Bootstrap

This is the first front-end component library I used. At that time, WHEN I discovered it, I felt that the world suddenly opened up a lot, because I have been in touch with this since I started to get basic knowledge. It was recommended by a front-end sister. Although now basically has not used, but still that sentence, feelings, also recommended.

• Fly ice

It seems that this UI component library is recommended by many people. It is the front-end component library developed by Ali. I have not used it.

• Cube UI

This is a front-end component library developed by Didi. It also supports vue. js syntax. I have not used it, you can also know about it.

05 small program development

Recently also do small program development related work, in fact, small program development is now a lot more convenient, because there are a lot of small program framework, the next introduction.

• The official development

This is not too much introduction, after all, is the big brother, and the official support of the WeUI component library, is also very convenient.

• uni-app

This is the development of a better small program framework in recent years, not only can develop small programs to achieve multi-terminal development, but also can be compiled into APP, think of people are moving. More importantly, it also supports VUE syntax, which is not too cool.

• Uni-app plug-in market

Speaking of Uni-App, we have to mention its plug-in market, which is just as convenient as shopping for vegetables in the grocery market. It is also free. But also look to see if there are some compatibility issues, etc. If you have any problems downloading plug-ins, don’t spray them, because everyone is contributing to the community, and we should encourage the authors.

• uView

This is a comment from a gold-digging friend. I just found this website and found it very good. According to its official website, this is the best UI framework of UniApp ecosystem, with comprehensive components and convenient tools that you can easily use, like a fish in water. I have not yet started to use, you can try, should be good.

• Taro

This is a small program framework developed by JINGdong, its introduction is a code, more than run, I used once a long time ago, forget what feeling. You can also go to the official website to know, maybe not fall in love with this framework!

• mpvue

This is a small program framework developed by Meituan, is also support vue.js syntax, and it also supports the life cycle of small program, that is, vue life cycle and small program are applicable.

Said so much, I think you recommend a very good summary of small program information, every time the development of small program will see what in the end with good, others summed up very good! Summary of wechat applets development resources

• vant-weapp

Recently using MPVue development small program is also the use of this component library for development, have to say that this is a very good component library, the components are very rich, to meet our business development needs.

• View UI

It is also a high quality UI component library based on vue.js. I have to say that now the component library is too rich, it is the good news for our front-end people, now the front-end is also more and more focused on the development of experience, with components to make the user experience instantly become very friendly.

❝

Ok, so much on the introduction, we are not necessarily each of the use of the top, the back if there are other good to update!

❞

06 Useful Tools

Speaking of tools, here is the introduction of front-end people will use front-end tools, we must have a good collection.

• postman

This is an interface debugging tool, because the front and back end often have interactive operations, the use of this tool can be very convenient debugging, but also know where the problem is, it supports a variety of request methods for debugging, can also carry out a variety of operations such as value transmission.

• Google Chrome

Google Browser has a very high market share, because it not only has a good browsing experience, but more importantly, it has a very good debugging function. I introduce Chromium browser here, which is the same, click to download.

• Color conversion

This is a color conversion tool, very convenient for your color value. I have been using this one before, but recently I found that the screenshot function of QQ can also absorb color, directly CTRL + C can get hexadecimal color, it is not too cool.

• navicat

Navicat is a database management software, you can easily view the various tables in the database data and so on, but this is a charging software, we need to see the situation. Or you can find some way to use it, just keep it out of the way.

• WEBPAGETEST

This is a site testing tool that can see the details of the time you spend requesting a site and can be used to optimize your site. But I don’t use it that much. I just stumbled on it.

07 Discussing the Community

• The Denver nuggets

The first recommendation is nuggets, I think the quality of the articles here are very high, everyone’s activity is very good, very like this community. You can also take a look at the Nuggets brochure, also very good.

• Think no

Sifu is also a good discussion community and I have many difficulties finding solutions on it.

• stackoverflow

This one is awesome. It has developers from all over the world, an active discussion community, and lots of great people to help you answer your questions. But the only disadvantage is that your English level is relatively high, but you can also right click, complete the translation.

• Cattle from

Niuke network in my job search this period of time to help me a lot, especially in the push, there are a lot of companies will release some push information, there are also a lot of seniors to recommend you, we must collect this website.

• github

This is a code hosting platform, convenient for our usual project hosting, there are many open source projects, the best way for beginners to learn is git Clone, see how others write code, their own improvement is sure to be great. At the same time there is a code cloud is also good, domestic visit faster.

In addition, there are some like Zhihu, Jian Shu, CSDN this is more popular, the quality of the content can also feel. But you can shop around, you can find a good solution.

08 Excellent blogs

There are a lot of good blogs out there. Here are a few that I think are good ones.

• Nguyen half-stretching

Ruan teacher’s blog is also let me benefit a lot, also learn a lot of useful knowledge points and life truth, above also recorded ruan teacher’s log experience, etc., it is worth everyone to see.

• Technology of fat

There are a lot of free videos on react. I think the react video is very clear and definitely helps a lot of people get started.

• My blog

Finally shameless to recommend their own blog, although I just started, but writing blog is also a growth record of their own, but also to their own a spur. I’m also looking forward to working with all of you on the front end of this community to make progress together, and I hope you can make suggestions. I have also opened my own public account “Front-end Hours”, which is also a record of my growth. I hope you will pay attention to and support me.

The blog was not built by hand, but by using the open source blogging system HEXO.

09 Other useful websites

• BootCDN

This one CDN site can easily introduce various CDN, including vue.js, element-UI and so on.

• Font Icon 1

Every time I look up the ICONS used in development, basically you can find the icon you want, you can easily download the ruler you want.

• Font Icon 2

In addition to the Font icon library above, this one is also good and can be downloaded for free, as well as my favorite Font Awesome. All very good!

• Font type

Used once, there are various types of fonts available for you to download, directly imported can be used. Not very often, except in very special circumstances.

• Flutter

A popular mobile development framework that can be developed across platforms, which means that android and IOS can be compiled using the same set of code. I used once, feel very good, and the entry is relatively simple, basically and the front end is about the same, but need to get started time.

• Shuffling figure

Vue. Js, but not much, because the component library also has similar functionality.

• mdnice

This is a typeset website used to write blog, there are many kinds of topics but you can make your markdown format article typeset more concise and beautiful, I am now using MDnice to write the article, recommend to everyone!