Как направить сырые HTML, CSS, JS файлы? - PullRequest
Новая
       65

Как направить сырые HTML, CSS, JS файлы?

0 голосов
/ 28 октября 2019

Необходимо направлять сырые HTML, CSS и JS файлы. Я использую VueJS с текущим проектом. Вместо использования отдельных файловых компонентов я использую стандартные экземпляры Vue (новые Vue ()) и компоненты Vue (Vue.component) в файлах html и js.

Файлы HTML содержат эти новые экземпляры Vue, и я импортирую в них компоненты с тегами сценария. Компоненты создаются в формате .js с синтаксисом Vue.component ('name') в сочетании с литералами шаблона.

У меня вопрос, как я могу направить их? Точно так же, как это делает Vue-Cli? С вебпаком? Так что я могу в основном иметь dist, заполненный разметкой, в которой есть css и эти js-компоненты.

Я попытался сделать это с webpack, хотя я застрял на части, когда мне нужно импортировать / включить все эти .jsфайлы. Должен ли я импортировать их в main.js как import '../js/comp.js или?

Я ожидаю, что смогу получить доступ ко всем страницам разметки как таковым при запуске сценариев 'run' и доступе к localhost: PORT / home или подобному.

Пример для account.html file - Примечание: эти импортированные пакеты, которые вы видите, играют свою роль в текущем коде, я просто удалил использование этих плагинов, потому что нет необходимости переусердствовать сhtml. 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>CallAnswering | Account settings</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta content="On this page users can change thier settings and personal information" name="description">
        <meta content="Petar Brkovic" name="author">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">

    </head>

    <body>

        <!-- Begin page -->
        <div id="wrapper">

            <!-- Topbar Start -->
            <nav-top page_title="Account"></nav-top>
            <!-- end Topbar -->

            <!-- ========== Left Sidebar Start ========== -->
            <nav-side></nav-side>
            <!-- Left Sidebar End -->

            <!-- Footer Start -->
            <footer-comp></footer-comp>
            <!-- end Footer -->

        </div>
        </div>
        <!-- END wrapper -->

        <div id="modal-wrap">
          <!-- Change Picture Modal -->
          <change-pic-modal></change-pic-modal>

          <!-- Verify Modal -->
          <verify-modal></verify-modal>
        </div>


        <!-- VueJS -->
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
        <!-- Vue Components -->
        <script src="../components/core/nav-top.js"></script>
        <script src="../components/core/nav-side.js"></script>
        <script src="../components/core/footer.js"></script>
        <script src="../components/selects/time-zones.js"></script>
        <script src="../components/selects/cor.js"></script>
        <script src="../components/selects/cob.js"></script>
        <script src="../components/selects/country.js"></script>
        <script src="../components/selects/account-type.js"></script>
        <script src="../components/account/verify-modal.js"></script>
        <script src="../components/account/change-pic-modal.js"></script>

        <!-- VUE | STARTS -->
        <script>
          // Define new Vue insntace based on 'wrapper' which wraps top & side nav components in it
          new Vue({ el: '#wrapper' });
          new Vue({ el: '#modal-wrap' });
        </script>
        <!-- VUE | ENDS -->

        <!-- Vendor js -->
        <script src="../../public/assets/js/vendor.min.js"></script>

        <!-- custombox -->
        <script src="../../public/assets/libs/custombox/custombox.min.js"></script>

        <!-- Mulitselect -->
        <script src="../../public/assets/libs/multiselect/jquery.multi-select.js"></script>
        <script src="../../public/assets/libs/select2/select2.min.js"></script>
        <script src="../../public/assets/libs/switchery/switchery.min.js"></script>

        <script src="../../public/assets/libs/dropify/dropify.min.js"></script>

        <!-- form-upload init -->
        <script src="../../public/assets/js/pages/form-fileupload.init.js"></script>

        <!-- Init js-->
        <script src="../../public/assets/js/pages/form-advanced.init.js"></script>

        <!-- Sweet Alerts js -->
        <script src="../../public/assets/libs/sweetalert2/sweetalert2.min.js"></script>

        <!-- Sweet alert init js-->
        <script src="../../public/assets/js/pages/sweet-alerts.init.js"></script>

        <!--   Core JS Files   -->
        <script src="../../public/assets/js/jquery.bootstrap.js" type="text/javascript"></script>

        <!--  Plugin for the Wizard -->
        <script src="../../public/assets/js/material-bootstrap-wizard.js"></script>

          <!--  More information about jquery.validate here: http://jqueryvalidation.org/    -->
        <script src="../../public/assets/js/jquery.validate.min.js"></script>

        <script src="../../public/assets/js/pages/verification.js"></script>


        <!-- App js -->
        <script src="../../public/assets/js/app.min.js"></script>

    </body>
</html>

Пример для компонента nav-top.js: 

Vue.component('nav-top', {
    props: ['page_title'],
    data() {
        return {
            user: {
                first_name: 'Matt',
                last_name: 'Test',
                full_name: `${this.first_name} ${this.last_name}`
            }
        }
    },
    template: `
    <div class="navbar-custom">
        <ul class="list-unstyled topnav-menu float-right mb-0">
            <li class="dropdown notification-list">
                <a class="nav-link dropdown-toggle nav-user mr-0 waves-effect" data-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
                    <img src="../../public/assets/images/users/user-1.jpg" alt="user-image" class="rounded-circle">
                    <span class="pro-user-name ml-1">{{ user ? user.full_name : ' '}} <i class="mdi mdi-chevron-down"></i>
                    </span>
                </a>

                <div class="dropdown-menu dropdown-menu-right profile-dropdown ">
                    <!-- item-->
                    <div class="dropdown-header noti-title">
                        <h6 class="text-overflow m-0">Welcome!</h6>
                    </div>

                    <!-- item-->
                    <a href="account.html" class="dropdown-item notify-item">
                        <i class="fas fa-user"></i>
                        <span>My Account</span>
                    </a>

                    <div class="dropdown-divider"></div>

                    <!-- item-->
                    <a href="javascript:void(0);" class="dropdown-item notify-item">
                        <i class="fas fa-sign-out-alt"></i>
                        <span>Logout</span>
                    </a>
                </div>
            </li>
        </ul>

        <!-- LOGO -->
        <div class="logo-box">
            <a href="index.html" class="logo text-center">
                <span class="logo-lg">
                    <img src="../../public/assets/images/logo-b&w.png" alt="CallAnswering logo" height="50">
                    <!-- <span class="logo-lg-text-light">Xeria</span> -->
                </span>
                <span class="logo-sm">
                    <!-- <span class="logo-sm-text-dark">X</span> -->
                    <img src="../../public/assets/images/logo-sm.png" alt="CallAnswering logo" height="48">
                </span>
            </a>
        </div>

        <ul class="list-unstyled topnav-menu topnav-menu-left m-0">
            <li>
                <button class="button-menu-mobile disable-btn waves-effect">
                    <i class="fe-menu"></i>
                </button>
            </li>
            <li>
                <h4 class="page-title-main">{{ page_title }}</h4>
            </li>

        </ul>
    </div>
    `
})
...