Vue.js 2 + Vuex + Router + пряжа! Базовая конфигурация версии 2

Это улучшенная версия, основанная на более старой статье. Я обновил шаблон vue-material до всех последних выпусков пакетов.

tl;dr;

Установите vue-cli и пряжу

npm i -g vue-cli пряжа

Затем скачайте этот шаблон:

vue init pablohpsilva / vue-material-markerplate

Я предоставляю и открываю свой собственный шаблон 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, компоненты, директивы и т. Д.