Front-end разработка: как написать красивую руку Vue

Несколько дней назад я услышал предложение, которое сосуществует с жизненной силой и мотивацией, одновременно пугающее и смущающее. Это меня очень тронуло. Очевидно, что это немного преувеличено, но при нынешней бездарности, идущей изо дня в день, в мгновение ока ситуация незаметно раскроется перед этой тощей реальностью. Поэтому я все больше и больше переживала, что когда нужно делать это планомерно, писать, играть, развлекаться, с пользой использовать это время, когда секреция гормонов еще сильна, накапливать, чтобы набирать, открыть и бросить, пусть не будет твоей жизни Только работа и тоска, еще есть время разделить "поэзию и расстояние". Без анализа вы знаете, как это сделать, выполнить работу эффективно, а затем научиться жить красиво. Я все еще фронтенд-разработчик, и я использую Vue, тогда есть эта статья; это не только запись или обмен, но и поиск в долгом пути, и я надеюсь обсудить и дать указания, чтобы получить представление и повысить его эффективность.

Микро Примечание:Когда я писал [Как изящно использовать Sublime Text] ранее, это заняло 10 месяцев до и после, хотя он постоянно обновлялся, он далек от этой темы. Поэтому, если вы хотите рассказать о существовании этой обширной темы, вы должны изучить ее глубоко, и это не произойдет в одночасье, поэтому эта статья будет время от времени обновляться. способы лечения вашей собственной прокрастинации.Кроме того, это также ограничение Попытка агрегации веб-сканирования.
обновить:Для того, как создать проект VueJs, естественно, рекомендуется использовать официальный скаффолдинг vue-cli.
; А для микро и небольших проектов я вполне оптимистично к POI - (восхитительное веб-разработка), которое позволяет использовать текущие популярные рамки (Vue React и т. Д.) Очень удобно. Несмотря на это, многие друзья в отрасли все еще неудовлетворительно со строительством проекта Vue; с учетом этого, на основе небольшого прошлого опыта, набор шаблонов - Vue-BateRate-шаблон предназначен для справки, и, конечно, я с нетерпением жду этого. Друзья дают исправления. который уже зависит отvue-router
,vuex,vue-i18n, element-ui, загружает множество библиотек; также внедряетсяwebpack,Eslint,pre-commitИ так далее, чтобы облегчить разработку связанных библиотек. Среди них вызов и использование интерфейса с фоном, использование vuex, формирование структуры представления, настройка маршрутизации и многоязычности, планирование публичных методов, оптимизация упаковки веб-пакетов и т. д. основаны на предпосылке удобной разработки.Сделаны соответствующие конструкции.Надеюсь, что людям сужденным понравится,причина такой конструкции будет объяснена в другой статье,когда у меня будет время,и эта конструкция также будет продолжать совершенствоваться через непрерывное обучение, так что следите за обновлениями

замечания: На арене программирования, если вы самурай, который собирается выйти, сталкиваясь с обширной и бесконечной армией потребностей; тогда вам не только нужен хороший телосложение, но и навык: и это программное обеспечение
(Или добавить алгоритм), как внутренняя сила (чакра); и использование различных языков
, это похоже на приемы боевых искусств (Девять мечей Доугу?); различные используемые инструменты должны быть подобны переносному оружию (Сяо Ли Фэй Дао?); это относится к своему собственному набору экстремальных процессов развития, который представляет собой шаг Цингун (Дяньгуан Шэньсин). ?)... Если это так, то какими навыками вы обладаете как разработчик?
Как упоминалось выше, в этой статье предполагается изучить следующие аспекты:

Как красиво использовать инструменты Vue

Если вы хотите сначала заточить инструмент, вы должны сначала заточить инструмент.Это большая пропаганда этого блога, о том, как писать Vue элегантно, в первую очередь следует упомянуть инструмент, в конце концов, это очень важно; когда вы решите использовать Vue для работы В момент фронтенд-разработки вы уже согласились с этим аргументом: ведь Vue тоже написан на нативном Js, Js написан на языке C, а C написан на ассемблере. .. Это уже не эпоха руби и выжигания, но Вы также не удовлетворили свои потребности в ассемблере или C, Так что, вы согласны. Поскольку это согласовано, есть ли какая-то причина не заботиться об этом? Итак, давайте обсудим это вместе:

Периферия: Помимо этих удобных креплений и столов, двойных мониторов,MacЭто обязательное периферийное устройство, вы знаете, пока вы пишете код в одном экране редактора, вы можете видеть производительность в другом экране Chrome, что очень эффективно, удобно и очень комфортно. в то время как макЭлегантный любовник в устройствеНаличие его является хорошим продуктом для домашнего использования. Если вы находитесь в рабочей среде, в которой не так высоко ценится эффективность или вы не проявляете должной щедрости, вы должны бережно относиться к своей энергии и времени и иметь мужество, чтобы хорошо построить собственную среду разработки.

программное обеспечение: Как разработчик, ваш компьютер и программное обеспечение, которым он оснащен, как меч в руках самурая.Будь то заниматься спросом, очень нужно его заточить. Поэтому такие как Alfred, Brew, Iterm2, О-мой-ж, Git и т.п. упоминать нельзя, для front-end разработки особенно важно оснащение и использование редакторов и браузеров (для этого пункта многие front-end конечные разработчики еще не прошли, как должно быть); для браузеров только рекомендуетсяChrome, не только просмотр или отладка, но и его поиск. пока редактор рекомендуетSublimeText3а такжеAtom;VsCodeТоже прекрасное существование, и очень удобно писать фронтенд и бэкенд (визуально, гугл тоже настоятельно рекомендует), использовать не рекомендуетсяWebStorm, потому что, кроме античеловеческого дизайна операции, он не чувствует никаких других запоминающихся моментов.

окружающий: Используйте Vue для разработки внешнего интерфейса, когда вы должны поддерживать окружающую систему инструментов, вы всегда должны следить за ней, напримерNode,Npm(Yarn),Webpack,GulpИ так далее, иLodash,superagent,d3и другие библиотеки инструментов, а также сама система Vue, такая какVue-cli, vue-routerДождитесь помощи; тогда есть расширение плагина Vue, которое постоянно обновляется.Закон Этвуда гласит, что:Any application that can be written in JavaScript, will eventually be written in JavaScript.(Перевод таков: все, что можно написать на JavaScript, в конечном итоге будет написано на JavaScript). Эта теория применима и к Vue, его простое и мощное существование, привлекло множество сверхмощных разработчиков или команд и предоставило ему бесчисленное количество полезных библиотек компонентов. Например: Ты голоден?Element-UI,а такжеvue-echarts,vue-multiselect...для получения подробной информации см.awesome-vue, проблеск его процветания.

(Группа обмена веб-интерфейсом обучения: 328058344 Сплетни запрещены, не вступайте, если вы недовольны!)

Как красиво пользоваться основами -Vue-)Основы того, как красиво использовать Vue

разработка программного обеспечения, Как программист, это должен быть навык, который следует хорошо изучить. картина[Энциклопедия кода 2]так же как[Способ очистки программы], читать надо внимательно. Разработка веб-интерфейса из-за простоты входа (и высокого спроса) создала множество людей, стремящихся к быстрому успеху, и большое количество кода, который «невыносимо читать». Front-end разработка меняется с каждым днем, если вы не можете освоить ее постепенно, в конечном счете, обиды будут не на всех остальных (людей, которые читают ваш код), а на вас самих, на простом примере, если вы не можете научиться хорошо организовывать структуру кода, даже если мастер написал структуру, как только проект становится больше, разве он не сталкивается с страданием, будучи в ловушке сам по себе? На самом деле, есть много разработчиков, которым не удается развить хорошую грамотность программирования.Такие основы, как именование методов переменных, также могут заставить людей дрожать.Очевидно, что это вредное поведение, и оно обязательно будет хорошим.

Для команды,EslintЭто действительно оружие, которое нужно экипировать; поскольку трудно гарантировать, что все будут грамотными, его нужно правильно применять; по крайней мере, это позволяет избежать накопления каких-то беспорядочных кодов, чтобы дезорганизовать армию. Конечно, в начале использования всегда найдутся люди, которые не совсем привыкли к нему, поэтому важность игры с редактором еще раз отражает его ценность; это также приводит к теме автоматизированного (полу) рабочего процесса, которые будут рассмотрены позже.

Фронтальная базовая технология, занимающихся front-end разработкой, в долгосрочной перспективе очень важны базовые навыки, особенно JavaScript, это также более очевидно при написании Vue. О других, таких как Html, Css, естественно говорить нечего; кроме того, Scss и другие препроцессоры также следует изучить и использовать для повышения эффективности разработки и экономии затрат на разработку; ведь только если вы сэкономите достаточно времени, вы это сделаете. экономит больше энергии и времени, и формируется хороший цикл.

Основы Vue, это очень важно.Если вы знакомы с [официальным руководством по Vue.js], то нет лучшего руководства, чем это; по предыдущему опыту, если вы нетерпеливы, вы не сможете есть горячий тофу, и вы будете в конце концов верните то, что вы должны; по крайней мере, сначала вам нужно прочитать его полностью, иначе вы столкнетесь с проблемами, и вы не сможете найти и исследовать вовремя, что, несомненно, приведет к потере большего количества времени. Кроме того, найдите хороший микропроект на Github и внимательно его прочитайте, вы сможете открыть для себя много геймплея, который стоит изучить.

Эффективно используйте конфигурацию, Глава 18 Большого кодекса, говориттабличный подход(табличные методы), для практиков программирования необходимо прочитать. Во многих случаях логика и отношения дерева наследования могут быть упрощены с помощью таблиц поиска. Это имеет большое значение в совместной работе команды и модели разработки подмодулей; конфигурация должна использоваться правильно, и каждый модуль должен быть разделен, чтобы не было сильной зависимости друг от друга, чтобы процесс разработки также значительно избегал конфликтов кода. . Например, чтобы понять характеристики JavaScript, вы можете написать его следующим образом:

const files = require.context('.', true, /\.svg$/)
const modules = {}
files.keys().forEach((key) => {
  if (key === './index.js') return
  modules[key.replace(/(\.\/|\.svg)/g, '')] = files(key)
})
export default modules

Таким образом можно написать удобный [Icon Component], при его использовании нужно только добавить новый Svg в ассеты, а затем заполнить соответствующее Svg имя при ссылке на иконку, что очень удобно; это, мы можем использовать эту конфигурацию для декомпозиции. Объединение различных модулей очень удобно.

Vue имеет три основные функции, которые очень приятны; одна из них — двусторонняя привязка данных, то есть связывание представления и модели через привязку данных, так что изменения данных автоматически сопоставляются с обновлениями представления. Другой — это его компонентная система, управляемая данными, то есть вложенное дерево компонентов используется для описания пользовательского интерфейса (а компонент может просто соответствовать ViewModel в MVVM), а третий — это однофайловый формат компонента, основанный на инструменты построения, то есть его Предоставляет мощный API-интерфейс загрузчика для определения логики предварительной обработки для различных форматов файлов, чтобы мы могли использовать CSS, шаблоны и даже пользовательские форматы файлов в качестве модулей JavaScript, что значительно улучшает воспроизводимость кода. ; Вебпак На основе загрузчика также может быть реализовано большое количество расширенных функций, таких как автоматическая упаковка блоков и загрузка по требованию, автоматическое позиционирование ссылок на ресурсы изображения, принятие решения об использовании встроенного base64 в зависимости от размера изображения, горячий модуль замена в процессе разработки и так далее. Конечно, у Vue есть и несколько других потрясающих дизайнов.

Ввиду этого, если вы можете освоить привязку и передачу своих данных, разработку компонентов и связанных с ними конфигураций, таких как окружающий Webpack, уровень приложения можно рассматривать как выход на новый уровень. По прошлому опыту, это непростая задача, ведь использование этого Vue тоже направлено на решение потребностей, а не на исследования. Кто может сказать, что водители, которые ездят по дорогам, могут знать об автомобиле все? Я считаю, что эти аспекты нужно еще долго изучать, исследовать, а затем использовать.

Как красиво использовать -Vue- реальных боевых компонентов)Как красиво использовать настоящие компоненты Vue

Основной особенностью Vue является использование вложенных деревьев компонентов для описания пользовательского интерфейса. Поэтому дизайн и написание компонентов очень важны; по крайней мере, убедитесь, что их легко модифицировать и поддерживать, они имеют высокую степень повторного использования и удобочитаемость, низкую связанность и допускают совместную командную разработку... и так далее. Когда проект сложный, необходимо заранее продумать дизайн всей архитектуры, чтобы он был понятным и разумным; использование кэша компонентов, избежание вывода избыточных компонентов... . Система компонентов Vue управляется данными, и она должна учитывать обмен данными между различными компонентами, чтобы избежать таких проблем, как манипулирование данными несколькими сторонами и трудности с обнаружением ошибок.

Это навык, который необходимо накапливать в течение длительного периода времени, и его нельзя достичь за одну ночь. Однако на некоторый контент нужно только сознательно обратить внимание, и его эффект можно увидеть. Например, краткие и известные имена, хорошие стандарты кодирования и единый стиль кодирования для команды, чтобы обеспечить читабельность кода. Применять принципы шаблонов проектирования, такие какПринцип единой ответственности, чтобы разделить и извлечь компоненты на более мелкие компоненты, чтобы обеспечить единую функцию компонентов, чтобы улучшить повторное использование компонентов;Принцип разделения интерфейса, используя стабильный серверный интерфейс для разделения модулей изменений, чтобы можно было разделить компоненты; в сложных проектах также необходимы избыточность и наследование, и в это время вам нужно обратить внимание наПринцип замены Лисков,Принцип инверсии зависимости… . Кроме того, при изучении оптимизации, предоставляемой самим Vue, такой как [маршрутизация ленивой загрузки], то есть: сочетание асинхронных компонентов Vue и функции разделения кода Webpack, легко реализовать ленивую загрузку компонентов маршрутизации, чтобы компонент загружался только при доступе к нему, чтобы повысить эффективность загрузки страницы, а также использовать сервер для достижения первого рендеринга экрана, кэширования компонентов и т. д., особенно для обмена данными между компонентами, которые будут упомянуты в следующем разделе и будут здесь не повторяться.

Здесь есть много моментов, которые нужно изучить и изучить. Это не может быть суммировано в нескольких словах. См. PPTVue.js на практике: Как использовать Vue2.0 для разработки многофункциональных интерактивных WEB-приложений; все они рассказывают о многих связанных моментах Vue, на которые стоит обратить внимание. Кроме того, если вы пишете общие компоненты для команды, очень важно не забыть приложить соответствующие документы по использованию. Видите ли, как упоминалось выше, для того, чтобы писать красивый Vue (код), необходимы знания в области дизайна программного обеспечения, не так ли? (Группа обмена передовым веб-обучением: 328058344 Сплетни запрещены, и вы не можете войти, если вы недовольны! )

Как использовать -Vue- реального боевого общения)Как красиво использовать Vue в реальном общении

Ранее в статье [Различные привязки данных в Vue] было некоторое описание привязки данных Vue (версия 1.); хотя Vue уже обновился до версии 2., но есть много изменений в привязке данных, но общее влияние невелико, например: экземпляры фрагментов больше не разрешены; синтаксис трех усов должен быть заменен на v-html; порядок параметров при обходе v-for изменено и т. д. Подробную информацию см. в разделе [Миграция с Vue 1.x]. Вот обсуждение передачи данных между компонентами vue.

После того, как Vue2 удалил $dispatch() и $broadcast(), в основном через prop
(Включая настройку V-модели) реализовать родительский компонент для передачи параметров к дочерним компоненте и только одностороннее пропуск;Vue2 удалил модификаторы .once и .sync, чтобы предотвратить обратные эффекты на родительские компоненты, дочерние компоненты должны явно передавать событие вместо того, чтобы полагаться на неявную двустороннюю привязку.Как только вы попытаетесь напрямую изменить данные родительского компонента, переданные через реквизиты в компоненте, это будет считаться анти-шаблоном, и будет сообщено о следующей ошибке:

Избегайте непосредственного изменения реквизита, так как значение будет перезаписываться при каждом повторном рендеринге родительского компонента Вместо этого используйте данные или вычисляемое свойство на основе значения реквизита.

Однако, если сам переданный реквизит передается по ссылке, такой как объект или массив, из-за характеристик типа данных, независимо от того, какой метод привязки, это будет двусторонняя привязка! это вДокументация Vue — однонаправленный поток данныхдля иллюстрации см. этот пример:

Здесь необходимо отметить, что Vue либо прослушивает изменения значений базового типа данных, либо прослушивает ссылочный тип данных.изменения цитирования; Поэтому Vue инкапсулирует только набор методов для массивов (включая$set , $remove), если вы напрямую измените содержимое ссылочного типа, даже если данные были изменены, Vue не будет знать об этом, поэтому представление не будет обновлено (для целевого назначения свойству метод set его свойство будет вызываться, поэтому Vue воспринимается, что приводит к обновлению представлений). Здесь нужно добавить: Vue Используйте Object.defineProperty (функция ES5) для преобразования данных вgetter/setter, так что данныеwatcher,setterПерерисовывает связанный Дом при вызове, таким образом обновляя представление.

Поэтому, если эталонные данные передаются родительскому компоненту, если вам нужно их изменить, лучше всего изменить данные после глубокого копирования, и вам нужно обратить внимание на выигрыши и потери.Object.assignНе глубокая копия, даже сObject.freeze()заморозить. Чтобы дочерний компонент возвращал параметры родительскому компоненту, вы можете использовать$emit, конечно, вы также можете использовать callback Functon, см.пример jsfiddle. Связь между компонентами, не являющимися родительскими и дочерними, Vue при условииVuex, чтобы достичь совместного доверия путем совместного использования состояния.Для этого мы должны обратить внимание на рассмотрение баланса, рассмотреть его с точки зрения общего дизайна и убедиться, что необходимо ввести ее. Если проект не слишком сложный, вы можете разработать набор самостоятельно.vue-bus, чтобы обеспечить глобальный центр событий, чтобы глобальные события можно было использовать так же легко, как и встроенный поток событий. Конечно, Vue также предоставляет$refs, который можно вызывать между слоями, или что-то вродеthis.$parent.$parent; Предоставление не означает рекомендацию, старайтесь использовать его как можно реже, если только не насильно, или для розыгрыша людей. Конечно, вы также можете использовать нативные API.sessionStorage, localStorageИ так далее для хранения данных для достижения цели общения, ибо, принимая во внимание выгоды и потери, хорошо стремиться к плоскому и унифицированному способу общения. Из-за места не буду вдаваться в подробности.

Как использовать статьи -Vue-Webpack)Как красиво использовать Vue Webpack

Как упоминалось ранее, рекомендуется использовать Vue-cli, который уже помог нам соответствующим образом настроить Webpack. При написании конфигурации маршрутизатора можно легко реализовать ленивую загрузку компонентов маршрутизации, чтобы проект можно было разделить на несколько небольших пакетов js и немного более крупного поставщика, который может быть загружен по требованию во время выполнения. То есть мы можем настроить компоненты маршрутизации следующим образом (конечно, мы также можем блокировать компоненты по группам):

import Frame from './../views/Frame'
export default {
  path: '/',
  component: Frame,
  children: [{
    path: '/nicelinks',
    meta: {
      title: setTitleLang('晚晴幽草轩', 'Nice Home Blog')
    },
    component: resolve => require(['./../views/Nicelinks'], resolve)
  }]
}

DllReferencePlugin
Кроме того, вwebpack这块, еще много чего нужно оптимизировать, чтобы сократить время сборки пакета, увеличить его размер и т.д. такие как келлиDllReferencePluginЧасто используемые файлы, которые не сильно изменились, извлекаются и вставляются в другой унифицированный файл (vendor.dll.js), а внешняя ссылка импортируется с помощью сценария. Есть много онлайн-уроков, поэтому я не буду вдаваться в подробности.

webpack-bundle-analyzer
до настоящего времениVue-cliЭто также помогло внедрить плагин [webpack-bundle-analyzer] (плагин Webpack и утилита CLI), который может отображать пакеты контента в виде интуитивно понятной древовидной диаграммы для удобства взаимодействия, чтобы вы могли понять, что на самом деле импортируется в пакет, который вы создаете; Мы можем использовать ее, чтобы узнать, из каких модулей он вообще состоит, найти неправильные модули, а затем оптимизировать его. мы можемpackage.jsonВведите в него следующую команду, чтобы облегчить ее запуск (npm запустить анализ), он по умолчанию откроет http://127.0.0.1:8888 в качестве дисплея.

"analyz": "NODE_ENV=production npm_config_report=true npm run build"

webpack-bundle-analyzer после введения плагина DllReferencePlugin, был бы добавлен к ним в vue webpack.dll.conf.js, например, такой конфигурации:

entry: {
   vendor: [
     'lodash',
     'superagent',
     'vue',
     'vue-router',
     'vue-i18n'
     'vuex'
   ]
 }

Когда вы используете webpack-bundle-analyzer для анализа, вы обнаружите, что vue.common.js с размером разбора 71 КБ появится в vendor.xxx.js, как и ожидалось, его не следует вводить в vendor.dll.js. середина? Говоря об этом, чтобы обеспечить целостность статьи, я должен упомянуть, что после обновления vue2 до версии 2.2 файлов стало 8, а именно:

vue.common.js
vue.esm.js
vue.js
vue.min.js
vue.runtime.common.js
vue.runtime.esm.js
vue.runtime.js
vue.runtime.min.js

это вРазница между каждым файлом в каталоге dist Vue2, просматривать. Кроме того, vue text DangАвтономная сборка против сборки во время выполнения, также проясняет разницу между ними; этоvue.common.jsОн принадлежит к независимому продукту сборки, а экспорт пакета NPM по умолчанию —Время выполненияBuild, чтобы использовать автономные сборки (поддержка шаблонов), добавьте в конфиг webpack следующий псевдоним:

resolve: {
  alias: {
    'vue$': 'vue/dist/vue.common.js'
  }
}

Таким образом, внедрение vue в конфигурацию webpack.dll.conf.js приводит к тому, что vue.common.js появляется в vendor.xxx.js, что можно объяснить: конфигурация упаковки vue в dll отличается от введения в resolve , первый по умолчанию использует сборку во время выполнения. Если можно гарантировать непротиворечивость, эта проблема может быть решена. Эта точка была протестирована, и данные следующие (конфигурация разрешения указана выше):

Вставьте vue в webpack.dll.conf.js и получите vendor.xx.js 611 КБ и vendor.dll.js 180 КБ после сборки;

Внесите разрешение в webpack.dll.conf.js и введите vue/dist/vue.common.js с тем же именем, и получите vendor.xx.js 540 КБ vendor.dll.js 207 КБ после сборки;

Если сравнить их, то разница между vendor.xx.js составляет +71 КБ, что соответствует размеру синтаксического анализа vue.common.js, а разница между vendor.dll.js составляет -27 КБ, что соответствует размеру сборки среды выполнения. Откройте сгенерированный vendor-manifest.json, и вы также обнаружите, что ссылки, связанные с генерацией vue до и после:

/node_modules/vue/dist/vue.common.js ./node_modules/vue/dist/vue.runtime.common.js

Как красиво использовать рабочий процесс статей Vue

«Сила света не олицетворяет боевые искусства, но скорость определяет ваше расстояние», — Бай Фэн (Цинь Ши Минюэ). Интеллектуальная тенденция автоматизации более очевидна, и поскольку программист может адаптироваться как можно скорее, можно представить себе дилемму. В ближайшем будущем рабочие-мигранты кода «синих воротничков» будут растянуты в волне технологий, поэтому это больше требует от практиков решения потребностей, сохраняя при этом постоянное обновление навыков знаний. И это быстрое слово, естественно владение деловыми качествами, более чем наполовину решающую роль, но если есть отличный механизм документооборота, то это обязательно добавит цветов. И эту тему, суть которой можно замаскировать, это будет продолжать изменять обновление в прогрессивном изучении обучения. Но по крайней мере один текущий критерий:Если не полностью автоматизированный, то хотя бы полуавтоматический.. (Группа обмена передовым веб-обучением: 328058344 Сплетни запрещены, и вы не можете войти, если вы недовольны! )

многие друзья используютhexoсоздать блог;hexoосновывается наNode.jsпродукт, с его помощью очень удобно публиковать посты в блоге, нужно толькоhexo clean,hexo g, hexo dКоманды три можно, данные статьи больше, пропишите, у вас 20+, если знаетеnpm,существуетpackage.jsДобавьте к нему названия точек, например вот так;

"scripts": {
  "start": "sudo hexo clean && sudo hexo g && sudo gulp && sudo hexo d"
}

тогда просто бегиnpm startЭто хорошо, затраты времени можно сократить до 2 с.Хотя экономия времени невелика, но это тоже улучшение на порядок, а стоимость только так мала, и это будет сделано один раз и навсегда. Поэтому приходится объяснять это каким-то скудным опытом и кидать кирпичи, чтобы привлечь большой нефрит.

Хотя Vue-cli мощная, она не должна быть сложной как базовая общедоступная утилита. У вас должен быть свой (командный) скаффолдинг.Когда вы будете готовы начать новый проект, вам нужно только запустить скаффолдинг для инициализации всего проекта, вместо того, чтобы копировать немного, затем перенастраивать, вводить маршруты, внедрять Bootstrap.. . . . Также должна быть библиотека шаблонов, которую можно сгенерировать одним щелчком мыши, или механизм автоматического парсинга Json в том же проекте.
Прежде чем приступить к написанию кода, вы должны заказать интерфейс, параметры и возвращаемые данные у серверной части и заставить ее сгенерировать визуальный документ API, который легко получить и протестировать. Нет ничего важнее (если проект превышает 1 месяц/человек). Существует бесчисленное множество подобных инструментов с открытым исходным кодом, таких какSwagger-Ui.
При написании кода дважды подумайте, прежде чем писать его. При написании убедитесь в точности инструментов редактирования, таких как извлечение синтаксических ошибок, полное открытие и закрытие тегов и автоматическое форматирование, чтобы украсить код, чтобы он соответствовал контракту.Eslintтребований, но также следите за тем, чтобы код был четким и кратким; представьте, если ваш стол весь день забит насекомыми и чернилами, что вы думаете?
Vue-cliАгент уже развернут, так что не нужно беспокоиться о локальной отладке и междоменных проблемах, а как быстро отправить валидный код, нужно настроить самому. Будь то командная строка или средство визуализации SourceTree, это удобно и быстро. следует также использоватьpre-commitИнструмент для выполнения проверки перед фиксацией, чтобы предотвратить влияние незаконных коммитов на товарищей по команде.
В течение своей карьеры я испытал муки ручного набора различных тестовых APK, а также испытал трудности с ручным выпуском различных сборок.Я думаю об этом до сих пор, и это полно печали. Поэтому отслеживание изменений кода склада и автоматизация строительства необходимы для домашней жизни. Я также сталкивался с разными странными способами закрытия багов в индустрии, и признаю, что на это уходит больше времени, чем на решение так называемых багов. И это не более чем упреки в недальновидности команды в то время, а сейчас команда используетjenkinsа такжеGitLab, Двойные мечи вместе, больше нет боли, двигаться.
Что значит писать красиво на Vue? Не только в красоте кода, но и в его эффективности и экономии ресурсов. Vue, управляемый данными, сам по себе очень эффективен, но код, написанный на C, не обязательно эффективнее, чем JavaScript, разница в том, что он написан разными людьми. Поэтому помимо кода Code Review должен быть еще и набор эффективных комплексных методов анализа. Чтобы обеспечить загрузку кода по требованию, разумное написание и ссылку на Css и так далее.
Что значит писать красиво на Vue? Он также надежен и стабилен, что в конечном итоге отражается на продукте, поэтому хороший продукт должен быть оснащен не только условиями доступа, анализом поведения, отслеживанием событий, но и отчетами об ошибках. Раньше вы пользовались Jianshu, продуктом, объединяющим чтение и письмо, но теперь он не только полон куриного бульона и диких заголовков, но и полон всяких багов, особенно на веб-страницах (Mac mini, Pc), есть обратной связи нет, просто ужас, почему? сделать вывод, что они должны быть неиспользованнымиsentryАналогично инструментам продукта.
внутренняя технология; Фронтенд, не разбирающийся в бэкграунде, не является хорошим дизайнером, если это кажется шуткой, то на самом деле имеет смысл. Сегодня популярна модель разработки с разделением фронтенда и бэкенда, и если обе стороны, выполняющие свои обязанности, смогут понять технологию друг друга, сотрудничать будет проще и эффективнее. А чаще, не говоря уже о определённых нуждах, ещё и фронтенд бэкенд принято писать, для частников это тоже хорошо, а Yiduo тело не перегружает. В последнее время я пишу некоторые личные продукты.Если вы ищете помощь в разработке бэкенда, у вас определенно будет меньше проблем, чем научиться писать бэкенд самостоятельно, и это не долгосрочное решение. Даже без них, чтобы решить Vue SEO и улучшить скорость рендеринга, сделайте Vue SSR связан, и вам также необходимо понимать некоторые фоновые технологии.
Связанный с дизайном; Этот дизайн включает в себя не только дизайн структуры кода, иерархии, интерфейса и т. д., но также включает в себя дизайн, связанный со страницами, для интерфейсных практиков, например, разрабатываемые персональные продукты:Цепь очарования(Английское имя:NICE LINKS), из-за отсутствия эстетики дизайна можно сказать, что изначально было сложно сформировать общее приложение, но с точки зрения визуальных эффектов я всегда чувствую, что это не так важно, и я все еще жду это иссякнуть в напряженном размышлении. Даже если подобного спроса нет, страница уже нарисована дизайнером.Если вы хотите отреставрировать ее идеально, то такая дизайнерская грамотность тоже незаменимая вещь, ведь от конечного вида продукта для пользователя зависит обо мне и других фронтенд-разработчиках. .

написано в конце

«Сначала вы должны быть программистом, а затем программистом внешнего интерфейса» — это верный тезис, который со временем станет более очевидным. Таким образом, то, что намеревается исследовать эта статья, не ограничивается толькоVueБолее глубокая цель обучения и применения состоит в том, чтобы использовать текущий популярный фреймворк.VueДля внезапного появления, в настоящее время совет по написанию, чтобы поделиться некоторым опытом разработки, советами по программированию и опытом использования продукта. Очевидно, что разговоры об этом — лишь верхушка айсберга. К тому же такая front-end разработка, процветающая, очень сложно все охватить. Мы можем только поддерживать менталитет непрерывного обучения, принимать изменения, ориентированные на будущее, в порядке в этой бурной волне и не будем падать дальше. Говоря об этом, необходимо снизить долю, недавно была обновлена коллекция [руководство по внешним ресурсам Times Edition], в которой основное внимание уделяется сбору выдающихся современных и будущих технологий текста, а также инструменты, оптимизация, тестирование, Сущность безопасности Чжан, направлена на изучение передней части, Повышение квалификации, расширение кругозора, поиск информации, такой как услуга; заинтересованные друзья могут сосредоточить внимание на следующем понимании или еще больше, чтобы помочь пополнить и исправить, чтобы он мог служить большему количеству людей.