my demos

Демонстрации, часто используемые при разработке

Используйте Vue-cli и Element-ui для написания примеров, встречающихся в повседневной разработке.

 # 部署方法
git subtree push --prefix=dist origin gh-pages

Адрес посещения:

https://beat-the-buzzer.github.io/my-demos

Новый проект

npm install -g @vue/cli # 全局安装vue-cli
vue create my-demos # 新建项目
npm install -S element-ui # 安装element-ui
npm install -S vue-router # 安装vue-router

Примечание. vue-cli 4.x не добавляет в проект напрямую конфигурации, связанные с веб-пакетом. Вместо этого он использует скрипт npm, аналогичный create-react-app, который упрощает проект. Но что, если мы захотим изменить конфигурацию? Фактически, это эквивалентно использованию некоторых конфигураций по умолчанию. Если мы не используем эту конфигурацию по умолчанию, мы можем написать некоторые конфигурации самостоятельно и записать их в vue.config.js, чтобы перезаписать исходные конфигурации. Например, если я хочу изменить путь к упакованному ресурсу, я бы добавил:

 module . exports = {
  //=>process.env.NODE_ENV：环境变量中存储的是开发环境还是生产环境
  publicPath : process . env . NODE_ENV === 'production' ? './' : '/' ,
} 

Демо

буфер обмена.js

Функция копирования по щелчку: унифицированное решение проблем совместимости.

npm install -S clipboard

swiper.js

Карусельные и скользящие компоненты: реализуйте очень распространенный пример, которого нет на официальном сайте:

npm install -S swiper

макеты

Моделирование данных

npm install -S mockjs

Вы можете использовать этот инструмент для моделирования данных, и для нас это важный инструмент для написания демонстраций.

сброс.css

Удалить различия между браузерами

npm install -S reset-css

Просто внедрите его прямо в проект:

 import 'reset-css' ; // 引入CSS重置的模块

iconfont — — SVG

Чтобы использовать SVG для представления значков, сначала необходимо поместить необходимые значки в проект на веб-сайте iconfont, выбрать символ, и ниже появится адрес. При посещении этого адреса вы можете увидеть кусок js. Если вы внедрите этот js в проект, вы сможете использовать его непосредственно в проекте.

 import './common/iconfont' ; // 引入SVG

qrкод

Создать QR-код

npm install -S qrcode

Меспрокрутка

Потяните вверх, чтобы загрузить, потяните вниз, чтобы обновить плагин

npm install -S mescroll.js

сортируемый.js

Перетащите для сортировки

npm install -S sortablejs

Сортировка перетаскиванием. Часто встречающаяся проблема заключается в том, как синхронизировать данные с элементами DOM на странице в наших средах, таких как Vue или React.

Модификаторы Vue

Модификаторы Vue — это, по сути, демо-версия на официальном сайте.

AES-шифрование

AES — это метод симметричного шифрования. Режимы шифрования в основном включают в себя следующее:

1. Электронная кодовая книга (ECB) 2. Цепочка блоков шифра (CBC) 3. Режим калькулятора (Счетчик (CTR)) 4. Обратная связь по шифру (CFB) 5. Обратная связь по выходу (OFB)

npm install -S aes-js

Если вам интересно, вы можете узнать больше о конкретных внутренних принципах.

Когда мы используем localStorage и SessionStorage для локального хранения данных, мы можем выполнить операцию шифрования, чтобы повысить уровень безопасности данных.

гибкая адаптация мобильного терминала lib