> 웹 프론트엔드 > 프런트엔드 Q&A > jq와 vuejs를 혼합할 수 있나요?

jq와 vuejs를 혼합할 수 있나요?

青灯夜游
풀어 주다: 2023-01-11 09:22:12
원래의
3775명이 탐색했습니다.

jq와 vuejs를 혼합할 수 있습니다. 방법: 1. npm 도구를 사용하여 jquery를 설치합니다. 2. "webpack.base.conf.js" 및 "module.exports" 파일을 구성합니다. " Import 'jquery'"는 jq를 소개하기만 하면 됩니다.

jq와 vuejs를 혼합할 수 있나요?

이 튜토리얼의 운영 환경: Windows 7 시스템, vue 버전 2.9.6, DELL G3 컴퓨터.

가끔 vue.js를 생각하면 자동으로 vue-cli 스캐폴딩을 사용하여 프로젝트를 구축하는 생각이 들 때가 있습니다. 하지만 때로는 비즈니스 시나리오가 vue-cli 스캐폴딩을 사용하는 데 적합하지 않은 경우에는 vue+를 jquery와 혼합하여 사용하세요. 이들 장점을 결합하면 개발 효율성이 크게 향상됩니다.

vue 프로젝트에서 jquery를 사용하는 방법

1. jquery를 설치합니다.

프로젝트 루트 디렉토리에 들어가서 npm install jquery --save를 실행하세요.npm install jquery --save

项目的package.json会自动添加依赖信息

2、webpack配置

找到项目的build目录中的webpack.base.conf.js文件,引入:var webpack = require('webpack')

然后在module.exports中添加一段代码,

resolve: {
....
},
//添加jquery
plugins: [
  new webpack.optimize.CommonsChunkPlugin('common.js'),
  new webpack.ProvidePlugin({
    jQuery: "jquery",
    $: "jquery"
  }),
],
module: {.....
로그인 후 복사

3、找到项目的main.js,添加以下代码:import 'jquery'

这样使用npm run dev

프로젝트의 package.json이 자동으로 종속성 정보를 추가합니다

2 Webpack 구성

프로젝트의 빌드 디렉토리에서 webpack을 찾으세요. .base.conf.js 파일에 다음을 소개합니다: var webpack = require('webpack')

그런 다음 module.exports에 코드 조각을 추가합니다. 🎜
<el-row id="form">....
jqueryTest(){
 console.log($("form"))
}
로그인 후 복사
🎜3. 프로젝트에 다음 코드를 추가하세요: import 'jquery'🎜🎜npm run dev를 사용하여 프로젝트를 다시 실행하세요🎜🎜테스트, 개인 테스트가 성공했습니다🎜rrreee🎜 관련 추천: "🎜vue.js Tutorial🎜》🎜

위 내용은 jq와 vuejs를 혼합할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿