Incluindo jQuery em projeto Vue webpack

Olá

Existem muitos plugins feitos em jQuery que ainda não tem uma versão em Vue JS. É claro você pode optar por criar o seu próprio, converter a estrututra de jQuery para Vue JS ou utilizar algo compatível feito por alguém da comunidade Vue.

Mas em alguns casos não há tempo necessário para tomar alguma das decisões acima, pois o plugin é muito robusto ou coisa similar. Então partimos para a união dos dois :)

Vue + jQuery

Após criar seu projeto Vue JS você deve navegar até a pasta do projeto e instalar o jQuery como seguinte comando:

npm install jquery --save

Feito a etapa acima, você deve editar o arquivo main.js dentro da pasta src adicionado instruções de uso do jQuery.

import Vue from 'vue'
import App from './App'
import router from './router'
import jQuery from 'jquery';
global.jQuery = jQuery;
global.$ = jQuery;

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

Após isto você pode testar subindo sua aplicação com:

npm run dev

Após o navegador abrir podemos abrir o console com comando F12 e testar algum comando em jQuery para verificar se tudo está ok.

Após esta etapa concluída será possível adicionar e utilizar os tradicionais plugins jQuery dentro do projeto.
;)

Comentários

Postagens mais visitadas deste blog

Dica: Extensão Indentar código VUE Visual Studio Code

Olá Por muitas é necessário um atalho para formatar o seu código fonte no editor de texto. Para formatação de HTML, CSS, JS e afins no visual studio code você pode utilizar o: HTML Snippets Mas esta extensão acima não formata arquivos de template .vue . Para formatar este tipo de arquivos é necessário instalar alguma outra extensão. Entre as que busquei a que faz o serviço da melhor forma atualmente utilizando o atalho alt+shift+f é o plugin ventur: Vetur Este plugin é muito bom mesmo. Facilitou bastante a formatação de fontes em templates .vue. É isso espero que ajude;)

Migrando repositório TFS para GIT

Chega o momento em que decidimos migrar do TFS para GIT por 'N' motivos e benefícios que esta migração pode trazer. Caso você tenha uma repositório de longa data e queira manter o histórico de checkins, o git-tfs auxilia nesta tarefa. Uma das minhas formas preferidas para instalar é através do chocolatey . Com o chocolatey instalado em sua máquina basta abrir o powershell em modo admin e digitar: cinst GitTfs No powershell para clonar o repositório TFS para seu repositório git você deve digitar o seguinte comando: git tfs clone http : //meutfs.com $/diretoriotfs c : /diretorio-alvo-clone --branches=all -u=CORP\Usuario -p=****** Para mais opções de comando segue link do github do projeto.

Vex dialog: Customizando texto de botões e recebendo callback corretamente

Olá, Muitos projetos utilizam ótima esta biblioteca chamada VEX para exibir alertas, confirms entre outros tipos de 'modals' para o usuário substituindo o tradicional comando alert("texto"); do navegador (que tem visual mais feinho xD). Neste post quero mostrar como é possível customizar o texto de botões do vex.dialog.open e do vex.dialog.confirm, visto que muitos tem esta dificuldade. Quando você consulta a documentação você acha a seguinte instrução: Então você pensa... ok vou fazer meu vex dialog e sobreescrever as propriedades do confirm ou open na construção do componente. Ficando mais ou menos assim: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 vex.dialog.confirm({ message: "Deseja confirmar?" , buttons: { YES: { text: 'Claro! Agora mesmo.' , className: 'vex-dialog-button-primary vex-dialog-button vex-first' , }, NO: { text: 'Ahhh, não quero......

Jozimar Back's codding blog

Pesquisar este blog