vue.js настраиваемый css для компонента (без веб-пакета и vue-загрузчика) - PullRequest
Новая
       9

vue.js настраиваемый css для компонента (без веб-пакета и vue-загрузчика)

1 голос
/ 21 апреля 2019

Использование Vue Router для загрузки компонентов.

Обратите внимание, что я не использую webpack или vue-loader.

Вот пример компонента, который загружается с помощью vue - router 

export default {
    name: 'Abc',
    template:'<div>Now .. i can't add style element here :(. So where should i add it </div>',
    data(){
        return {
             message:' new message'
        }
    },
}

Где я могу добавить CSS стили. Меня не волнует область применения CSS, если это невозможно.

Не хочу использовать функции рендеринга (https://vuejs.org/v2/guide/render-function#The-Data-Object-In-Depth) .. так как создание структуры dom меня убьет

Ответы [ 2 ]

2 голосов
/ 23 апреля 2019

Как указано в этом ответе, вы не можете определить отдельный CSS в компоненте Vue, используя что-то вроде css, как вы можете определить HTML, используя template.

При этом существует несколько способов определить CSS для конкретных компонентов / элементов:

CSS с областью действия

Вы можете определить style для области видимости компонента:

App.vue 

<template>
  <div id="app">
    <RedComponent/>
    <NotRedComponent/>
  </div>
</template>

<script>
import RedComponent from "./components/RedComponent";
import NotRedComponent from "./components/NotRedComponent";

export default {
  components: {
    RedComponent,
    NotRedComponent
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

RedComponent.vue 

<script>
export default {
  template: "<div>I am red</div>"
};
</script>

<style scoped>
div {
  color: red;
}
</style>

NotRedComponent.vue 

<script>
export default {
  template: "<div>I am not red</div>"
};
</script>

Смотрите этот концерт здесь

Классы CSS и идентификаторы

Вы можете присвоить элементам классы и идентификаторы, чтобы выбрать их с помощью CSS, и просто иметь отдельный файл CSS. Примечание: это не уникально для Vue.

App.vue 

<script>
export default {
  name: "App",
  template: '<div><p class="red">I am red</p><p>I am not red</p></div>'
};
</script>

index.css 

.red {
  color: red;
}

Смотрите это в прямом эфире здесь

Вы можете ссылаться на этот файл index.css из любого места (в пределах разумного) - например, в моей демонстрационной версии на него ссылаются из самого index.html (что-то вроде <link rel="stylesheet" type="text/css" href="index.css" /> в теге <head> подойдет).

Встроенные стили

Для этого использование обратных кавычек (`) вместо кавычек облегчит вашу жизнь. Еще одним преимуществом использования обратных галочек является тот факт, что вы можете разбить шаблон на несколько строк.

App.vue 

<script>
export default {
  name: "App",
  template: `<div>
    <p style="color: red">I am red</p>
    <p>I am not red</p>
  </div>`
};
</script>

Смотрите этот концерт здесь

Лично я никогда не встречал сценарий использования, где CSS с областью действия не справился бы с задачей даже с vue-router, но это некоторые альтернативные варианты, если вы не можете использовать его по какой-либо причине.

0 голосов
/ 21 апреля 2019

Вы можете использовать любую библиотеку CSS, такую ​​как Bootstrap, Bulma и т. Д., И добавлять классы CSS прямо в шаблон, как показано ниже.

В разделе head вашей страницы добавьте ссылку на загрузочную ссылку и все. 

template: `<div class="container">Boostrap</div>`
...