Vue 프론트엔드 아키텍처 학습(2)
이번 글에서는 이전 글인 Vue 프론트엔드 아키텍처 학습(1)에 이어 eslint, babel, postcss 구성을 완성해보겠습니다. 모두에게 도움이 되기를 바랍니다.
1. eslint 구성
eslint --init
을 사용하여 eslintrc.js를 만듭니다. eslint --init
的方式来创建eslintrc.js。
对了,前提我们需要全局安装eslint:npm i -g eslint
。
安装完全局eslint以后,我们在项目根目录使用eslint --init
,我选择自定义的方式来规定eslint规则:
➜ vue-construct git:(master) ✗ eslint --init ? How would you like to configure ESLint? Answer questions about your style ? Are you using ECMAScript 6 features? Yes ? Are you using ES6 modules? Yes ? Where will your code run? Browser, Node ? Do you use CommonJS? Yes ? Do you use JSX? No ? What style of indentation do you use? Spaces ? What quotes do you use for strings? Single ? What line endings do you use? Unix ? Do you require semicolons? No ? What format do you want your config file to be in? (Use arrow keys) ❯ JavaScript
当然,你可以按照自己喜欢,选择自己想要的方式,比如How would you like to configure ESLint? 这个问题的时候,可以选择popular的规则,有Google、standard等规则,选择你想要的就好。
我po下我的配置吧:
// 创建这个文件的话,本王推荐用eslint --init创建 module.exports = { "env": { "browser": true, "node": true }, // https://stackoverflow.com/questions/38296761/how-to-support-es7-in-eslint // 为了让eslint支持es7或更高的语法 "parser": 'babel-eslint', "extends": "eslint:recommended", "parserOptions": { "sourceType": "module" }, "plugins": [ // https://github.com/BenoitZugmeyer/eslint-plugin-html // 支持 *.vue lint "html" ], // https://eslint.org/docs/rules/ "rules": { "indent": [ "error", 2 ], "linebreak-style": [ "error", "unix" ], "quotes": [ "error", "single" ], "semi": [ "error", "never" ], // https://eslint.org/docs/user-guide/configuring#using-configuration-files // "off" or 0 - turn the rule off // "warn" or 1 - turn the rule on as a warning (doesn’t affect exit code) // "error" or 2 - turn the rule on as an error (exit code is 1 when triggered) 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0, 'no-console': 0, } };
二、配置babel
创建.babelrc
文件,直接上配置:
{ "presets": [ [ "env", { "targets": { "browsers": [ "> 1%", "last 2 versions", "ie >= 10" ] }, "modules": false, "useBuiltIns": true } ] ], "plugins": [ "transform-object-rest-spread", "syntax-dynamic-import" ] }
配合webpack配置:
{ test: /\.js$/, include: [resolve('app')], use: [ 'babel-loader', 'eslint-loader' ] },
我们使用的是babel-preset-env,我们知道,babel只是转译了高级语法,比如lambda,class,async等,并不会支持高级的api,所以需要babel-polyfill的帮忙。方便的是,我们只需要"useBuiltIns": true
,然后npm安装babel-polyfill,再在webpack配置中的entry带上babel-polyfill就好了。
babel-preset-env的优点:
通过
targets
来决定支持到那个哪些版本的语法就够了,不会过渡转译,可控性强通过
useBuiltIns
来支持babel-polyfill的按需加载,而不是一口气把整个包打入,因为其实我们只用到了很小一部分
transform-object-rest-spread是为了支持const a = {name: kitty, age: 7}; const b = { ...a }
这种es7语法。
syntax-dynamic-import是为了支持const Home = () => import('../views/home')
这种语法,达到按需分割、加载的目的。
三、配置postcss
创建postcss.config.js
그런데, eslint를 전역적으로 설치해야 합니다: npm i -g eslint
.
eslint --init
를 사용합니다. eslint 규칙을 지정하는 사용자 정의 방법을 선택합니다. module.exports = {
plugins: [
require('autoprefixer')
],
// 配置autoprefix
browsers: [
"> 1%",
"last 2 versions",
"ie >= 10"
]
}
로그인 후 복사
물론 원하는 것을 선택할 수 있습니다. 예를 들어, ESLint를 어떻게 구성하시겠습니까? 이 질문을 받으면 Google, 표준 및 기타 규칙과 같은 널리 사용되는 규칙을 선택할 수 있습니다. 내 구성을 게시하겠습니다: module.exports = { plugins: [ require('autoprefixer') ], // 配置autoprefix browsers: [ "> 1%", "last 2 versions", "ie >= 10" ] }
rrreee
2. babel 구성
.babelrc
파일을 생성하고 직접 구성합니다: rrreeewebpack으로 구성:
우리는 babel -preset을 사용하고 있습니다. -env, babel은 람다, 클래스, async 등과 같은 상위 수준 구문만 변환하고 고급 API를 지원하지 않는다는 것을 알고 있으므로 babel-polyfill의 도움이 필요합니다. 편리한 점은 "useBuiltIns": true
만 하면 되고 npm에서 babel-polyfill을 설치한 다음 webpack 구성 항목에 babel-polyfill을 추가하면 된다는 것입니다.
- 🎜
targets
를 통해 지원되는 구문 버전을 결정하는 것으로 충분합니다. 전환적으로 번역되고 강력한 제어 가능성이 있습니다🎜 - 🎜한 번에 전체 패키지를 입력하는 대신
useBuiltIns
를 사용하여 babel-polyfill의 주문형 로드를 지원합니다. 🎜
const a = {name: kitty, age: 7}; const b = { ...a를 지원하는 데 사용됩니다. }
이것은 es7 구문입니다. 🎜🎜syntax-dynamic-import는 요청 시 분할 및 로드 목적을 달성하기 위해 const Home = () => import('../views/home')
구문을 지원합니다. 🎜🎜3. postcss 구성🎜🎜postcss.config.js
파일을 생성하고 구성합니다: 🎜rrreee🎜Summary🎜🎜이 글은 별로 많지 않습니다. eslint, babel, postcss 세 가지만 하면 됩니다. . 🎜🎜관련 권장 사항: 🎜🎜🎜🎜Vue 프런트 엔드 아키텍처 학습(1)🎜🎜🎜🎜🎜위 내용은 Vue 프론트엔드 아키텍처 학습(2)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











SpringDataJPA는 JPA 아키텍처를 기반으로 하며 매핑, ORM 및 트랜잭션 관리를 통해 데이터베이스와 상호 작용합니다. 해당 리포지토리는 CRUD 작업을 제공하고 파생 쿼리는 데이터베이스 액세스를 단순화합니다. 또한 지연 로딩을 사용하여 필요한 경우에만 데이터를 검색하므로 성능이 향상됩니다.

논문 주소: https://arxiv.org/abs/2307.09283 코드 주소: https://github.com/THU-MIG/RepViTRepViT는 모바일 ViT 아키텍처에서 잘 작동하며 상당한 이점을 보여줍니다. 다음으로, 본 연구의 기여를 살펴보겠습니다. 기사에서는 경량 ViT가 일반적으로 시각적 작업에서 경량 CNN보다 더 나은 성능을 발휘한다고 언급했는데, 그 이유는 주로 모델이 전역 표현을 학습할 수 있는 MSHA(Multi-Head Self-Attention 모듈) 때문입니다. 그러나 경량 ViT와 경량 CNN 간의 아키텍처 차이점은 완전히 연구되지 않았습니다. 본 연구에서 저자는 경량 ViT를 효과적인

PHP와 Vue: 프론트엔드 개발 도구의 완벽한 조합 오늘날 인터넷이 빠르게 발전하는 시대에 프론트엔드 개발은 점점 더 중요해지고 있습니다. 사용자가 웹 사이트 및 애플리케이션 경험에 대한 요구 사항이 점점 더 높아짐에 따라 프런트 엔드 개발자는 보다 효율적이고 유연한 도구를 사용하여 반응형 및 대화형 인터페이스를 만들어야 합니다. 프론트엔드 개발 분야의 두 가지 중요한 기술인 PHP와 Vue.js는 함께 사용하면 완벽한 도구라고 볼 수 있습니다. 이 기사에서는 독자가 이 두 가지를 더 잘 이해하고 적용할 수 있도록 PHP와 Vue의 조합과 자세한 코드 예제를 살펴보겠습니다.

프론트엔드 개발 인터뷰에서 일반적인 질문은 HTML/CSS 기초, JavaScript 기초, 프레임워크 및 라이브러리, 프로젝트 경험, 알고리즘 및 데이터 구조, 성능 최적화, 크로스 도메인 요청, 프론트엔드 엔지니어링, 디자인 패턴, 새로운 기술 및 트렌드. 면접관 질문은 후보자의 기술적 능력, 프로젝트 경험, 업계 동향에 대한 이해를 평가하기 위해 고안되었습니다. 따라서 지원자는 자신의 능력과 전문성을 입증할 수 있도록 해당 분야에 대한 충분한 준비를 갖추어야 합니다.

Go 프레임워크 아키텍처의 학습 곡선은 Go 언어 및 백엔드 개발에 대한 친숙도와 선택한 프레임워크의 복잡성, 즉 Go 언어의 기본 사항에 대한 올바른 이해에 따라 달라집니다. 백엔드 개발 경험이 있으면 도움이 됩니다. 다양한 복잡성의 프레임워크는 다양한 학습 곡선으로 이어집니다.

Word에서 텍스트 내용을 편집할 때 수식 기호를 입력해야 하는 경우가 있습니다. 어떤 사람들은 Word에서 근수를 입력하는 방법을 모르기 때문에 편집자에게 Word에서 근수를 입력하는 방법에 대한 튜토리얼을 친구들과 공유해달라고 요청했습니다. 그것이 내 친구들에게 도움이 되기를 바랍니다. 먼저 컴퓨터에서 Word 소프트웨어를 연 다음 편집하려는 파일을 열고 루트 기호를 삽입해야 하는 위치로 커서를 이동합니다. 아래 그림 예를 참조하세요. 2. [삽입]을 선택한 후, 기호에서 [수식]을 선택하세요. 아래 그림의 빨간색 원과 같이 3. 아래의 [새 수식 삽입]을 선택하세요. 아래 그림의 빨간색 원과 같이 4. [부수]를 선택한 후 해당 부수를 선택합니다. 아래 그림의 빨간색 원에 표시된 대로:

1. Llama3의 아키텍처 이 기사 시리즈에서는 llama3을 처음부터 구현합니다. Llama3의 전체 아키텍처: Llama3의 모델 매개변수 그림: Llama3 모델에서 이러한 매개변수의 실제 값을 살펴보겠습니다. 그림 [1] 컨텍스트 윈도우(context-window) LlaMa 클래스를 인스턴스화할 때 max_seq_len 변수는 context-window를 정의한다. 클래스에는 다른 매개변수도 있지만 이 매개변수는 변환기 모델과 가장 직접적으로 관련됩니다. 여기서 max_seq_len은 8K입니다. 그림 [2] 어휘의 크기와 주의력L

위 작성 및 저자 개인 이해: 최근 딥러닝 기술의 발전과 획기적인 발전으로 대규모 기반 모델(Foundation Models)이 자연어 처리 및 컴퓨터 비전 분야에서 상당한 성과를 거두었습니다. 자율주행에 기본 모델을 적용하는 것도 시나리오에 대한 이해와 추론을 향상시킬 수 있는 큰 발전 전망을 가지고 있습니다. 풍부한 언어와 시각적 데이터에 대한 사전 학습을 통해 기본 모델은 자율주행 시나리오의 다양한 요소를 이해하고 해석하고 추론을 수행할 수 있으며, 의사 결정 및 계획을 추진하기 위한 언어 및 동작 명령을 제공합니다. 기본 모델은 일상적인 운전 및 데이터 수집 중에 발생할 가능성이 없는 롱테일 분포에서 드물게 실행 가능한 기능을 제공하기 위해 운전 시나리오에 대한 이해를 통해 데이터를 보강할 수 있습니다.
