Переходы страниц для простых сайтов HTML? - PullRequest
Новая
       6

Переходы страниц для простых сайтов HTML?

0 голосов
/ 19 октября 2018

В настоящее время я работаю над внутренним веб-сайтом для моего офиса.Я использую vue.js для его возможности легко поддерживать многочисленные страницы зацикливания и динамического контента.Я также выбрал vue, потому что мои исследования показали, что переходы страниц выглядят довольно просто.

К сожалению, мой ИТ-отдел неохотно размещает сайт на сервере;заставив меня сохранить этот проект как статическую папку HTML-страниц.Из-за этого элементы vue-страницы не работают в такой среде (,и т. д.).

Существует ли метод применения переходов vue-страниц на статическом html-сайте?Если нет, возможно ли отложить загрузку страницы, чтобы я мог включать анимацию CSS, запускаемую между страницами?

1 Ответ

0 голосов
/ 20 октября 2018

Хорошо, нет, вы можете использовать даже Vue Cli , чтобы сделать любое приложение Vue и развернуть его на любом типе веб-сервера. Вам нужен только локальный компьютер, чтобы сделать все бесполезные вещи (транспорт,minify js, preprocessCSS и т. д.), и когда вам нужно развернуть приложение, единственное, что нужно сделать, это запустить производственные команды на вашем локальном компьютере разработки (например, "npm run prod") и загрузить только обработанные файлы дня изготовления.

Vue работает двумя способами, только Runtime + Compiler или Runtime:

Из-за этого элементы страницы vue не работают в такой среде (и т. Д.).

Компоненты файла в Vue должны быть «скомпилированы» с помощью компилятора Vue Loader, и для этого вам необходимо использовать какой-либо конструктор модулей, такой как webpack. Объясняется здесь в официальной документации

Но это не значит, что вам нужно использовать конструктор модулей, чтобы сайт с Vue использовал пользовательские компоненты.Если вы не хотите использовать Webpack, вы можете загрузить на своей странице версию Vue Runtime + Compiler, и компилятор «скомпилирует» все не DOM-теги в компонент Vue, проверьте фрагмент 

var app = new Vue({
  el: '#app',
  data: {
    article: 'first'
  }
})
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<section id="app">
    <header>
    </header>
    <transition appear name="fade" mode="out-in">
      <article key="first" v-if="article === 'first'" @click="article = 'second'">
        <h1>Title of the Page</h1>
        <p> some content (click me to change the content)..<p>
      </article>
      <article v-else @click="article = 'first'" key="second">
        <h1>Another Title</h1>
        <p> some content ..<p>
      </article>
    </transition>
</section>
...