Введение
Привет всем, я wangly19, эта статья в основном предназначена для того, чтобы обобщить некоторые из процедур, которые я суммировал с помощью Vue.js, и я могу немного проверить и заполнить. Если у вас есть интересные советы, вы также можете оставить мне сообщение в области комментариев, чтобы я тоже мог их изучить. Эта статья чисто текстовая и без картинок.Рекомендуется к прочтению в метро.Большинство из вас может ее знают,но не видели. Внимательно проверьте пробелы ниже.
При разработке проекта использование этих небольших навыков улучшит качество кода и его чтение при разработке проекта. Лучше есть с моей прошлой статьей:
- Подводя итог некоторым из основных оптимизаций, которые я сделал при запуске проекта Vue:нажмите, чтобы прочитать
текст
Давайте начнем с объяснения, что не все точки знаний находятся во Vue, но есть некоторые подпрограммы при использовании Vue, включая некоторые советы по JavaScript. Затем вы можете получить его в других местах и использовать.
инструмент управления пакетами
Прежде всего, для инструмента управления пакетами я теперь рекомендую yarn, при использовании npm я столкнулся с такими проблемами, как потеря пакетов, зависание пакета и жесткий процесс установки, поэтому я не раздумывая использовал yarn вместо npm в качестве основного. , Инструмент управления пакетами. Помимо некоторых из вышеперечисленных проблем,yarnТакже дайте разработчику возможность предоставить документ с накоплением ошибок Yarn-Erro.log. Хотя это немного похоже на куриные ребрышки, это также в некотором роде объясняет очень вдумчивые соображения.
package.json
Все использовали разные скаффолды, такие как: vue-cli create-react-app nest-cli umi-cli, taro-cli и т. д. Некоторые настраиваемые скаффолды доступны из коробки, нам нужно только пройти официальную демоверсию и начать быстро Его можно установить и использовать. Но точно так же многие скаффолды не дружат со скриптовой оболочкой.Некоторые могут использовать run serve для запуска проекта, некоторые используют run start для запуска и т. д., есть много похожих, поэтому, если вы используете этот тип скаффолдинга , самое то Хорош себе унифицированную скриптовую оболочку. В этом случае путаницы не будет. Лично я использую run: dev , package:build. (только для справки).
"scripts": {
"dev": "vue-cli-service serve",
"build": "vue-cli-service build"
}
псевдоним пути @...
В реальном проекте для лучшего логического наслоения или при ведении монорепозитория большие и малые каталоги проекта сильно зашумлены, в это время будет генерироваться много недружественных ссылок на пути из-за потребления ссылочных ресурсов. Существует много ссылок на такие пути, как ../, которые очень плохи, поэтому, проксируя пути некоторых ресурсов, разработчики и сотрудники могут очень удобно их читать, вместо того, чтобы повторять какие-то бесполезные символы. В моем проекте каталог кода имеет следующее. В частности, вы можете сделать некоторые подходящие конфигурации в соответствии с вашими предпочтениями.
module.exports = {
resolve: {
alias: {
// 设置路径代理
'@': resolve('src'),
'components': resolve('src/components'),
'api': resolve('src/api'),
'icons': resolve('src/icons'),
'#': resolve('src/assets'),
'utils': resolve('src/utils')
}
}
}
Глобальное управление файлами sass
Для использованияsass/scssНа самом деле, друзья будут определять некоторые из своих личных привычек в некоторых отношениях.global styleОтжимание включает в себя все аспекты развития, такие как@function,@extends ckass interface,@mixins,全局变量и так далее, чтобы облегчить процесс собственного развития, но множество мелких партнеров есть в каждомcomponentвсе проходит@importдля импорта, что означает, что каждое место, которое необходимо использовать, должно быть добавлено@import .../file pathИмпортировать очень проблематично. Так что нам нужно сделать ссылку на всю жизнь, вvuecliМожет быть очень удобно импортировать глобально
css: {
sourceMap: false,
loaderOptions: {
scss: {
additionalData: `
@import "~@/assets/styles/norm.scss";
@import "~@/assets/styles/mixins.scss";
`
},
sass: {
additionalData: `
@import "~@/assets/styles/norm.scss"
@import "~@/assets/styles/mixins.scss"
`
}
}
}
Сводка файлов после упаковки
После того, как мы упакуем проект Vue, каталоги в файле dist часто очень беспорядочны, и многие файлы js выставлены наружу, что очень неприглядно, поэтому его необходимо установитьassetsDir: 'static'Директория хранения файлов пакетов определена. Таким образом, все файлы ресурсов будут храниться в каталоге, который вы определили после упаковки, нам нужно только поместитьindex.htmlа такжеstaticпосади насnginxПросто разверните сервис в .
module.exports = {
publicPath: '/',
outputDir: 'dist',
lintOnSave: true,
assetsDir: 'static'
}
Междоменный прокси
Вы должны быть знакомы с междоменными прокси, верно?Vue, настроивProxyОчень удобно выполнять прокси доменного имени, конечно, это требует определенного сотрудничества в фоновом режиме. Если в вашем проекте используется несколько доменных имен, вы также можете настроить несколько прокси. просто нужноdevServeДобавьте следующую конфигурацию.
proxy: {
"/api": {
target: 'http://.......',
changeOrigin: true, // 是否改变域名
ws: true, // socket
pathRewrite: {
// 路径重写
"/api": '' // 对拼接内容进行重写
}
},
....
}
Различные конфигурации для упаковки разработчика и сборки
Большинство разработчиков любятVueизconfigНаписано в файл, кажется, что нет проблем, но с изменением среды, оптимизацией проекта, плагинами WebPack и другими целевыми конфигурациями это будет выглядеть немного беспорядочно, в это время вы можете рассмотреть возможность создания отдельная конфигурация, черезprocess.devдля разных средconfigВведение и мой метод настройки опубликованы ниже. Я создал новый каталог конфигурации в корневом каталоге проекта, который распаковал общедоступные методы вpublic.jsДругие выполняют отдельную компиляцию в соответствии с производственной средой и автономной средой.
-- config
--- dev.js
--- build.js
--- public.js
vue.config.js
# 代码 vue.config.js
const devConfig = require('./config/dev')
const buildConfig = require('./config/build')
module.exports = process.env.NODE_ENV === 'development' ? devConfig : buildConfig
Глобальные методы использовать или не использовать
Надлежащим образом смонтируйте некоторые часто используемые методы вVueизprototype, в этом нет ничего плохого. Настоятельно рекомендуется использовать его с осторожностью.Пока что на нем висит всего несколько штук.localstorageметод. Итак, это зависит от предпочтений людей. Причина, по которой я не люблю его использовать, заключается в том, что я люблю писатьtypeScript, если вы монтируете слишком много вещей в прототипе Vue, вам также нужно войти и сделать несколько объявлений типов, чтобы объявить некоторые учетные данные для этого метода монтирования.
vue.prototype.local = localStorageUtils
Избегайте конфликтов стилей компонентов
Во избежание конфликтов при разработке пишитеVue Component, есть два способа создать независимые стили для компонентов, один из нихcssModule, другойscoped. Чаще всего мы используемscopedспособ избежать конфликтов между стилями компонентов, и метод использования также очень прост, просто нужно быть вstyleсвязывать вышеscopedВот и все. а такжеcssModuleЭто немного абстрактно, когда вы создаетеcssфайл, просто добавьте.moduleон будет автоматически распознан какcssModuleмодули, такие как:global.module.scss.
<style scoped>
</style>
Сохраняйте имя страницы маршрута и имя компонента одинаковыми
когда мы объявляемvue-routerЯ лично рекомендую ставитьnameСвойства и компоненты, которые необходимо установитьnameДержите его все время, потому что в последующем это может включать кэширование данных страницы, исключение данных страницы и т. д., поэтому очень удобноkeepaliveЧтобы выполнить кэширование компонентов маршрутизации и данных, указанных выше, вам не нужно предпринимать дальнейшие действия для устранения проблемы.
// component
export default {
name: 'Home',
data: () => ({})
...
}
// router
{
path: '/home',
name: 'Home',
component: () => import('...')
}
Вычисляемые свойства полезны
Вычисленные свойства очень мощные. Во время процесса развития не рекомендуется выполнять некоторые сложные логические операции, которые не только уничтожаютtemplateЧитабельность расширения кода стала очень сложной. Некоторые пытаются записать логическую операцию для вычисления свойства. Вот типичный пример:
ДЕМО: фильтрация данных
Это очень распространенное вычисляемое свойство для фильтрации данных. Его основная функция —vForнеобходимо выполнитьvIfОцененные атрибуты сначала отфильтровываются, чтобы добиться правильного рендеринга, который нам нужен.DOMElements, оптимизируя производительность, также обеспечивает хорошее управление и масштабируемость данных.
// 计算属性
computed: {
filterList: function () {
return this.showData.filter(function (data) {
// 返回需要显示的数据
return data.isShow
})
}
// DOM
<ul>
<li v-for="item in filterList" :key="item.id">
{{ item.name }}
</li>
</ul>
метод сбора
дляoption APIкогда дело доходит до форм增查删改В то время, если вы не справитесь с этим должным образом, возникнут следующие ситуации, которые, на мой взгляд, немного утомляют чтение, потому что этот метод часто не так много, и возможность изменения не очень велика. Затем мы можем провести заводскую упаковку для единого управления, а при обнаружении ошибок быстро локализовать проблему.
getData() {}
createRow() {}
updateRow() {}
deleteRow() {}
Управляйте табличными данными обычным способом增查删改. Конечно, если сложность самой операции велика, все равно считается выполнение операций с большим количеством кодов для предотвращения препятствий считыванию в текущей фабрике.
tableFactory(action) {
switch (action) {
case 'update':
...
break;
case 'create':
...
break;
case 'delete':
...
break;
default:
// ...默认获取列表
break;
}
}
миксин
Я давно говорил, что лично я не люблю миксины, но я беспомощен, но должен их использовать. Поэтому я пошел на компромисс,mixinПеременные определяются в фиксированном формате. Мои правила именования следующие. Делайте все объявления заглавнымиMВ качестве маркера то же самое смешано вMethodsТо же самое справедливо.
Mip: 'xxxx',
Mmsg: 'xxxxxxxxxxxxxxx'
Поддерживать спецификации проверки данных для реквизита
Лично я настоятельно рекомендую установить некоторые базовые ограничения на свойства, такие как数据类型,是否必填,默认值,验证规则и т. д., чтобы выбрать, вместо прямой передачи массива, зарегистрируйтеPorpsпространство имен.
props: {
test: {
type: String,
default: ''
},
test2: {
type: [Number, String],
default: 1
},
test3: {
required: false,
type: Object
}
}
v-модель и модификаторы синхронизации
Большую часть времени в компоненте будет много мелких компонентов.Как мы все знаем, в Vue для прямой модификацииpropsЗначение является предупреждением, которое является недопустимым, даже если оно кажется действительным. Конечно, если вы будете следить за процессом, вы все равно пройдете$emitВыбрасывает события и параметры, а затем родительский компонент получает параметры и присваивает их значениям, переданным компоненту.Таким образом, процесс передачи значений между родительским и дочерним компонентами закончен, но такие шаги очень шумно, поэтому в некоторых простых форматах данных я предпочитаю использоватьv-modelа такжеsyncМодификатор для управления передачей данных.
V-модель пользовательского компонента
сначала черезpropsзарегистрирован вvalueАтрибут, обратите внимание, что это должно быть значение, на самом деле это использовать$emitбросает имя какinput(обязательное) событие, передайте значение, которое необходимо изменить, затем вы можете передать его в отрицательном компонентеv-modelИнструкция привязана к данным.
porps: {
value: {
type: [String, Number]
}
}
$emit('input', 回馈的内容)
Модификатор синхронизации
Этот модификатор очень интересен, т.к.$emitиспользуется при метанииupdate：绑定的props名称Родительский компонент стоит обновить, не правда ли, очень удобно.
this.$emit('update:title', 'newTitle')
использование имени компонента
В большинстве случаев мы определяем в компонентеnameвсе как вtemplateИмя, используемое в шаблоне, который рекомендуется использовать имя Hump, потому что именование Hump сделано хорошо в Vue.
// GanMessage.vue组件
export default {
name: 'GanMessage'
.....
}
// 引入后使用
components: {
[GanMessage.name]: GanMessage
}
// 模板中使用
<template>
<gan-message/>
</template>
содержимое слота по умолчанию
когда выslotКогда вы добавляете элемент контента в слот, он будет существовать как контент по умолчанию.slotСодержимое внутри перезаписывается и существует как вставленный элемент содержимого по умолчанию.
<slot>
<p>默认内容</p>
</slot>
Отладка механизма шаблонов
Большую часть времени, вtemplateНекоторую логику написанную выше очень трудно отладить, и она вся напрямую связана с эффектом, при некоторых значениях она становится неуправляемой, поэтому в среде разработки я буду вешать глобал на прототип.console.logметод отладки.
vue.prototype.$logs = window.console.log;
// 使用
<template>
{{$logs('1111')}}
</template>
использование фильтра
Для фильтров это всегда было очень безвкусной вещью.Во многих случаях этим мало кто пользуется.Я использую фильтры для ограничения глобальных символов и форматов времени,например необходимость форматирования времени.Добавление денежных знаков к числам и расстановка тысячных запятых по деньгам можно все решить с помощью фильтров. Поэтому также очень удобно разумно использовать его в подходящих сценариях.
filters: {
$time (timeText) {
return ...
}
}
Жизненный цикл получения данных
Получение данных всегда вызывало споры, и большинство студентовcreatedя понялbeforeMountВ фоновом режиме запрос данных
async beforeMount(){
const data = await getUserInfo();
}
Использование асинхронности и ожидания
Чаще всего при использованииPromiseвсегда через.then,.catch,.finallyдля обработки. Но я действительно рекомендую использоватьasyncасинхронная функцияPormiseобработки, нам нужно только получить данные, черезtryПерехват исключений может быстро устранять неполадки и вызывать ошибки. см. выше获取数据的生命周期можно увидеть
async beforeMount(){
try {
const data = await getUserInfo()
} catch (error) {
console.log(error)
} finally {}
}
Управление статусом загрузки запроса
В большинстве запросов данныхloadingОтображение состояния, удобное для пользователей или пользователей с некоторыми полезными советами, большинство начинающих интерфейс находится вPromiseИ в случае успеха, и в случае неудачи выполняется модификация состояния. Это, несомненно, добавляет ненужные накладные расходы. На самом деле только вfinallyПросто внесите изменения в . Больше никакого бесполезного кода и ненужного вмешательства в обработку данных.
async beforeMount(){
// 开始加载
this.loading = true
try {
const data = await getUserInfo()
} catch (error) {
console.log(error)
} finally {
// 停止加载
this.loading = false
}
}
Старайтесь избегать частого просмотра
Для слушателя старайтесь не использовать его часто в компоненте, если вам нужно часто использовать его в компоненте.watchСлушая изменения в нескольких источниках данных для развития бизнеса, означает ли это, что этот компонент или само требование очень необоснованно, большинство требований активно инициируются, а не полагаются на определенное условие как на необходимость этого условия задачи. Итак, постарайтесь свести к минимуму использование слушателей, но это также отличный опыт, если вам это действительно нужно. Все зависит от собственного поведения разработчика, попробуйте подумать, нужно ли вам использовать слушатели как оптимальное решение.
Включить отслеживание эффективности
В vue есть очень интересная вещь, т.е.Vue.config.performanceЭтот новый API, согласно официальному заявлению, выглядит следующим образом:
Установите значение True, чтобы включить отслеживание производительности при инициализации, компиляции, рендеринге и исправлении компонентов на панели производительности/временной шкалы инструмента разработки браузера. Применять только к режиму разработки и поддерживать браузер API Performance.mark.
@vue.js官方
Рекомендуется открывать его в среде разработки, а в онлайн-среде не обязательно. существуетmain.jsПросто измените статус в середине.
vue.config.performance = process.env.NODE_ENV !== "production";
конфигурация окружения
Известно, что в проекте строительных лесов есть.envфайлы, но что это такое? На самом деле, это просто место для хранения статических констант.При использовании веб-пакета процесс, в котором мы находимся, на самом деле находится вNode.jsСледовательно, переменная, хранящаяся в среде, является одной информацией о конфигурации. Они являются личной личной информацией, поэтому для того, чтобы запомнить, чтобы удалить для безопасности проекта, не забудьте удалить, избегая нелегальных людей, чтобы вызвать некоторые проблемы от вас через счет. (Использовать в Vue необходимо следовать его спецификации для добавленияVUE_APP)
NDOE_ENV=development
APP_KEY=***********
HOST_URL=**********
эмиссия имущества
для ВьюOption APIВопрос эмиссии всегда был ошеломляющим.Тысячи людей имеют разные стили,и добиться единства сложно.Рекомендуется обобщить удобный для вас шаблон и сделать его в формате шаблона.В следующий раз вы сможете автоматически сгенерируйте эту структуру с помощью сочетаний клавиш. При написании компонентов это будет удобно. Прикрепил копию моего базового шаблона
export default {
name: '名称',
components: { // 组件挂载a},
created(){} // 数据获取
beforeMount() {}, // 数据获取
data: () => ({}), //响应式数据
computed: {} // 计算属性集合
methods: {} // 方法集合
... // 销毁页面不要的资源
}
Суммировать
Большую часть времени я чувствую, что при использовании Vue легко дотронуться до узкого места. Когда я захотел углубиться, то обнаружил, что дорога впереди очень узкая. Большую часть времени делает то, что практика делает совершенным. Хоть навыки и хороши, рост неотделим от роста Практика делает совершенным Не зацикливайтесь на каких-то технических вещах, которые никак не влияют на рост, а даже заставляют чувствовать себя сильным и уверенным Просто программист P0. Я видел слишком много программистов, использующих Vue в течение двух лет, логики нет вообще, это похоже на выполнение задач ради выполнения задач, игнорируя собственный рост.
Эта статья上篇, который включает в себя очень простые процедуры и навыки и не требуетvueRouterа такжеVuex, это будет обновлено в следующем эпизоде. Информация из первых рук может быть использована мной для продвижения статьи.
Автор теперь готов подать заявку на работу, высшее образование. Проработал больше года. Собираюсь учиться в другой среде.Обновление статьи идет медленно.Если статья полезна и вы что-то узнали, просто ставьте палец вверх. Вы также можете бросить меня, если у вас есть возможность протолкнуться внутрь.