vue.js 프로젝트에는 어떤 팁이 있나요?

이 글에서는 주로 vue.js 프로젝트의 실용적인 팁을 샘플 코드를 통해 아주 자세하게 소개하고 있습니다. 공부나 업무에 꼭 필요한 친구들은 아래 팁을 따라해 보세요. 함께.

머리말

Vue.js는 사용자 인터페이스 구축을 위한 진보적인 프레임워크입니다. 다른 헤비급 프레임워크와 달리 Vue는 상향식 증분 개발 설계를 채택합니다. Vue의 핵심 라이브러리는 뷰 레이어에만 중점을 두고 있으며 다른 라이브러리나 기존 프로젝트와 학습하고 통합하기가 매우 쉽습니다. 반면 Vue는 Vue 생태계에서 지원하는 단일 파일 구성 요소 및 라이브러리로 개발된 복잡한 단일 페이지 애플리케이션을 완벽하게 구동할 수 있습니다.

# Vue 프로젝트에 부트스트랩 도입

때때로 필요에 따라 부트스트랩이 vue 프로젝트에 도입되는데, 부트스트랩은 npm을 사용하여 설치할 때 일련의 오류가 발생할 수 있습니다

1. 설치 jQuery

npm install jquery

2. 부트스트랩 설치

npm install bootstrap@3

위의 두 단계에서 먼저 package.json 구성 파일에 버전 번호를 지정한 다음 실행해도 됩니다. npm install

설치가 완료된 후에는 프로젝트가 실행되지 않습니다. , 둘 다 성공적으로 설치되었지만 "Bootstrap's JavaScript에는 jQuery npm이 필요합니다"라는 오류가 계속 보고됩니다. 이 문제를 해결하려면 다음과 같이 main.js 항목 파일에 이를 도입할 수 있습니다.

import $ from 'jquery'
window.jQuery = $
require('bootstrap')

다음, Bootstrap 스타일을 사용하려면 Bootstrap.css를 파일로 가져오기 항목에 입력하면 됩니다. Element UI를 도입하는 방법과 같습니다

import 'bootstrap/dist/css/bootstrap.min.css'

# eslint 코드 검사 끄기

많은 사람들이 eslint 검사를 끄는 방법은 빌드/웹팩에서 eslint 구성 중 이 부분을 주석 처리하는 것이라고 말합니다. .base.conf.js 파일 . Vue-cli 버전 업데이트 때문인지는 모르겠지만, 실제 동작에서는 동작하지 않습니다.

올바른 방법은 config/index.js 파일에서 dev 객체의 useEslint 속성을 false로 변경하는 것입니다. 공식 댓글에서도 이를 매우 명확하게 알 수 있습니다.

# 일부 eslint 규칙을 해제하세요.

실제로 Eslint 코드 검사는 개인 JS 작성을 표준화할 뿐만 아니라 팀 내 여러 사람의 공동 개발에 매우 ​​중요한 역할을 합니다. 그러나 때로는 이러한 규칙이 너무 엄격할 수 있습니다. 예를 들어 사용되지 않는 변수를 선언하면 "no-unused-vars" 오류가 발생합니다. 이 규칙을 해제하려면 eslintrc.js 파일을 열고 변경할 수 있습니다. 해당 규칙을 0으로 닫으면 됩니다

# 포트 번호 수정

대부분의 프로젝트는 기본적으로 포트 80을 수신하므로 여러 프로젝트를 동시에 실행하려면 포트 번호를 수정하면 됩니다. config/index.js

의 포트 번호

# 파일 참조 경로 별칭 설정

때로는 프로젝트 파일이 너무 많고 "../../../static/data"와 같은 참조가 있는 경우도 있습니다. /xx.json"이 자주 나타날 수 있는데, 이는 작성하기가 매우 번거롭습니다. 그리고 종종 오류가 발생하기 쉽습니다(물론 코드 컴파일러가 프롬프트를 표시할 수 있는지 여부는 중요하지 않습니다). 경로를 단순화하기 위해 다음을 구성할 수 있습니다. build/webpack.base.conf.js의 별칭

여기서는 해결 메소드를 호출하여 단순화를 달성합니다. 경로의 목적, 예를 들어 @를 사용하여 src를 직접 대체하거나 "api를 직접 작성할 수 있습니다. /xx.js"를 레이어별로 찾는 대신

# UTC time

VueHighcharts 컴포넌트를 사용할 때 기본적으로 UTC 시간을 사용하므로 시간은 항상 공백으로 표시됩니다. 예를 들어 , 이 순간의 시간은 2017년 11월 23일 18:07인데, 아래 사진에서 UTC 시간으로 표시되는 시간은 10:07입니다

문서를 읽어보니 UTC 사용을 변경해야 한다는 것을 알았습니다. 옵션을 false로 설정했지만 어디서부터 시작해야 할지 모르겠습니다. 실제로 main.js에 구성 요소를 도입하는 동안 관련 구성을 수정할 수 있습니다

위 내용은 제가 모든 사람을 위해 정리한 내용이며 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

JavaScript에서 탄성 효과를 얻는 방법

axios를 사용하여 ajax 요청을 구현하는 방법(자세한 튜토리얼)

vue.js를 사용하여 $refs 및 $emit 상위-하위 구성 요소 상호 작용을 구현하는 방법

Vue에서 확장과 구성 요소의 차이점은 무엇입니까?

위 내용은 vue.js 프로젝트에는 어떤 팁이 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!