Я говорил о Какие пользовательские HTML -элементы были В моем последнем посте. Сегодня я собираюсь пройти через процесс получения нового проекта Vue CLI от земли, чтобы вы могли построить свой собственный. Я буду использовать
Получение VUE CLI2
Первое, что вы захотите настроить, это Vue Cli Анкет Это удивительный инструмент, который будет устанавливать и настраивать почти все, что вам нужно для разработки, и поможет вам создать наши компоненты в качестве пользовательских HTML -элементов.
Вы собираетесь сделать довольно много в нашей командной строке, поэтому откройте свою любимую командную строку и введите следующее в Windows:
npm install -g @vue/cli
Или это на Mac или Linux:
sudo npm install -g @vue/cli
Это установит новую программу на вашем компьютере под названием, как ни странно, Vue Анкет Это Vue Приложение является отличной отправной точкой для любого нового проекта VUE, будь то спад 3 мобильное приложение или пользовательские HTML -элементы.
Использование Vue CLI для создания нового проекта
Чтобы создать новый проект VUE, вы можете использовать новый VUE CLI. Если вы запустите следующую команду, она создаст и загрузит совершенно новый проект VUE в папку с именем Мои клиенты :
vue create --bare --default my-custom-elements
Используя -Бар помешает CLI создать ненужный Helloworld компонент и --По умолчанию Скажите CLI, чтобы настроить простой проект. Есть много дополнений, которые вы можете добавить в проект, используя CLI, но вам не нужно ничего из этого в данный момент.
Как только это будет сделано, изменитесь в новый каталог и откройте его в своем любимом редакторе. 4
Структура проекта Vue
Глядя на структуру проекта, здесь многое было создано для нас! Здесь есть ряд файлов node.js, которые настраивают некоторые инструменты для нашего проекта и все библиотеки, которые нам понадобятся для создания и составления наших тегов. Вы можете прочитать о том, что Package.json здесь И получить немного знания о node_modules Здесь Анкет
Вы должны увидеть две другие папки там хорошо, SRC и публичный . Я оставлю объяснение public В другой раз, но на чем вы хотите сосредоточиться, так это SRC папка.
SRC Папка – это то, где весь ваш код компонента будет выполняться для проекта. Это местоположение вашего исходного кода в структуре проекта.
На самом деле, вы собираетесь создать новую папку здесь. Просто щелкните правой кнопкой мыши на SRC Папка, выберите новую папку и вызовите папку компоненты . Здесь вы создадите свои компоненты, которые станут индивидуальными элементами.
Создание пользовательского элемента
Теперь, когда у вас настроен проект, мы собираемся создать новый компонент. Щелкните правой кнопкой мыши на новый Компоненты Папка и выберите новый файл. Назовите этот файл Blink.vue и установите свой контент на следующее:
Это создает ОДИН -файл компонент В Vue для нас, что делает создание пользовательских элементов очень простыми и с существующим синтаксисом веб -разработчика. Этот компонент должен быть довольно легко читать как есть. Span вокруг этого. CSS, внизу, создает новый класс стиля, который скрывает элемент (устанавливая его видимость Hidden ). Тогда логика JavaScript будет, когда компонент «установлен» или загружен на страницу, возьмите тот промежуток, который вы создали и переключаете (или добавляете/удалили) класс из пролета, показывая и скрывая контент из слот Анкет
Теперь вы можете создать это как пользовательский HTML -элемент.
Создание компонента в пользовательский элемент
По умолчанию этот проект не настроен на создание пользовательских элементов. У него есть все инструменты, необходимые для этого, но нам нужно настроить новый сценарий, чтобы его произошло.
Откройте Package.json файл. В этом файле уже много настроено, но вы хотите перейти в раздел, который помечен "Сценарии" и добавить новый. В настоящее время это будет выглядеть так:
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
Ты собираешься изменить сборка Скрипт на что -то новое. Изменить его, чтобы посмотреть на линию:
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build --target wc --name my-blink 'src/components/Blink.vue'",
"lint": "vue-cli-service lint"
},
Этот скрипт построения теперь изменен для создания веб -компонентов ( -Target WC ), дайте пользовательскому элементу имя ( -my my my-mlink ) 5 и просто постройте один компонент ( 'src/components/blink.vue' ).
Как только вы добавите это в Package.json И сохранить файл, теперь вы можете запустить процесс сборки, чтобы создать свой пользовательский элемент. Запустите следующую команду в командной строке в папке проекта:
npm run build
Это создаст ваш пользовательский элемент и поместит файл JavaScript в Dist Папка вашего проекта (которая должна была быть только что создана). Это также создаст Demo.html файл для вас. Из этого файла вы увидите это:
my-blink demo
Это не полный HTML -файл, поэтому не слишком полезен, но вы можете увидеть, что вам нужно сделать, чтобы использовать этот пользовательский элемент. Во -первых, вам нужно будет включить структуру VUE на странице:
Затем включите свой собственный файл JavaScript, который был встроен в Dist папка:
А потом используйте свой новый тег!
Или, точнее, если вы использовали это в реальной жизни:
Look!!! Blinking text!!!
Это все, что нужно. Здесь много шагов, и мы даже не говорили о нескольких пользовательских элементах и не приводят их к общению вместе (что я планирую добраться), но вы можете увидеть, как простой компонент VUE может быть создан в пользовательском элементе.
Ооооооо, детка! ↩
Я собираюсь предположить здесь, что у вас есть Узел и NPM Установлен уже. Если вы этого не сделаете, сделайте это первым. ↩
Приложение для одной страницы ↩
Могу я предложить Visual Studio Code ? ↩
По стандарту все пользовательские элементы, созданные разработчиком, должны содержать
-Анкет Я пойду в хорошие соглашения об именах в другом посте. ↩
Оригинал: “https://dev.to/firstclown/setting-up-a-vue-cli-project-for-building-custom-html-elements-3ncj”