Добавить самое простое всплывающее окно (написанное с помощью Vuejs) в существующий проект, отличный от Vuejs.
У меня есть большой существующий проект, очень старый, и я решил проверить, насколько легко будет добавить Vuejs в этот проект.
Поэтому мне нужно добавить простое всплывающее окно на Vuejs.
Мой проект использует Webpack для создания исходных файлов.
Чтобы добавить vuejs, нам нужно добавить библиотеки в package.json:
Вью: ^ 2.5.21
Затем в конфигурации веб-пакета:
разрешить: {
псевдоним: {
'vue': path.разрешить(NODE_MODULES_PATH, 'vue/dist/vue.js'),
},
},
Теперь мы можем написать само всплывающее окно.
Сначала добавьте пустой div с идентификатором «modal» в index.html.
‹div id=modal›‹/div›
Второй — добавить класс всплывающего окна:
импортировать Vue из 'vue';
class Popup {
конструктор() {
this.popupState = {
visible: false,
};< br /> }
init() {
const App = {
name: 'modal',
template: '‹div id=modal v-if= visible === true›...‹/div›',
данные: () =› {
return this.popupState;
},
};
>
new Vue({
render: h =› h(App),
}).$mount('#modal');
}
show() {
this.popupState.visible = true;
}
close() {
this.popupState.visible = false;
}
}
export default new Popup();
И нам нужно инициализировать его в app.js:
импортировать всплывающее окно из «приложения/всплывающего окна»;
...
popup.init();
Теперь мы можем импортировать его куда угодно и вызывать show/close.
Так что мне (новичку в Vuejs) было не так просто добавить vuejs в большой существующий проект. Я потратил некоторое время, чтобы найти решение, позволяющее просто отображать некоторый текст в моем «модальном» div.
Но после решения этой проблемы, я думаю, будет несложно добавить больше представлений с помощью Vuejs в проект и изучить его глубже.
