Эта статья начнется с использования NutUI новичками и даст краткий обзор NutUI, в надежде помочь новичкам быстро начать работу над проектом.
Статья включает в себя следующее основное содержание
- Установите и внедрите NutUI
- Использование компонентов NutUI
- Настройка темы и стиля NutUI
- Использование NutUI в проектах интернационализации
почему она
Vue предоставляет всем возможность компонентизации, что дает разработчикам мощную и краткую возможность повторного использования компонентов. Красиво оформленные и хорошо расширенные компоненты, несомненно, сделают продукт более унифицированным, улучшат впечатление от просмотра, сократят объем повторяющейся работы и повысят удобство сопровождения кода. Когда мы впервые начали использовать библиотеку компонентов, нам нужно было не только просто искать пригодный для использования компонент в библиотеке компонентов, но и с точки зрения продукта, в дополнение к основным компонентам, предоставляемым библиотекой компонентов, мы искали другие специальные компоненты. функция.
- Установка и импорт: поддержка методов NPM и CDN, а также поддержка импорта по запросу.
- Богатые возможности: богатые компоненты, настраиваемые темы, интернационализация
- Документация и демонстрация: предоставьте удобную документацию и демонстрацию, поддержите несколько языков
- Инжиниринг: разработка, тестирование, сборка, развертывание, непрерывная интеграция
Конечно, в конце концов, эта библиотека компонентов должна постоянно обновляться и поддерживаться. Мы нашли много компонентов для анализа и оценки. Давайте посмотрим на практические результаты этой проблемы на NutUI.
Что такое NutUI
NutUI — очень хорошая библиотека мобильных компонентов. Покрытие более 50 компонентов, включая базовые классы, классы ввода данных, классы обратной связи по операциям, классы отображения данных, классы навигации, классы компоновки и компоненты бизнес-класса. Более того, стиль компонентов унифицирован, а постоянное сопровождение разработчиков обеспечивает надежность и ремонтопригодность компонентов и отвечает требованиям M-стороны большинства сценариев. В то же время отличная документация и активная поддержка сообщества обеспечивают пользователям наилучший опыт.
NutUI выпускается с 2017 года. Все компоненты извлекаются из бизнеса Jingdong, а затем постоянно интегрируются, ремонтируются и, наконец, дорабатываются. Профессиональные стандартные проекты проектов обеспечивают согласованность, отличное автоматизированное тестирование компонентов и постоянные обновления обеспечивают стабильность компонентов. Он может решить большинство требований M-стороны на основе разработки Vue на рынке и ускорить процесс разработки пользователей. Итак, давайте всех переведем в NutUI.
начать
Мы анализируем использование и меры предосторожности этой библиотеки компонентов на основе исходного кода версии NutUI 2.2.2. Конечно, NutUI не должен быть таким в первые дни.Проанализированная нами версия была оптимизирована для многих итераций.Если вы хотите понять процесс ее разработки, вы можете перейти наGitHub.com/BOE2Oh/Angry Back…Найдите его историческую версию. При этом NutUI также находится в разработке версии 3.0. В версии 3.0 Nut-CLI будет независимым, но будет поддерживать синтаксис Vue3.0, новые компоненты и спецификации. Мы надеемся, что вы можете присоединиться. (Хотите стать сопровождающим NutUI? Добро пожаловать вGitHub.com/BOE2Oh/Angry Back…в сообщении о проблеме и присоединяйтесь)
установить импорт
目前主流的库都支持 CDN 引入和 NPM 安装。NutUI 不例外，还更有亮点。
Введение CDN
Давайте сначала поговорим о введении CDN. Пока мы добавляем следующий код на нашу HTML-страницу, мы можем полностью использовать NutUI.
<!-- 生产环境版本，优化了尺寸和速度 -->
<!-- 引入样式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nutui/nutui/dist/nutui.min.css">
<!-- 引入Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<!-- 引入组件库 -->
<script src="https://cdn.jsdelivr.net/npm/@nutui/nutui/dist/nutui.min.js"></script>
Конечно, отличная производительность NutUI в этом отношении заключается в том, что его можно загружать и импортировать по запросу из CDN. (В следующем примере представлен только компонент Button)
<body>
<div id="app"><nut-button>CDN按需加载</nut-button></div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<!-- 引入样式 -->
<link rel="stylesheet"href="https://cdn.jsdelivr.net/npm/@nutui/nutui/dist/packages/button/button.css"/>
<!-- 引入Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://cdn.jsdelivr.net/npm/@nutui/nutui/dist/packages/button/button.js"></script>
<script>
Vue.component(button.default.name, button.default);
new Vue({
el: "#app"
});
</script>
</body>
Обратите внимание, что CDN вводятся при использовании компонентов. Поскольку имена атрибутов в HTML нечувствительны к регистру, браузеры интерпретируют все символы верхнего регистра как строчные. Это означает, что когда вы используете шаблон в DOM, свойство свойства camelCase (верблюжий регистр) в компоненте должно быть названо его эквивалентом в регистре кебаба (имя, разделенное тире). Ссылка для деталейИспользование реквизита
Представлено нпм
Способ введения NPM также очень лаконичен. Мы используем Vue-CLI илиGaea CLIПосле сборки проекта. Добавьте следующий код в файл записи.
Gaea CLIЭто также инструмент построения одной страницы стека технологий Vue. И поддерживает загрузку в один клик, TypeScript, Skeleton и другие функции.
import Vue from 'vue';
import Nutui from '@nutui/nutui';
import '@nutui/nutui/dist/nutui.css';
Nutui.install(Vue);
Конечно, плюс вышеописанного введения — удобство, все компоненты NutUI можно полностью использовать всего тремя строчками кода, но и минусы тоже очевидны — происходит пустая трата ресурсов.
Поэтому лучшее решение рекомендуется внедрять по требованию. Добавьте следующий код на страницу, которая должна использовать компонент: (далее диалог, компонент выбора загружается по требованию)
import Vue from 'vue';
import { Dialog,Picker } from '@nutui/nutui';
Dialog.install(Vue);
Picker.install(Vue);
Позвольте мне объяснить, что NutUI будет активно упаковывать код CSS соответствующего компонента, вместо того, чтобы напрямую упаковывать весь код CSS, как другие библиотеки компонентов.
Когда мы используем его таким образом, мы чувствуем, что это правильно, так почему же import {Диалоговое окно} из '@nutui/nutui'; можно импортировать по запросу?
На самом деле, мы можем получить это, посмотрев исходный код, NutUI использует веб-пакет@nutui/babel-plugin-seperate-importРеализация компонента будет
import { Dialog } from '@nutui/nutui';
Преобразовать в следующий код
import Dialog from '@nutui/nutui/dist/packages/button/button.js'; // 加载构建后的JS
import '@nutui/nutui/dist/packages/button/dialog.css'; //加载构建后的CSS
В то же время NutUI построил полную версию пакета библиотеки компонентов и независимый пакет для каждого компонента при его сборке. Затем мы вручную используем Dialog.install(Vue) для регистрации. Таким образом, мы точно вводим код JS и CSS, соответствующий компоненту Dialog в lib. Достигнута наша цель: загрузка по требованию.
webpackкак построить несколькоbundleШерстяная ткань? в основномentryконфигурация опций,entryОбычно значением является строка, но также может быть и объект. мы добавляемwebpackФайл конфигурации, объект генерируется на основе файла конфигурации компонента библиотеки компонентов, ключом является имя компонента, значением является входной файл js компонента, и этот объект используется в качестве файла конфигурации.entryЗначение параметра достаточно, другие конфигурации и полная версия библиотеки компонентовwebpackФайлы конфигурации согласованы (выходной каталог можно настроить по мере необходимости). Выполните эти два файла конфигурации при сборке для создания полной версии пакета библиотеки компонентов и отдельного пакета для каждого компонента.
const cptConf = require('../src/config.json');
const entry = {};
//遍历所有组件
cptConf.packages.map((item)=>{
entry[cptName] = `./src/packages/${item.name.toLowerCase()}/index.js`;
});
module.exports = {
entry
};
Компоненты из коробки
Выше мы полностью представили NutUI, а затем мы будем использовать кейсы, чтобы увидеть, как использовать компоненты.
Подготовка перед использованием
Когда мы используем библиотеку компонентов, лучше всего заранее ознакомиться со всеми компонентами библиотеки на официальном сайте NutUI. Это не только дает нам полное представление о библиотеке компонентов, но также помогает нам иметь больший выбор при использовании компонентов. Например следующий случай:
При разработке приложения после входа в проект часто появляется запрос протокола, как показано на рисунке:
Вы вдруг подумали об использовании компонента Dialog, но в процессе его использования было обнаружено, что контент слишком длинный, а базовый Dialog не поддерживает настройку контента, не говоря уже о прокрутке контента. Вы беспомощны в это время? На самом деле по-другому использовать компонент Popup, а потом отображать его по центру, весь контент поддерживает кастомизацию, что не совсем решает наши потребности. Поэтому рекомендуется перед использованием внимательно прочитать все компоненты и заточить нож, не нарубив случайно дрова, а более эффективно повысив эффективность разработки.
Становиться лучше
После того, как понимание компонентов завершено, разработка официально начинается, и, наконец, настало захватывающее время. Давайте сначала рассмотрим несколько общих компонентов.
Компонент календаря: обычный жесткий компонент в процессе разработки компонентов календаря, отличный компонент календаря должен включать такие функции, как выбор даты и выбор интервала.
Функция выбора календарного интервала календарного компонента NutUI поддерживает выбор одного и того же дня. Например, выберите 2020/05/20-2020/05/20, эта функция не поддерживается другими компонентами!
Мы используем метод по запросу для использования компонента календаря, загружаем компонент календаря в main.js
import { Calendar } from '@nutui/nutui';
Calendar.install(Vue);
Далее добавляем указанный компонент на нужную страницу
<nut-calendar
:is-visible.sync="isVisible2"
:default-value="data2"
:is-auto-back-fill="true"
@close="switchPickerClose('isVisible2')"
@choose="setChooseValue2"
>
</nut-calendar>
<nut-cell :showIcon="true" :isLink="true" @click.native="switchPicker('isVisible2')">
<span slot="title"><label>日期选择</label></span>
<span slot="sub-title">有默认日期，选择后自动回填的~~~</span>
<div slot="desc" class="selected-option" >
<span class="show-value">{{date2 ? date2 : '请选择日期'}}</span>
</div>
</nut-cell>
// js部分
export default {
data() {
return {
isVisible2: false,
date2: '2020-12-22',
};
},
methods: {
setChooseValue2(param) {
this.date2 = param[3];
},
switchPickerClose(isVisible2){
this.isVisible2=!this.isVisible2;
}
}
};
В приведенном выше коде is-visible.sync управляет отображением календаря, значение по умолчанию — это дата по умолчанию для отображения календаря, close — событие закрытия, а select — триггер события выбранной нами даты. Компонент календаря по умолчанию не отображается.Нам нужно управлять компонентом календаря, щелкая по ячейке, чтобы реализовать полный эффект календаря, а остальное для нас, чтобы заниматься своими делами!
Мысль: зачем использовать .sync ?
В дополнение к компоненту календаря, который необходимо отображать, размещая компоненты на странице, некоторые компоненты поддерживают прямые вызовы функций, например компонент «Диалог», давайте попробуем.
Сначала зарегистрируйте компонент Dialog глобально.
import { Button , Dialog } from '@nutui/nutui';
Button.install(Vue);
Dialog.install(Vue);
Затем мы добавляем событие на кнопку и используем диалог в событии
<nut-button
@click="clickHandler"
>
提交
</nut-button>
//js部分
export default {
data() {},
methods: {
clickHandler() {
this.$dialog({
title: "提交",
content: "你确定提交当前数据吗",
closeBtn:true, //显式右上角关闭按钮
onOkBtn(event) { //确定按钮点击事件
alert("okBtn");
this.close(); //关闭对话框
},
onCancelBtn(event) { //取消按钮点击事件，默认行为关闭对话框
alert("cancelBtn");
//return false; //阻止默认“关闭对话框”的行为
},
onCloseBtn(event) { //右上角关闭按钮点击事件
alert("closeBtn");
//return false; //阻止默认“关闭对话框”的行为
},
closeCallback(target) {
alert("had close"); //对话框关闭回调函数，无论通过何种方式关闭都会触发
}
});
}
}
};
Содержимое диалога поддерживает не только текстовые, но и графические типы.
this.$dialog({
type:"image", //设置弹窗类型为”图片弹窗“
link:"http://m.jd.com", //点击图片跳转的Url
imgSrc:"m.360buyimg.com//5b9549eeE4997a18c/070eaf5bddf26be8.jpg", //图片Url
onClickImageLink:function(){
//图片点击事件，默认行为是跳转Url
console.log(this);
//返回false可阻止默认的链接跳转行为
}
});
Почему мы можем использовать Dialog для прямого вызова через this? Причина в том, что при построении компонента Dialog он на самом деле создает два типа: один поддерживает использование в стиле компонентов, а другой поддерживает использование вызовов в стиле функций.
import DialogVue from './dialog.vue';
import Dialog from './_dialog';
import './dialog.scss';
const DialogArr = [Dialog, DialogVue];
DialogArr.install = function(Vue){
Vue.prototype['$dialog'] = Dialog;
Vue.component(DialogVue.name, DialogVue);
}
Из приведенного выше кода видно, что при построении Dialog он не только использует Vue.prototype для расширения нового метода, но также использует Vue.component для реализации вызовов на основе компонентов.
дополнительный сюрприз
В NutUI есть не только традиционные общие компоненты, но и постепенно добавляется множество специальных компонентов. Например, уже есть компоненты лотереи и компоненты подписи. Зайдите на официальный сайт, чтобы быстро посмотреть!
(Для получения дополнительных сведений о компонентах и их использовании см. документацию на официальном веб-сайте.nutui.jd.com/)
Настройка темы
Использование любого компонента может быть схожим по функциям, но стиль может быть разным. Как реализовать собственную настройку стиля на основе использования NutUI?
Глобальная настройка
Сначала давайте посмотрим, что все распространенные стили в NutUI находятся в dist\styles\variable.scss. Когда мы хотим изменить его, мы можем создать файл scss в проекте, а затем скопировать все переменные в общем стиле.
Нам нужно изменить конфигурацию. Конфигурация css в vue.config.js или конфигурация sass-loader в webpack. Вводим наш пользовательский файл scss, обращаем внимание на атрибуты.
module.exports = {
css: {
loaderOptions: {
// 给 sass-loader 传递选项
scss: {
// @/ 是 src/ 的别名
// 注意：在 sass-loader v7 中，这个选项名是 "data"
prependData: `
@import "@/assets/custom_theme.scss"; //这个是我们自定义的scss文件@import "@nutui/nutui/dist/styles/index.scss";
`,
}
},
}
}
Затем, когда мы используем компоненты, нам нужно импортировать файлы SCSS вместо файлов CSS. На этом глобальная настройка стиля NutUI завершена.
import Nutui from '@nutui/nutui';
import '@nutui/nutui/dist/nutui.scss';
Частный заказ
Конечно, если особый компонент в нашем проекте нуждается в изменении стиля, и мы не хотим влиять на использование компонента в других местах, мы можем использовать /deep/ непосредственно на странице для изменения стиля, но заплатив внимание на добавление прицела к стилю!
/deep/ — это селектор глубины, предоставляемый Vue. Ссылка для деталейОфициальный сайт VUE Scope CSS
глобализация
Поскольку все больше и больше многоязычных проектов входят в наши потребности в разработке. Схема интернационализации стала необходимостью. Когда дело доходит до схемы интернационализации Vue, легко вспомнить схему vue-i18n, NutUI не представляет vue-i18n, но хорошо совместим с vue-i18n.
Интернационализация NutUI
Все схемы интернационализации используют языковые пакеты, которые обычно возвращают данные в формате JSON.Языковые пакеты библиотеки компонентов NutUI находятся в каталоге locale/lang. Когда мы его используем, нам нужно ввести соответствующий языковой пакет при внедрении NutUI. Ниже приведена ссылка на английский языковой пакет.
import Vue from 'vue';
import NutUI from '@nutui/nutui';
import enUS from '@nutui/nutui/dist/locales/lang/en-US';
Vue.use(NutUI , {
locale: 'en-US',
lang: enUS
});
Таким образом, все компоненты NutUI на нашей странице будут отображаться на английском языке, как показано на рисунке:
Интернационализация всего проекта
Конечно, это просто модифицирует язык внутри компонента.Как идеально интегрировать NutUI с собственным языковым пакетом? Мы создаем собственный языковой пакет.
// zh_cn.js文件
export default {
app: {
hello: '你好，世界！'
}
}
// en_us.js文件
export default {
app: {
hello: 'Hello，World!'
}
}
Затем импортируйте его в файл ввода.
import Vue from 'vue';
import VueI18n from 'vue-i18n';
import {locale} from '@nutui/nutui';
import enUS from '@nutui/nutui/dist/locales/lang/en-US';
import zhCN from '@nutui/nutui/dist/locales/lang/zn-CH';
import enLocale from './en_us';
import zhLocale from './zh_cn';
Vue.use(VueI18n);
Vue.locale = () => {};
// 将语言包进行合并
const messages = {
en: {
...enUS,
...enLocale
},
zh: {
...zhCN,
...zhLocale
}
}
const i18n = new VueI18n({
locale: 'zh', // 设置默认语言
messages: messages // 设置资源文件对象
})
//
const app = new Vue({
el: '#app',
i18n
})
Это объединяет i18n с нашими языковыми пакетами NutUI. Как использовать на странице?
<template>
<nut-navbar :title="$t('app.hello')" @click-left="show=true">
</nut-navbar>
</template>
Нам нужно добавить это, когда мы используем его в JS. Например:
created () {
console.log('start to enter created ', this.$t('app.hello'))
}
Далее мы привязываем следующие события к кнопке переключения языка, чтобы функция переключения языка могла быть идеально реализована.
tabEn: function () {
this.$i18n.locale = 'en'
},
tabCn: function () {
this.$i18n.locale = 'zh'
}
Таким образом, мы можем идеально реализовать многоязычный дисплей и функции переключения. Это отлично?
Документация и демонстрация
Когда мы используем библиотеку компонентов, необходима удобная документация и демонстрации. Она может сделать нас более удобными и быстрыми в использовании. Демонстрация и документация NutUI разделены. отГитхаб для NutUIКак видите, NutUI помещает все компоненты в src/packages. Каждый компонент примерно состоит из следующих частей.
Папка _test — это модульный тест для компонента. О том, как выполнить модульное тестирование в NutUI, можно прочитать в статьеПрактика модульного тестирования NuUI. В нем подробно описано, как писать модульные тесты и практиковать модульное тестирование в NutUI.
Файлы js, vue и css, названные в честь компонента в остальных файлах, являются ядром компонента. Выше также показано, как компонент создается из 0. Общий компонент гарантированно будет создан из различных функций, таких как ввод параметров, обработка параметров, проверка, хранение параметров и обратный вызов функции.
Файл demo.vue содержит различные варианты использования этого компонента. Все способы написания примеров на нашем официальном сайте можно найти в демо-файле соответствующего компонента. Если вам это нужно, вы можете просто посмотреть демо и скопировать нужные вам функции!
Последнее, о чем мы говорим, это файл .md. Файл md — это описание и использование компонента на нашем официальном веб-сайте.Как нам превратить md непосредственно в наш официальный веб-сайт?кликните сюдаВы можете получить ответ!
заключительные замечания
Что касается основного использования NutUI, мы представим его здесь сегодня. Не правда ли, это очень увлекательно, поторопитесь использовать это в своем проекте! ценные комментарии приветствуютсяGitHub.com/BOE2Oh/Angry Back…. Все примеры в этой статье включены в https://github.com/jdf2e/nutui-demo Добро пожаловать в гости и лайк! !