Vue.js 2 + Vuex + Router + пряжа! Базовая конфигурация версии 2
Это улучшенная версия, основанная на более старой статье. Я обновил шаблон vue-material до всех последних выпусков пакетов.
tl;dr;
Установите vue-cli и пряжу
npm i -g vue-cli пряжа
Затем скачайте этот шаблон:
Я предоставляю и открываю свой собственный шаблон vue. Чтобы скачать и использовать:
vue init pablohpsilva/vue-material-boilerplate
Затем установите все зависимости и запустите его в режиме разработки:
cd vue-material-boilerplate && yarn && yarn dev
Хорошая структура каталогов
src ├── App.vue ├── assets | ├── css | | └── main.css | ├── font | └── img ├── commons | ├── directives | ├── functions | ├── resources | └── validations ├── config | ├── directives.js | ├── router.js | └── validations.js ├── shared-components | ├── RangeCustom.vue | ├── Sidebar.vue | └── Toolbar.vue ├── spa | ├── Login | | └── Login.vue | ├── Products | | └── Products.vue | ├── Home.vue | └── NotFound.vue ├── vuex | ├── modules | └── store.js └── main.js
- Папка assets: поместите туда все свои шрифты, изображения и CSS. Импортируйте ваш CSS с помощью файла main.css;
- Папка commons: здесь должен быть размещен весь код JavaScript. Идея состоит в том, чтобы определить такие вещи, как: создание масок ввода с помощью директив, размещение всех функций, которые используются снова и снова, в вашем приложении, пользовательских проверках и ресурсах вашего приложения;
- Папка config: где все плагины будут подключены к Vue, где будет определен ваш маршрутизатор, а валидации будут прикреплены к вашему плагину валидации. Вкратце: поместите сюда файлы конфигурации;
- Папка shared-components: компоненты, которые используются более чем в одном месте вашего приложения. Поместите их все сюда и используйте повторно;
- Папка spa: разместите здесь свои страницы приложений. При необходимости создайте папку, особенно если для работы вашей страницы требуется более одного компонента. Помните: вы используете компонент на двух или более разных страницах? Переместите его в папку shared-components.
- Папка vuex: в ней будут создаваться все модули vuex и храниться в store.js.
Есть ли там примеры?
Черт возьми! В нем есть примеры практически всего, что необходимо для создания хорошего SPA: точки входа, ресурсы, проверки, маршрутизатор, vuex, компоненты, директивы и т. Д.