Estrutura inicial para projetos feito com vue-cli

O que o pacote faz ?

• Cria uma estrutura inicial completa com
• Pasta com componente inicial
• Configuração vue-router por módulo usando export e import
• Configuração vuex por módulo usando export e import
• Cria estrutua vuex com seus arquivos, getters, mutations, actions, state
• Configuracao passando axios como chamadas http

1° Passo

Instale um novo projeto com vue-cli, para isso instalar vue-cli global

	npm i -g vue-cli

	vue init webpack <nome-do-projeto>

	cd <nome-do-projeto>

	npm i

Importante

Verifique se o projeto criado com vue-cli existe esses pacotes, se não tiver, instale-os!

	npm i --save vuex
	npm i --save vue-router
	npm i --save axios
	npm i --save-dev vue-cookies
	npm i --save--dev lodash

Instalação deve ser global

 npm i -g initial-structure-vue

Uso Básico

Criando a estrutura inicial

	initial start <nome-do-modulo>

	initial start customer

	/**************************/

	./src
	- app
	-- customer
	--- componentes
	---- main.vue
	-- http
	--- http.js
	-- routes
	--- index.js
	-- services
	-- vuex
	--- actions.js
	--- getters.js
	--- index.js
	--- mutations.js
	--- mutations-types.js
	--- state.js
	-- index.js
	- index.js
	- routes.js
	- vuex.js

	/****************************/

	./src
	- root
	-- components

	/****************************/

	./src
	- router
	-- index.js
	-- routes.js

	/****************************/

	./src
	- vuex
	-- actions.js
	-- getters.js
	-- index.js
	-- modules.js
	-- mutations.js
	-- mutations-types.js
	-- state.js

	/****************************/

	./src
	- http.js

	/****************************/

Criando módulos extras

	initial newModule <nome-do-modulo>

	initial newModule product

	/app
	- product
	-- components
	--- main.vue
	-- http
	--- http.js
	-- routes
	--- index.js
	-- services
	-- vuex
	--- actions.js
	--- getters.js
	--- index.js
	--- mutations.js
	--- mutations-types.js
	--- state.js
	-- index.js

OBS: Em routes.js e vuex.js adicionar o import e export dos módulos criados !

	routes.js

	import { routes as customer } from './customer'
	import { routes as product } from './product'

	export default [

		...customer, ...product

	]

	**************************************************

	vuex.js

	import { vuex as customer } from './customer'
	import { vuex as product } from './product'

	export default {

		customer, product

	}


	Pronto, agora temos dois módulos configurados com vuex e vue-router em nosso projeto, você pode ter
	quantos módulos quiser, basta lembrar de adicionar os módulos

Criando componente novo

OBS: O módulo ja deve estar criado com o comando acima.

	initial newComponent <nome-do-module> <nome-do-component>

	initial newComponent customer form

	/app
	- customer
	-- components
	--- form.vue
	--- main.vue

Comandos extras

	initial --help

Observação

	Este pacote foi criado com entuito de ajudar na rotina de criar os arquivos e configurações iniciais, isso pode
	mudar e melhorar com versões futuras.

Autor

• Cleiton Lopes
• [email protected]
• https://www.linkedin.com/in/cleiton-lopes-045971ba/