How to create a second page in Vue-csi?

N

Nikitosiu2019-06-23 15:26:22

Vue.js

Nikitosiu, 2019-06-23 15:26:22

I made a single page "application" in Vue-cli with components styling and stuff
How do I create a second page? Is it possible to import components or styles there? Can you not import?
app.js

<template>
  <div class="wrapper">
    <top-nav/>
    <div class="contaiber-fluid content">
      <div class="row">
        <div class="col-lg-3">
          <card
            avatar="./img/5.webp"
            name="Terrance arnold"
            job="Art director"
            text="Hi! I'm Adrian the Senior UI Designer at AmazingSurge. We hope you enjoy the design and quality of Social."
            follower="260"
            following="180"
            tweets="2000"
          ></card>
        </div>
        <div class="col-lg-9">
          <panel/>
        </div>
      </div>
    </div>
    <site-footer/>
  </div>
</template>

<script>
import card from "./components/card.vue";
import panel from "./components/panel.vue";
import topNav from "./components/topNav.vue";
import siteFooter from "./components/site-footer.vue";

export default {
  name: "app",
  components: {
    card,
    panel,
    topNav,
    siteFooter
  }
};
</script>

<style lang="scss">
// Стили
</style>

main.js

import Vue from 'vue'
import App from './App.vue'
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'vue-material-design-icons/styles.css'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app');

index.xml

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">

  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
  <title>remark-test</title>
</head>

<body>
  <div id="app"></div>
</body>

</html>

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

N

Nikitosiu, 2019-06-23
@Nikitosiu

https://cli.vuejs.org/en/guide/html-and-static-ass...
https://cli.vuejs.org/en/config/#pages
Here is what is written about it in the Vue-cli documentation

R

Rustam Akimov, 2019-06-23
@Inogami

1. All styles inside App.js will be common for the entire application
2. To create another page, you need a .vue file with its own template, script, style, I think you should read this https://ru.vuejs.org/v2/guide /components.html and this https://ru.vuejs.org/v2/guide/single-file-componen...
3. You need to switch between components, for this you should use vue-router, or write your own router. https://router.vuejs.org/ru/
4. If you want to use the same element several times, then you should put it in a separate component (for example, the same buttons) and use the parameter to pass the necessary data inside