LINUX.ORG.RU

Vue.js и внешние стили и скрипты

 


0

1

Пробую писать на vue.js Хочу подкинуть в dev сервер bootstrap соответственно надо добавить link и script. Но dev server на это жалуется. Пока приходится делать так:

created() {
let ckeditor = document.createElement('script');    ckeditor.setAttribute('src',"//cdn.ckeditor.com/4.6.2/full/ckeditor.js");
document.head.appendChild(ckeditor);
}

Ясно, что это неправильно. А вот как это сделать правильно?


Я использую nuxt.

Вот как я смог добавить:

https://bitbucket.org/budden/ppr/src/430c7e5960a0f5c624bdfd9261e21bcd58fc07a8...

<script>
  import GdeYa from '~/components/GdeYa.vue';

  export default {
    components: {
      GdeYa
    },
    head: {
      title: "Яроклава: печатаем Rus+Lat без боли",
      script: [
        { type: 'text/javascript', src: '/jquery/3.2.1/jquery.js' },
        { type: 'text/javascript', src: '/jquery-caret/jquery.caret.js' },
        { type: 'text/javascript', src: '/yaroklava-js/klaviatura.js' }
      ]
    },
    data: function() {
      return {};
    },
    directives: {
      focus: {
        // https://ru.vuejs.org/v2/guide/custom-directive.html
        inserted: function (эл) {
          эл.focus()
        }
      }
    }
  }
</script>

Для vue должно быть что-то подобное, но блин я забыл, где оно описано :( Вот, 5 минут искал, при том, что недавно пользовался.

https://github.com/declandewet/vue-meta#script-object

Но такого пакета вроде не нужно. Это просто они доку не перенесли в нужное место. Смотри, как у меня сделано, и делай по образцу.

Как вставить стиль - я не знаю, я использую только nuxt, там делаются шаблоны компонент и в них просто можно вставить css, в т.ч. со ссылкой на файл. См. доку по nuxt.

Ещё два варианта вставки стиля - вставить его в шаблон твоего приложения app.html, смотри как у меня, https://bitbucket.org/budden/ppr/src/430c7e5960a0f5c624bdfd9261e21bcd58fc07a8...

, но не спрашивай, где это описано - я не помню. Может бытЬ, это только для nuxt работает.

И есть vue-loader, кажется, там тоже можно задавать шаблоны страниц. Может быть, ты сможешь прикрутить vue-loader без nuxt.

И ещё где-то есть один язык шаблонов. Кажется, тут https://ssr.vuejs.org/ru/api.html#webpack-plugins, ищи «настройки рендерера».

Но учти, что русская документация устарела и сплошь и рядом не соответствует реалиям.

Короче, добро пожаловать в ад :)

den73 ★★★★★
()
Ответ на: комментарий от den73

В соответствии с современными стандартами, у тега script, содержащего js, не должно быть type='text/javascript'

Или ты свои итоговые скомпилированные сайты не проверяешь валидатором?

anonymous
()
Ответ на: комментарий от anonymous

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

den73 ★★★★★
()
Ответ на: комментарий от vazgen05

Там было что-то плохо для случая nuxt. Не помню точно, что. Может быть, не было мануала для nuxt. Или оно просто протухло.

Вообще, мне кажется, что если брать vue, то лучше сразу начинать с nuxt, т.к. именно в нём основные вкусняхи - генерация статического сайта и SSR. Обе эти вещи критичны для SEO.

den73 ★★★★★
()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.