❝Я давно хотел написать статью о библиотеке инструментов фронтендеров, потому что обнаружил, что фактическое наличие инструментов — это основа для того, чтобы стать специалистом по инструментам.
❞
01 Предисловие
В последнее время многие новички оставляют фоновое сообщение: «Я новичок, как мне быстро начать работу с интерфейсом?». Не очень легко ответить на этот вопрос, потому что это все равно, что сказать, что я нищий, как быстро разбогатеть. Но не невозможно ответить на ваш вопрос.Ведь овладение точкой знаний все же имеет свой путь.Нельзя сказать,что путь тот же,но по крайней мере его можно использовать для справки.
Далее я познакомлю вас с библиотекой инструментов для фронтенда с точки зрения новичка, но не начинающего, как быстро разобраться в знаниях для вас и быстро начать работу (самостоятельно).
02 Основное введение
Говоря о базовом входе, он на самом деле очень простой, и я пришел сюда в начале. Это не что иное, как начинать с самого простого html/css, в то время все приходилось набирать самому, как теперь библиотека компонентов может быть такой удобной! Можно только сказать, что сейчас все слишком счастливы: так называемые предшественники сажали деревья, а последующие поколения наслаждались тенью. Но не забывайте, как посажено дерево.
Каждый должен знать этот сайт, он просто初学者的福音, В нем есть все, но это очень просто. Все, не думайте, что вам не нужно изучать основы, как и предметы, изучаемые в колледже, книги со словом «базовые» часто самые сложные. Можно сказать, что если друзья, работающие с интерфейсом, пройдут все вышеперечисленное о интерфейсе, вы начнете. Времени около недели-двух, и это не сложно, если вы профессионал, то начать работу будет проще.
На самом деле это похоже на учебник для новичков, а также содержит базовые знания, такие как метки.Я думаю, что полезно посмотреть учебник для новичков, и каждый может узнать об этом.
Это действительно мое启蒙网站, хоть сейчас и не употребляется повсеместно, но всегда был на первом месте в моих фаворитах. Нет причин для чувства. Этот сайт мне порекомендовал старший брат еще до того, как я поступил в институт, в то время я в основном изучал курсы C++, а потом пошел изучать фронтенд (потому что он простой)
Многие из перечисленных выше курсов являются платными, но есть и хорошие бесплатные курсы.Студенты, которые не хотят читать книги или учебные пособия, могут перейти на MOOC.com.
Это также относительно простой документ. Содержание немного глубже, чем в первых двух, и объяснение знаний на месте. Его можно использовать как собственный документ, когда вы обычно консультируетесь с ним. Я думаю, что макет веб-сайта хорош. , а страница классификации знаний очень организована.
03 Продвинутые упражнения
После того, как вы начнете с основ, вам следует поэкспериментировать с некоторыми более интересными технологиями, такими как vue и react, которые являются популярными интерфейсными технологиями.前端必学的技术, потому что вы не осваиваете и не используете их, вы в принципе не можете получить работу.
Это非常容易上手Внешний интерфейс предполагает, что вы уже выполнили упражнение по базовому входу. И его окружение, и экология очень полны, и есть много поддерживаемых библиотек компонентов, которые будут представлены позже. так强烈推荐Все изучают этот фреймворк, вы можете писать простые эффекты и тому подобное, и получать удовольствие от внешнего интерфейса.
Также представьте инструмент формирования шаблонов Vue, который позволяет быстро создать проект Hello World, а затем выполнить快速的开发, сосредоточиться на бизнесе. Обычно используется чаще.
Поскольку я не очень хорошо знаком с технологическим стеком реакции, я остаюсь только на документе, но я также сделал простую демонстрацию и знаю идею цитирования компонентов, разделения бизнеса и т. д. Лично я думаю, что это похоже на vue, и это тоже компонентное мышление, его должен изучить каждый.
С появлением Node.js фронтенд-инженеры вошли в серверную разработку, как тигр с крыльями, что сделало JavaScript языком, который может работать на стороне сервера. и другие инструменты постобработки.Забавно думать, что это можно написать на языке терминала, а теперь это можно написать и на JS. И теперь есть еще два зрелых фреймворка, чтобы на фронтенде можно было легко разрабатывать full-stack приложения, можете глянутьExpress,KoaРамка.
Если вы хотите полностью понять инструмент упаковки webpack, вам следует внимательно прочитать его документацию.Существует множество конфигураций свойств webpack.Вы можете знать функцию каждой конфигурации, и вы должны обращать внимание на версию при ее использовании. многие странные ошибки могут быть решены, если вы понизите версию. Если вы хотите изучить принцип, оптимизацию и т. д., вы можете прочитать "Углубленный веб-пакет"Эта книга, вы будете знать много знаний.
❝Поскольку я не был в контакте с Angular, я не буду больше говорить об этом, но не исключено, что есть также компании, использующие технологию Angular, поэтому вы должны узнать о ней больше, когда у вас будет время.я хочу понять
❞
04 Красивая библиотека компонентов
Итак, вот часть, которую я хочу представить больше всего. На самом деле, это также более удобно для наших ежедневных бизнес-потребностей. Проще говоря, это освобождает нашу фронтенд-разработку от необходимости писать сложные CSS или HTML.开箱即用. Я также очень благодарен интерфейсному сообществу за их большой вклад.
Мне очень нравится эта библиотека компонентов, потому что некоторые из ее функций могут в основном удовлетворить мои потребности в разработке, а также она очень проста в эксплуатации, прямое введение CDN или установка npm, вы можете выбрать. Самое главное — иметь возможность сотрудничать с Vue.js для разработки проекта.
Это front-end библиотека компонентов производства Ant Financial.Она также очень проста в использовании.Лучше испытать ее на себе.Также она поддерживает использование front-end фреймворков,и сейчас выпущена версия 4.0.
Это первая библиотека компонентов для фронтенда, которую я использовал.В то время, когда я обнаружил ее, я почувствовал, что мир внезапно открылся очень много, потому что я соприкоснулся с этим из базовой записи.Это было рекомендовано фронтом - Конец юной леди. Хотя сейчас в основном не употребляется, но все равно это то же самое предложение, где чувства, тоже рекомендую.
Кажется, эту библиотеку UI-компонентов тоже многие рекомендуют, это front-end библиотека компонентов, разработанная Али, я ей никогда не пользовался, можете зайти и посмотреть.
Это библиотека компонентов для внешнего интерфейса, разработанная Didi, и она также поддерживает синтаксис Vue.js.Я никогда не использовал ее, так что вы можете узнать о ней.
05 Разработка мини-программы
В последнее время я также занимаюсь работой, связанной с разработкой небольших программ, на самом деле разработка небольших программ сейчас гораздо удобнее, потому что существует множество фреймворков для небольших программ, поэтому я представлю их далее.
Этот особо представлять не надо, все-таки это старший брат, а у официала еще и родная поддержкаБиблиотека компонентов WeUI, тоже очень удобно.
Это относительно хорошо разработанная в последние годы платформа для небольших программ. Она может не только разрабатывать небольшие программы, реализовывать многостороннюю разработку, но и компилировать в приложения. Это заставляет людей думать об этом. Что еще более важно, он также поддерживает синтаксис vue, что не может быть слишком круто.
Говоря об уни-приложении, я должен упомянуть его плагин-маркет, который так же удобен, как мы обычно покупаем овощи на овощном рынке, просто бери и пользуйся, и это бесплатно. Но также, чтобы увидеть, есть ли какие-то проблемы с совместимостью и так далее. Если у вас возникли проблемы с загрузкой плагина, не распыляйтесь, потому что каждый вносит свой вклад в сообщество, и мы должны поощрять авторов.
Это комментарий от маленького золотого самородка. Я только что нашел этот сайт и подумал, что он очень хорош. На его официальном сайте говорится, что это лучший UI-фреймворк в экосистеме uniapp. Комплексные компоненты и удобные инструменты облегчат задачу. ты.. как рыба в воде. Я еще не начал использовать его, вы можете попробовать, он должен быть хорошим.
Это небольшая программная структура, разработанная Jingdong, ее введение一处代码，多出运行, Я использовал давным-давно, я забыл, каково это. Вы также можете взглянуть на сеть Quguan, возможно, эта структура вам не понравится!
Это небольшая программная среда, разработанная Meituan, которая также поддерживает синтаксис vue.js, а также поддерживает жизненный цикл небольших программ, что означает, что применимы как жизненный цикл vue, так и небольшие программы.
Сказав так много, я хотел бы порекомендовать набор данных о небольших программах, которые я считаю очень хорошими. Каждый раз, когда я разрабатываю небольшую программу, я смотрю, что полезно использовать. Другие очень хорошо обобщили это!Сводка ресурсов по разработке мини-программы WeChat
В последнее время использование mpvue для разработки небольших программ также использует эту библиотеку компонентов для разработки.Я должен сказать, что это очень хорошая библиотека компонентов.Компоненты в ней очень богаты и могут удовлетворить наши потребности в развитии бизнеса.
Это также высококачественная библиотека компонентов пользовательского интерфейса, основанная на Vue.js. Я должен сказать, что текущая библиотека компонентов слишком богата, что является благословением для наших фронтенд-людей.Теперь фронтенд также все больше и больше фокусируется на опыте разработки.С компонентами пользовательский интерфейс мгновенно становится чрезвычайно дружелюбным .
❝Ну так давайте познакомим, не все могут пользоваться каждым из них, если есть другие полезные, позже обновлю!
❞
06 Полезные инструменты
Говоря об инструментах, вот введение в фронтенд-инструменты, которые должны использовать фронтендеры.
Это инструмент отладки интерфейса, потому что передняя и задняя части часто交互Использование этого инструмента может быть очень удобным для отладки и определения места проблемы.Он поддерживает несколько методов запросов для отладки, а также может выполнять различные операции, такие как передача значений.
Google Chrome имеет очень большую долю рынка, потому что он не только обеспечивает удобный просмотр, но, что более важно, имеет очень хорошую функцию отладки.chromium
Sifu также является хорошим дискуссионным сообществом, и у меня также есть много трудностей, чтобы найти решения на нем.
Это мощнее.Есть разработчики со всего мира, а также это активное дискуссионное сообщество.Есть много замечательных людей,которые помогут вам ответить на ваши вопросы. Но единственный недостаток в том, что ваш уровень английского языка относительно высок, но вы также можете щелкнуть правой кнопкой мыши и перевести его.
Niuke.com очень помог мне, когда я искал работу, особенно с точки зрения внутреннего продвижения по службе.На нем также есть много компаний, которые публикуют некоторую внутреннюю информацию о продвижении по службе, и многие пожилые люди и сестры порекомендуют ее вам. , Каждый должен добавить этот сайт в закладки.
Это платформа для хостинга кода, которая удобна для нашего привычного хостинга проектов.На ней много проектов с открытым исходным кодом.Лучший способ научиться новичкам - это git клонировать ее и посмотреть, как другие пишут код.Ваше собственное улучшение должно быть отличный. Также естьОблако кодаЭто не плохо, это быстрее при посещении внутри страны.
Есть и такие, какЗнай почти,короткая книга,CSDNЭто более популярно, и качество контента, на мой взгляд, в порядке. Но вы также можете пройтись по магазинам, вы также можете найти хорошее решение.
08 Отличный личный блог
На самом деле есть много отличных блогов, здесь я рекомендую несколько, которые я считаю лучшими.
Блог Учителя Жуана также принес мне большую пользу, и я почерпнул из него много полезных знаний и жизненных принципов.
Добросовестный блоггер в индустрии выпустил много бесплатных видео. Я смотрел набор реакций и чувствовал, что это очень ясно. Это определенно поможет многим людям начать работу с интерфейсом.
И, наконец, бессовестно рекомендую мой собственный блог.Хотя я только начал, ведение блога также является свидетельством моего собственного роста и стимулом для самого себя. Я также надеюсь добиться прогресса вместе с вами в кругу переднего плана, и я также надеюсь, что вы можете внести предложения. Я также открыл свой собственный публичный аккаунт»前端小时", также является записью моего собственного роста, я надеюсь, что все обратят внимание и поддержат, ха-ха.
Блог не создается вручную, а также использует систему блогов с открытым исходным кодом.HEXOпостроен. Вы также можете создать свою собственную систему блогов, с которой легко начать! Вы можете увидеть статью, которую я написал ранее о создании блога.Xiaobai также может создать блог》
09 Другие полезные сайты
Этот веб-сайт CDN может легко представить различные CDN, включая vue.js и Element-ui.
Каждый раз, когда я разрабатываю значок, я просматриваю его.В принципе, вы можете найти нужный значок, и вы можете легко загрузить нужную линейку.
После того, как вы использовали его один раз, вы можете загрузить различные типы шрифтов, и вы можете использовать их напрямую. Используется не очень часто, за исключением некоторых особых случаев.
Очень популярный фреймворк для мобильной разработки, который можно разрабатывать на разных платформах, а это значит, что и Android, и IOS можно скомпилировать с одним и тем же набором кодов. Я использовал его один раз, и я думаю, что это очень хорошо, и вход относительно прост, в основном он похож на внешний интерфейс, но для начала требуется время.
Функция карусельной диаграммы предоставляет различные стили и функции карусельной диаграммы и т. д., а также может использоваться совместно с vue.js, но используется мало, поскольку в библиотеке компонентов есть аналогичные функции.
10 Резюме
Что ж, сегодняшняя статья будет размещена здесь. Я рекомендую всем сайты и инструменты, которые я использую для своей коллекции. Непросто систематизировать данные. Надеюсь, вам понравится и вы обратите внимание. Если у вас есть полезные инструменты, вы можете оставить сообщение внизу статьи. , я обновлю статью выше.
希望大家能够好好利用这些网站，提高自己的业务能力，觉得文章不错也可以关注一下我的公众号！文章都同步发送！ Спасибо всем!
В этой статье используетсяmdniceнабор текста