File manager

File manager - Edit - /home/cipherteam/htdocs/cipherteam.in/yogi/documentation/docs-install-vuejs.html

Back
<!DOCTYPE html> <html dir="ltr" lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Tell the browser to be responsive to screen width --> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <!-- Favicon icon --> <link rel="icon" type="image/png" sizes="16x16" href="../assets/images/favicon.png"> <title>Elite admin Template - The Ultimate Multipurpose admin template</title> <!-- This page css --> <!-- Custom CSS --> <link href="../inverse/dist/css/style.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="highlights/highlight.min.css"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> <style> .plugin-details { display: none; } .plugin-details-active { display: block; } .font-18 { font-size: 18px !important; } </style> </head> <body class="skin-default fixed-layout"> <!-- ============================================================== --> <!-- Preloader - style you can find in spinners.css --> <!-- ============================================================== --> <div class="preloader"> <div class="loader"> <div class="loader__figure"></div> <p class="loader__label">Elite Admin</p> </div> </div> <!-- ============================================================== --> <!-- Main wrapper - style you can find in pages.scss --> <!-- ============================================================== --> <div id="main-wrapper"> <!-- ============================================================== --> <!-- Topbar header - style you can find in pages.scss --> <!-- ============================================================== --> <header class="topbar"> <nav class="navbar top-navbar navbar-expand-md navbar-dark"> <!-- ============================================================== --> <!-- Logo --> <!-- ============================================================== --> <div class="navbar-header"> <a class="navbar-brand" href="index.html"> <!-- Logo icon --><b> <!--You can put here icon as well // <i class="wi wi-sunset"></i> //--> <!-- Dark Logo icon --> <img src="../assets/images/logo-icon.png" alt="homepage" class="dark-logo" /> <!-- Light Logo icon --> <img src="../assets/images/logo-light-icon.png" alt="homepage" class="light-logo" /> </b> <!--End Logo icon --> <!-- Logo text --><span> <!-- dark Logo text --> <img src="../assets/images/logo-text.png" alt="homepage" class="dark-logo" /> <!-- Light Logo text --> <img src="../assets/images/logo-light-text.png" class="light-logo" alt="homepage" /></span> </a> </div> <!-- ============================================================== --> <!-- End Logo --> <!-- ============================================================== --> <div class="navbar-collapse"> <!-- ============================================================== --> <!-- toggle and nav items --> <!-- ============================================================== --> <ul class="navbar-nav mr-auto"> <!-- This is --> <li class="nav-item"> <a class="nav-link nav-toggler d-block d-md-none waves-effect waves-dark" href="javascript:void(0)"> <i class="ti-menu"></i> </a> </li> <li class="nav-item"> <a class="nav-link sidebartoggler d-none d-lg-none d-md-block waves-effect waves-dark" href="javascript:void(0)"> <i class="icon-menu"></i> </a> </li> <li class="nav-item"> <a class="nav-link waves-effect waves-light" href="documentation.html">Documentation</a></li> </ul> </div> </nav> </header> <!-- ============================================================== --> <!-- End Topbar header --> <!-- ============================================================== --> <!-- ============================================================== --> <!-- Left Sidebar - style you can find in sidebar.scss --> <!-- ============================================================== --> <aside class="left-sidebar"> <!-- Sidebar scroll--> <div class="scroll-sidebar"> <!-- Sidebar navigation--> <nav class="sidebar-nav"> <ul id="sidebarnav"> <li class="nav-small-cap pt-2 mt-0">-- Getting Started with Bootstrap</li> <li> <a class="waves-effect waves-dark" href="documentation.html" aria-expanded="false"><i class="icon-chart font-18"></i> <span class="hide-menu">Introduction</span></a> </li> <li> <a class="waves-effect waves-dark" href="docs-start.html" aria-expanded="false"><i class="ti-notepad font-18"></i> <span class="hide-menu">Gettings Started</span></a> </li> <li class="nav-small-cap border-top pt-3 border-muted">-- Getting Started with Angular</li> <li> <a class="waves-effect waves-dark" href="docs-install-angular.html" aria-expanded="false"><i class="mdi mdi-angular font-18"></i> <span class="hide-menu">Installation</span></a> </li> <li class="nav-small-cap border-top pt-3 border-muted">-- Getting Started with React</li> <li> <a class="waves-effect waves-dark" href="docs-install-react.html" aria-expanded="false"><i class="mdi mdi-react font-18"></i> <span class="hide-menu">Installation</span></a> </li> <li class="nav-small-cap border-top pt-3 border-muted">-- Getting Started with VueJs</li> <li> <a class="waves-effect waves-dark" href="docs-install-vuejs.html" aria-expanded="false"><i class=" font-18"></i> <span class="hide-menu">Installation</span></a> </li> <li class="nav-small-cap border-top pt-3 border-muted">-- Customization</li> <li> <a class="waves-effect waves-dark" href="docs-theme-options.html" aria-expanded="false"><i class="icon-drawar font-18"></i> <span class="hide-menu">Theme Options</span></a> </li> <li class="nav-small-cap border-top pt-3 border-muted">-- UI Components</li> <li> <a class="waves-effect waves-dark has-arrow" href="javascript:void(0)" aria-expanded="false"><i class="icon-grid font-18"></i><span class="hide-menu">Bootstrap </span></a> <ul aria-expanded="false" class="collapse first-level"> <li><a href="docs-ui-buttons.html"><span class="hide-menu"> Buttons </span></a></li> <li><a href="docs-ui-modals.html"><span class="hide-menu"> Modals </span></a></li> <li><a href="docs-ui-tabs.html"><span class="hide-menu"> Tabs </span></a></li> <li><a href="docs-ui-tooltip-popover.html"><span class="hide-menu"> Tooltip & Popover </span></a></li> <li><a href="docs-ui-notification.html"><span class="hide-menu"> Notification </span></a></li> <li><a href="docs-ui-progressbar.html"><span class="hide-menu"> Progressbar </span></a> </li> <li><a href="docs-ui-typography.html"><span class="hide-menu"> Typography </span></a> </li> <li><a href="docs-ui-bootstrapui.html"><span class="hide-menu"> Bootstrap UI </span></a> </li> <li><a href="docs-ui-breadcrumb.html"><span class="hide-menu"> Breadcrumb </span></a> </li> <li><a href="docs-ui-listmedia.html"><span class="hide-menu"> List Media </span></a> </li> <li><a href="docs-ui-grid.html"><span class="hide-menu"> Grid </span></a></li> <li><a href="docs-ui-carousel.html"><span class="hide-menu"> Carousel </span></a></li> <li><a href="docs-ui-scrollspy.html"><span class="hide-menu"> Scrollspy </span></a></li> <li><a href="docs-ui-toasts.html"><span class="hide-menu"> Toasts </span></a></li> <li><a href="docs-ui-spinner.html"><span class="hide-menu"> Spinner </span></a></li> </ul> </li> <li> <a class="waves-effect waves-dark has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false"><i class="icon-note font-18"></i><span class="hide-menu">Customized</span></a> <ul aria-expanded="false" class="collapse first-level"> <li><a href="docs-custom-datatables.html"><span class="hide-menu"> Datatables</span></a> </li> <li><a href="docs-custom-table-footable.html"><span class="hide-menu"> Footable Table</span></a></li> <li><a href="docs-custom-table-bootstrap.html"><span class="hide-menu"> Bootstrap Table</span></a></li> <li><a href="docs-custom-cards.html"><span class="hide-menu"> Cards</span></a></li> <li><a href="docs-custom-widgets.html"><span class="hide-menu"> Widgets</span></a></li> <li><a href="docs-custom-chart-chartjs.html"><span class="hide-menu"> ChartJs</span></a> </li> <li><a href="docs-custom-chart-chartist.html"><span class="hide-menu"> Chartist</span></a></li> <li><a href="docs-custom-chart-echart.html"><span class="hide-menu"> Echart</span></a> </li> <li><a href="docs-custom-colorpicker.html"><span class="hide-menu"> Colorpicker</span></a></li> <li><a href="docs-custom-material-datepicker.html"><span class="hide-menu"> Material Datepicker</span></a></li> <li><a href="docs-custom-touchspin.html"><span class="hide-menu"> Touchspin</span></a> </li> <li><a href="docs-custom-multiselect.html"><span class="hide-menu"> Multiselect</span></a></li> </ul> </li> </ul> </nav> <!-- End Sidebar navigation --> </div> <!-- End Sidebar scroll--> </aside> <!-- ============================================================== --> <!-- End Left Sidebar - style you can find in sidebar.scss --> <!-- ============================================================== --> <!-- ============================================================== --> <!-- Page wrapper --> <!-- ============================================================== --> <div class="page-wrapper"> <!-- ============================================================== --> <!-- Container fluid --> <!-- ============================================================== --> <div class="container-fluid"> <!-- ============================================================== --> <!-- Bread crumb and right sidebar toggle --> <!-- ============================================================== --> <div class="row page-titles"> <div class="col-md-5 align-self-center"> <h4 class="text-themecolor">Installation of VueJs</h4> </div> <div class="col-md-7 align-self-center"> <ol class="breadcrumb float-right"> <li class="breadcrumb-item"><a href="javascript:void(0)">Elite</a></li> <li class="breadcrumb-item text-primary font-medium">Installation of VueJs</li> </ol> </div> </div> <!-- ============================================================== --> <!-- End Bread crumb and right sidebar toggle --> <!-- ============================================================== --> <div class="row"> <div class="col-md-12"> <div class="card"> <div class="card-body"> <h4 class="card-title">Installation of VueJs</h4> <div class="border border-muted my-3"> <h5 class="card-title border-bottom p-3 bg-light mb-0"> <i class="mdi mdi-numeric-1-box-multiple-outline font-18 mr-2"></i>VueJs </h5> <p class="card-subtitle text-muted p-3 mb-0"> VueJS is a progressive framework for building user interfaces. Vuexy Admin template is build upon VueJS. It is mandatory to know what is VueJS, If you don't know what is VueJS and how to use it, we highly recommend learninng VueJS before proceeding. </p> </div> <div class="border border-muted mb-3"> <h5 class="card-title border-bottom p-3 bg-light mb-0"> <i class="mdi mdi-numeric-2-box-multiple-outline font-18 mr-2"></i>VueCLI </h5> <p class="card-subtitle text-muted p-3 mb-0"> Vue CLI is a full system for rapid Vue.js development. Vue CLI aims to be the standard tooling baseline for the Vue ecosystem. </p> </div> <div class="border border-muted mb-3"> <h5 class="card-title border-bottom p-3 bg-light mb-0"> <i class="mdi mdi-numeric-3-box-multiple-outline font-18 mr-2"></i>Vuesax </h5> <p class="card-subtitle text-muted p-3 mb-0"> Vuesax is a library of Vuejs components that facilitates front-end development. It is beautifully designed and pleasant looking framework. </p> </div> <div class="bg-light p-3 mt-3"> <h6><span class="font-16"><i class="mdi mdi-numeric-1-box-multiple-outline mr-2"></i></span> Download a Package Source From our Mart.</h6> <hr> <h6><span class="font-16"><i class="mdi mdi-numeric-2-box-multiple-outline mr-2"></i></span>Install Node.js From <a href="https://nodejs.org/en/download/">https://nodejs.org/en/download/</a> </h6> <hr> <h6><span class="font-16"><i class="mdi mdi-numeric-3-box-multiple-outline mr-2"></i></span>Npm is a default package manager for the JavaScript runtime environment Node.js. If you've already then update once. </h6> <div class="bg-dark p-2 ml-md-4 mt-md-3 text-white rounded-lg shadow"> <p class="mb-0">npm install --global npm@latest</p> </div> <div class="ml-md-4 mt-md-3 alert alert-info p-0 rounded-0"> <div class="bg-info mb-0 text-white p-2"> <p class="mb-0">To check weather is node succesfully install or not.</p> </div> <div class="p-3"> <h5 class="mb-0">npm --version</h5> </div> </div> <hr> <h6><span class="font-16"><i class="mdi mdi-numeric-4-box-multiple-outline mr-2"></i></span>For yarn package manager. </h6> <div class="bg-dark p-2 ml-md-4 mt-md-3 text-white rounded-lg shadow"> <p class="mb-0">npm install --global yarn</p> </div> <div class="ml-md-4 mt-md-3 alert alert-info p-0 rounded-0"> <div class="bg-info mb-0 text-white p-2"> <p class="mb-0">To check weather is yarn succesfully install or not.</p> </div> <div class="p-3"> <h5 class="mb-0">yarn --version</h5> </div> </div> <hr> <h6><span class="font-16"><i class="mdi mdi-numeric-5-box-multiple-outline mr-2"></i></span>After that open command promt or any other terminal and go to Package Path and Run the Command <span class="badge badge-dark badge-pill">npm install</span>.</h6> <div class="bg-dark p-2 ml-md-4 mt-md-3 text-white rounded-lg shadow"> <p class="mb-0">cd [root] / package / elite-vuesax-vuejs-starterkit</p> </div> <hr> <h6><span class="font-16"><i class="mdi mdi-numeric-6-box-multiple-outline mr-2"></i></span>Install VueCLI Globally. </h6> <div class="bg-dark p-2 ml-md-4 mt-md-3 text-white rounded-lg shadow"> <p class="mb-0">npm install -g @vue/cli</p> </div> <div class="ml-md-4 mt-md-3 alert alert-info p-0 rounded-0"> <div class="bg-info mb-0 text-white p-2"> <p class="mb-0">For Yarn command is here</p> </div> <div class="p-3"> <h5 class="mb-0">yarn global add @vue/cli</h5> </div> </div> <hr> <h6><span class="font-16"><i class="mdi mdi-numeric-7-box-multiple-outline mr-2"></i></span>To run the templates locally run below command in to your terminal. Open <span class="badge badge-dark badge-pill">http://localhost:8080</span> to view it in the browser. The page will automatically reload if you make changes to the code.</h6> <div class="bg-dark p-2 ml-md-4 mt-md-3 text-white rounded-lg shadow"> <p class="mb-0">npm run serve</p> </div> <hr> <div class="alert alert-warning mt-4 rounded-lg"> <span class="font-medium">Note:</span> Sometimes app may run on different port than <span class="badge badge-pill badge-light border border-warning">8080</span>. To be sure, You can check correct address in console right after label <span class="badge badge-pill badge-light border border-warning"> App running at: </span> . </div> </div> </div> </div> </div> </div> <!-- ============================================================== --> <!-- End Container fluid --> <!-- ============================================================== --> </div> <!-- ============================================================== --> <!-- End Page wrapper --> <!-- ============================================================== --> </div> <!-- ============================================================== --> <!-- footer --> <!-- ============================================================== --> <footer class="footer text-center"> All Rights Reserved by Elite. Designed and Developed by <a href="https://wrappixel.com">WrapPixel</a>. </footer> <!-- ============================================================== --> <!-- End footer --> <!-- ============================================================== --> <!-- ============================================================== --> <!-- End Wrapper --> <!-- ============================================================== --> <!-- End Page --> <!-- ============================================================== --> <!-- All Jquery --> <!-- ============================================================== --> <script src="../assets/node_modules/jquery/jquery-3.2.1.min.js"></script> <script src="../assets/node_modules/popper/popper.min.js"></script> <script src="../assets/node_modules/bootstrap/dist/js/bootstrap.min.js"></script> <!-- apps --> <script src="../inverse/dist/js/perfect-scrollbar.jquery.min.js"></script> <script src="../inverse/dist/js/waves.js"></script> <!--Menu sidebar --> <script src="../inverse/dist/js/sidebarmenu.js"></script> <script src="../inverse/dist/js/perfect-scrollbar.jquery.min.js"></script> <!--Custom JavaScript --> <!--Custom JavaScript --> <script src="../inverse/dist/js/custom.js"></script> <script src="highlights/highlight.min.js"></script> <script> hljs.initHighlightingOnLoad(); </script> <!-- End JS --> </body> </html>

| ver. 1.4 | Github | . | PHP 8.2.9 | Generation time: 0.02 | proxy | phpinfo | Settings