Адрес фактического центра электронной коммерции SpringBoot (30k+star):GitHub.com/macro-positive/…
Резюме
Позвольте мне рассказать об этом примере этого примера изучения Vue, чтобы рассказать о моем методе обучения? На самом деле с моего гитхаба пришло много друзей, большинство из них Java backend разработчики, VUE как фронтенд технология, и людей немного. Поэтому, используя в качестве примера процесс обучения Vue с нуля, каждый может изучить новую технологию, давайте поговорим о моем методе обучения!
ясная цель
Когда мы изучаем новую технологию, мы должны иметь目标да, да目标Учеба не занята. Например, какова моя цель изучения Vue, на самом деле,做个后台管理系统的前端界面, вот как это выглядит ниже!
Технологий для фронтенда много, и самыми популярными являются эти три: Vue, React, Angular, но почему я выбрал именно Vue? Сначала я изучил все три.Первое, что я изучил, был React, но посмотрев синтаксис, я почувствовал, что он не соответствует моим прежним привычкам (раньше я немного изучил JavaScript), поэтому не стал выбирать это, но Angular изучал его на протяжении всего Сына, попользовавшись некоторое время TypeScript, я до сих пор к нему не привык, поэтому в итоге выбрал Vue.
Есть три основных причины выбрать Vue:
- Во-первых, Vue есть на Github.
Star最多, поскольку его можно поставить на первое место, он всегда имеет свои преимущества; - Во-вторых, выступает за
渐进式学习, переход с JavaScript на Vue плавный, нет крутой кривой обучения; - Вот и все
中文文档非常完善, что полезно для нашего обучения.
базовое обучение
После выбора технологии, которую нам нужно изучить, следующим шагом будет изучение основ Vue.强烈建议После прочтения официального руководства, когда я изучаю новые технологии, я обычно читаю официальные документы на китайском языке.
Официальный адрес документа:cn.vuejs.org/v2/guide/
Когда я только начал учиться, я просто смотрел教程Этот может:
Позвольте мне рассказать о некоторых моих мыслях, когда я читал документ.理解В основном непонятный контент можно временно пропустить. Вам не нужно копаться в каких-то непонятных деталях.Возможно, что вы не можете использовать то, на что вы наткнулись в свое время. Беглый взгляд на документацию и расширение ваших знаний об этой новой технологии является наиболее важным. Чем лучше вы разбираетесь в новой технологии, тем лучше вы можете ее использовать.
Проектно-ориентированный
Когда у вас есть определенное понимание Vue, вы можете найти проект с открытым исходным кодом, наиболее близкий к вашим целям, изучить стек технологий, используемый в проектах с открытым исходным кодом, и быстро достичь своих целей.
Как вы нашли этот предмет? Просто зайдите на Github, чтобы найти его, просто выполните поиск по ключевым словам.Vue,согласно сStar数最多рейтинг!
Итак, мы нашлиvue-element-adminЭтот проект с открытым исходным кодом:GitHub.com/pan Джей И.А. Чен/…
Как правило, такой интерфейсный проект будет иметь адрес онлайн-предварительного просмотра.Давайте сначала посмотрим:Pan Jiachen.GitHub.IO/v UE-элемент…
Этот проект соответствует нашим целям, но выглядит слишком сложным: мы только что закончили изучение основ Vue, и его изучение почти равносильно убеждению нас бросить курить. Забудьте об этом, давайте сначала взглянем на его официальную документацию:Pan Jiachen.git ee.IO/v UE-элемент…
Мы можем обнаружить, что существует такжеvue-admin-templateБазовый шаблон проекта:GitHub.com/pan Джей И.А. Чен/…
Я посмотрел на его страницу предварительного просмотра и обнаружил, что это намного проще, чем выше, поэтому я решил, что это все.
расширить знания
Найдя целевой проект, приступаем к его изучению. Чтобы изучить проекты с открытым исходным кодом, нам пока не нужно смотреть на его исходный код, а сначала изучить его технологический стек. Если у вас есть понимание технологии, которую он использует, научиться этому легко!
В обычных условиях технологии, используемые в проектах с открытым исходным кодом, объясняются в README, но в этом проекте этого нет. Для проектов Vue просто посмотрите на егоpackage.jsonМы можем получить общее представление о его технологическом стеке из файла.
{
"dependencies": {
"axios": "0.18.1",
"element-ui": "2.13.0",
"js-cookie": "2.2.0",
"normalize.css": "7.0.0",
"nprogress": "0.2.0",
"path-to-regexp": "2.4.0",
"vue": "2.6.10",
"vue-router": "3.0.6",
"vuex": "3.1.0"
}
}
Что нам нужно сделать дальше, так это изучить все технологии в стеке технологий, или理解Главное, расширить свои знания.
axios
Клиент HTTP-запросов на основе JavaScript для инициирования запросов в браузере. Просто посмотрите README проекта, чтобы узнать, как его использовать.
element-ui
Библиотека компонентов рабочего стола на основе Vue 2.0 для разработчиков, дизайнеров и менеджеров по продуктам. Грубо говоря, это библиотека компонентов пользовательского интерфейса, достаточно посмотреть официальную документацию.
js-cookie
Библиотека компонентов JavaScript для управления файлами cookie. Просто посмотрите README проекта, чтобы узнать, как ее использовать.
GitHub.com/just-cookie/просто…
normalize.css
Библиотека css, которая обеспечивает высокую степень кросс-браузерной согласованности в стиле HTML-элемента по умолчанию.Проще говоря, она совместима со стилями браузера, и вы можете использовать ее, не глядя на нее.
Github.com/ это colas / nory ...
nprogress
Компонент пользовательского интерфейса индикатора выполнения на основе JavaScript, вы, вероятно, знаете, как его использовать, просто просмотрев README проекта.
GitHub.com/Если он злоумышленник/Даже…
path-to-regexp
Библиотека инструментов, которая преобразует строки пути (например, /user/:name) в регулярные выражения. Вам нужно только посмотреть README проекта, чтобы узнать, как ее использовать.
vue
Мы уже изучили основы Vue, просто взгляните на официальное руководство.
vue-router
Vue Router — официальный менеджер маршрутов для Vue.js. Он глубоко интегрирован с ядром Vue.js, что упрощает создание одностраничных приложений. Просто посмотрите официальный учебник.
vuex
Vuex — это шаблон управления состоянием, разработанный для приложений Vue.js. По сути, это глобальный менеджер состояний, в нем хранится, например, информация для входа пользователя, которую вы будете использовать на многих страницах. Достаточно посмотреть официальную документацию.
vue-admin-template
Изучив вышеперечисленные фреймворки, мы можем приступить к изучению нашего целевого проекта.В китайском README есть поддерживающие учебные статьи, просто прочитайте их один раз.
GitHub.com/pan Джей И.А. Чен/…
После изучения всего стека технологий целевого проекта и прочтения поддерживающих его учебных статей понять исходный код не составит труда.Следующим шагом является чтение исходного кода проекта.
упражняться
Мы можем так выделить время, прочитать официальную документацию Vue за 1 день, а поставить за 2 дня.vue-admin-templateИзучите все используемые стеки технологий и потратьте еще 2 дня на изучениеvue-admin-templateИсходный код, так что вы можете изучить Vue за 5 дней.
Основные Vue узнали позже, чтобы быть в состоянии твердо усвоить практику будет выполняться, или вы узнали через несколько дней эти вещи уйдут от вас.
Как это практиковать? Вернемся к нашим целям обучения:做个后台管理系统的前端界面, что является хорошей практикой. я делала своюmall-admin-webпроект для практики.
мойmallВ проекте есть полный API для управления фоном.Хорошей практикой для всех является самостоятельная реализация некоторых функций в соответствии с моим фронтенд-проектом, а затем вы можете освоить Vue.
Здесь я рекомендую вам реализовать мой собственный модуль товаров и заказов, два самых сложных модуля, которые могут быть достигнуты до тех пор, пока эти два модуля, с другой стороны, могут быть достигнуты с помощью Vue, разработать набор систем бэк-офиса, также упоминается.
Суммировать
Наконец, чтобы обобщить мой метод обучения, прежде всего, я должен уточнить свои цели обучения, а затем изучить основы связанных технологий в соответствии с целями, а затем найти соответствующий проект с открытым исходным кодом для изучения, изучить стек технологий, а затем Практика, так что вы можете иметь хорошее представление об этой технике.
адрес проекта
Нет публики
проект торгового центраПолный набор учебных пособий сериализуется,Обратите внимание на публичный аккаунтПолучите это прямо сейчас.