Laravel e Vuejs 3

O documento apresenta um programa de aulas sobre desenvolvimento front-end com Vue.js ministrado por Fábio Vedovelli. A primeira aula aborda conceitos básicos de front-end, configuração de projetos com Laravel e Vue. A segunda aula explica os principais recursos de Vue.js e desenvolvimento CRUD. A terceira aula transforma o projeto em uma single page application.

Enviado por

Daniele Ascipriano

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

100% acharam este documento útil (1 voto)

541 visualizações

Laravel e Vuejs 3

Enviado por

Daniele Ascipriano

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

Você está na página 1/ 16

+

Fábio Vedovelli (@vedovelli)

Web Dev desde 1998

PHP e JS

Laravel e Vue.js (também React)

Atualmente Sr. Front End Dev

octimine technologies de Munique, Alemanha
Programa de Aulas

Aula 1

. Conceitos presentes no front end dev

. Conﬁguração projeto Laravel

. Conﬁguração Vue

. Primeiro compomente
Programa de Aulas
Aula 2

. Explicação dos principais conceitos do

desenvolvimento com Vue.js

. Explicação dos principais recursos do Vue.js

. Desenvolvimento CRUD completo baseado em

componentes Vue.js
Programa de Aulas
Aula 3

. Transformação do projeto da aula anterior numa

Single Page Application
Por que Vue.js?
Front End
Desenvolver Front End é:
Escolher libraries/frameworks
Desenvolver
Lint
Concatenar/Miniﬁcar
Modularizar
Componentizar
...
Node.js
NPM e Yarn
Gulp
...

// compile all your Sass

gulp.task('sass', function (){
gulp.src(['./dev/sass/*.scss', '!./dev/sass/_variables.scss'])
.pipe(sass({
includePaths: ['./dev/sass'],
outputStyle: 'expanded'
}))
.pipe(prefix(
"last 1 version", "> 1%", "ie 8", "ie 7"
))
.pipe(gulp.dest('./dev/css'))
Gulp .pipe(minifycss())
.pipe(gulp.dest('./prod/css'));
});

// Uglify JS
gulp.task('uglify', function(){
gulp.src('./dev/js/*.js')
.pipe(uglify())
.pipe(gulp.dest('./prod/js'));
});

gulp.task('imagemin', function () {
gulp.src('./dev/img/**/*')
.pipe(imagemin())
.pipe(gulp.dest('./dev/img'))
.pipe(gulp.dest('./prod/img'));
});

gulp.task('default', function(){

// watch me getting Sassy

Webpack
Laravel Elixir
Laravel Elixir
Facilitador no uso do Gulp
Roda Module Bundler
(Browserify, Webpack, Rollup)
Adiciona Cache buster
Concatena e miniﬁcar JS e CSS
File Copy
Compila SASS/LESS
Compila ES2015
Gera Source Maps
Configuremos
Nosso Projeto