Как использовать Vue cli?

Question

[Александр Маджугин]

Бэкграунд:
До этого никаких сборщиков не использовал и вообще я бэкендщик. На vue делал компоненты но просто директом их подключал.
https://cli.vuejs.org/ru/guide/installation.html - здесь всё прочёл. Очень много обо всём и ничего об использовании :(

Что, как я думаю, должен на самом примитивном уровне, делать сборщик:
Превращать мои *.vue файлы в определённой папке в два файла script.js, style.css, который я могу подключить к странице.

Что я надеюсь прочитать в документации:
Запустите в каталоге с вашими vue файлами команду dowell и там появится два файла script.js, style.css, подключите их на страницу.

Но в документации я читаю про создание "проекта", нигде при этом не вижу определение того что здесь понимается под проектом, что я получу в результате и для чего это нужно и что это даст.
Очень много о том, как можно настроить и что поменять в проекте. Ещё о том как его обновлять.
И ничего о том как мне чёрт возьми увидеть этот проект просто в браузере.
Есть где-нибудь инструкция пошаговая чтобы понять на примере?

Answer 1

[bubaley]

Vue cli это не только сборщик.
Самое простое это сделать
npm install -g @vue/cli
vue create helloWorld
Пройти настройки
Перейти в созданную папку и запустить
npm install
npm run serve
Если хочешь, увидеть собранные файлы, то сделай npm run build. Эта команда соберёт и минифицирует в папку dist js и css файлы.
А в папке public будет лежать твой html документ, в который будут подставлены пути на js и css.

Comments

[Александр Маджугин]

Vue cli это не только сборщик.

Я понимаю, но сейчас мне пока нужен он только как сборщик - я не могу схватится за все сразу.

Перейти в созданную папку и запустить

Вот в этом и проблема - я не хочу переходит в созданную папку, я хочу иметь контроль над тем что происходит и у меня есть проект к которому надо подключить страницу на vue, и я хочу применить vue в этом проекте, ради него, а не делать проект ради самого vue.

npm run serve

М... и что это мне даст? Вот примерно то же самое и так же написано в инструкции. Но мне ненужны все эти серверы и так далее, мне нужно чтобы мой js код работал в браузере.

Если хочешь, увидеть собранные файлы, то сделай npm run build. Эта команда соберёт и минифицирует в папку dist js и css файлы.

Ок. Уже сильно лучше. А могу я указать как-то папку в которой всё нужно собрать? Вот есть у меня условно document_root - /
В нем есть скажем /sources где по папочкам разложены css, js, img, font. Ок - я согласен завести там папочку vue с однофайловыми компонентами и хочу чтобы результирующие js падали в /sources/js, а результирующие стили в /sources/css.
Возможно?

А в папке public будет лежать твой html документ, в который будут подставлены пути на js и css.

Какой такой мой html? Мне никакой html не нуже - его генерируется мой фреймворк.

[bubaley]

Александр Маджугин, Вы можете не использовать сам vue-cli, а просто использовать сам framework vue.
Можете подключить его как cdn к вашему основному html файлу. Добавив ссылку вы конце файла.

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Создать корневой тег vue

<div id="app">
    {{ message }}
</div>

И в js добавить работу с vue

var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
})

Теперь вместо message, должен быть отображен hello vue.
Здесь собрана базовая информация по vue -

Этого будет достаточно для начала. Потом сможете усложнять, добавляя компоненты, развернуть свой cli и интегрировать его с back-framework (django, laravel и т.д.) исопльзовать router, vuex и т.д

[Александр Маджугин]

bubaley, я так и его и использовал ранее. У меня уже есть 2 проекта где я его использовал совместно с jQuery и один большой полностью построенный на Vue и Vuex (не SPA при этом).
Т.е. это мне всё понятно. Но в текущем новом проекте, я хотел бы использовать однофайловые компоненты, так как этот большой полностью построенный на Vue проект дал понять как тяжело поддерживать компоненты, которые распределены по разным файлам, особенно если их становится много.
Это и заставило обратить внимание на vue-cli