VueJS - 프로젝트를 구성하는 방법

우리가 신기술을 사용하기 시작했을 때, 우리는 우리가 구축해야 할 프로젝트에 가장 적합한 몇 가지 다른 샘플을 테스트하는 경향이 있었다.이 기술에 전문가일수록 기본 설정에 자신의 터치 컨트롤을 추가할 수 있다는 사실이 증명되었다.
저와 VueJS의 이야기에서 다르지 않습니다.내가 이 JS 프레임워크를 사용한 지 이미 3년이 넘었는데, 지금은 내가 설정한 사전 설정이 있어서, 내가 시작한 모든 새로운 VueJS 프로젝트에서 그것을 사용할 것이다.
이 문서는 VueJS 프로젝트를 구축하는 유일한 방법이나 최선의 방법이라는 것을 알려주지 않았다는 것을 기억하십시오.그러나 이것은 내가 한동안 일한 방식이다. 이것이 바로 내가 왜 당신들과 그것을 나눠야 하는가이다.
TL;박사 01 명
이 문서에서 현재 VueJS 2를 구성하고 구성하는 방법을 보여 드리겠습니다.x (나는 아직 이런 설정으로 VueJS 3 프로젝트를 구축해 본 적이 없기 때문에 만약 당신이 시도하고 싶다면 결과로 평론을 하세요) 항목은 일반적으로 다음과 같다.

VueJS v2

Vue Router

Vuex

Bootstrap Vue

Axios

Lodash

Jest

Vue Testing Library

ESLint

Prettier

Babel

Font Awesome

각 구성에 대해 심도 있는 논의는 하지 않겠지만 빠른 개요를 제공합니다.내 GitHub에서 완전히 사용할 수 있는 템플릿 파일을 찾을 수 있습니다.본문 말미에 연결되다.

비계 홈 폴더 구조

보통 우리가 처음부터 프로젝트를 세울 때 우리는 매우 흥분한다.이것은 우리가 프로젝트 운행에 필요한 모든 주요 구조를 정의할 수 있다는 것을 의미한다.
그러나 모든 폴더와 파일을 만드는 것은 골치 아픈 일이다. (죄송합니다. 사실입니다.)
'고통'을 피하기 위해 Vue CLI을 이용했습니다. 이것은 저를 위해'힘든 일'을 하는 명령행 도구입니다.터미널에서 다음 명령을 실행합니다install it using NPM.

vue create vuejs2-boilerplate

여기에 많은 양의 인쇄가 발생하지 않도록 create 명령의 각 단계에서 선택한 정확한 옵션을 알려 드리겠습니다.
1. 항목 점검에 필요한 기능
마지막 옵션Manually select features을 선택하고 다음 옵션을 확인합니다.

⦿ Babel
⦿ Progressive Web App (PWA) Support
⦿ Router
⦿ Vuex
⦿ Css Pre-processors
⦿ Linter/Formatter
⦿ Unit Testing

2. Vue 버전 중 하나를 선택합니다.JS

⦿ 2.x

3. 라우터는 히스토리 모드를 사용합니까?

Y (Yes)

4. CSS 사전 프로세서 선택

⦿ Sass/SCSS (with node-sass)

5. linter/formatter 설정 선택

⦿ ESLint + Prettier

6. 다른 면 벨벳 특징 선택

⦿ Lint on save

7. 단원 테스트 솔루션 선택

⦿ Jest

8. 당신은 Babel, ESLint 등의 배치를 어디에 두는 것을 더 좋아합니까?

⦿ In dedicated config files

*9. 향후 프로젝트의 사전 설정으로 저장할지 여부*

y (Yes)

10. 당신의 새로운 설정에 이름을 입력하세요. (그럼'잘생긴 파블로'는요?!😎)
설치 툴을 기다립니다.

추가 종속성 설치

기본 의존항을 설치한 후에, 템플릿 파일이 인코딩을 시작하는 데 필요한 모든 내용을 포함할 수 있도록 몇 개의 패키지를 설치합니다.그래서 나는 터미널에서 이 두 명령을 실행한다.

yarn add bootstrap-vue axios lodash vue-content-placeholders indexof component-inherit @fortawesome/fontawesome-free

yarn add -D eslint-plugin-vue-a11y eslint-plugin-jest 

프로파일 추가

프로젝트에 필요한 모든 설정에 대해 나는 단독 파일을 원한다.다음은 템플릿 파일에 일반적으로 추가되는 파일입니다.jsconfig.json이 파일은 VScode가 경로 앨리어스를 정확하게 식별하고 자동 완성 기능을 향상시키는 데 도움을 줍니다.

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "exclude": [
    "node_modules"
  ]
}

.eslintrc.js이 파일은 Linter base 설정을 로드하고 특정 규칙을 사용자 정의할 수 있는 공간을 제공합니다.나는 여기에 몇 가지 주요 규칙을 보충했다.

Vue A11y 무장애 규칙;

위젯 이름은 파스칼로 대소문자로 써야 합니다.

사용하지 않은 변수를 사용할 수 없음;

분류기 제거;

더블 따옴표 대신 싱글 따옴표를 사용한다.

뒤따르는 쉼표 삭제하기;

속성 하이픈이 필요 없음;

축소 코드;

module.exports = {
  env: {
    node: true,
    jest: true,
  },
  globals: {
    expect: 'writable',
    assert: 'writable'
  },
  plugins: ['vue', 'prettier', 'jest', 'vue-a11y'],
  extends: [
    'plugin:vue/recommended',
    'eslint:recommended',
    'prettier/vue',
    'plugin:prettier/recommended',
    'plugin:vue-a11y/recommended',
    'plugin:vue/essential',
    '@vue/prettier',
  ],
  rules: {
    'vue/component-name-in-template-casing': ['error', 'PascalCase'],
    'vue/attribute-hyphenation': 'off',
    'no-console': 'warn',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-unused-vars': [
      'error',
      { vars: 'all', args: 'after-used', ignoreRestSiblings: true },
    ],
    'prettier/prettier': [
      'error',
      {
        semi: false,
        singleQuote: true,
        trailingComma: 'none'
      },
    ],
    'no-var': 2,
  },
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: 'babel-eslint',
  },
}

코드 작업공간 파일(VScode를 사용하지 않으면 건너뛰기)

Microsoft VScode를 사용한 지 오래되었습니다.
그것은 속도가 빠르고 사용하기 쉬우며, 매일 나를 도울 수 있는 몇 가지 유용한 확장이 있다.
모든 의존 항목을 설치한 후에, 나는 하나를 만들었다.내 프로젝트의 루트 디렉터리에서 유용한 설정으로 작업공간 파일을 작성합니다.

{
  "folders": [{
    "path": "."
  }],
  "settings": {
    "editor.formatOnSave": false,
    "editor.tabSize": 2,
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    },
    "typescript.format.enable": false,
    "javascript.format.insertSpaceAfterCommaDelimiter": false,
    "javascript.format.semicolons": "remove",
    "eslint.alwaysShowStatus": true,
    "eslint.options": {
      "extensions": [
        ".html",
        ".js",
        ".vue",
        ".jsx"
      ]
    },
    "eslint.validate": [
      "vue",
      "html",
      "hollowtree.vue-snippets",
      "javascript",
      "javascriptreact",
      "vue-html"
    ],
    "vetur.validation.script": false,
    "vetur.validation.template": false,
    "cSpell.enabled": true,
    "cSpell.enableFiletypes": [
      "vue"
    ]
  },
  "extensions": {
    "recommendations": [
      "jcbuisson.vue",
      "hollowtree.vue-snippets",
      "dariofuzinato.vue-peek",
      "octref.vetur",
      "dbaeumer.vscode-eslint",
      "streetsidesoftware.code-spell-checker"
    ]
  }
}

이 파일에는 VueJS 프로젝트와 함께 사용할 확장 제안도 포함되어 있습니다.
만들면 편집기의 오른쪽 아래 모서리에 작업공간 열기라는 버튼이 표시됩니다.작업공간 파일에서 항목을 열려면 해당 항목을 폴더에서 직접 열지 않고 항상 파일 > 작업공간을 사용하여 엽니다.이것은 모든 설정이 불러와서 개발 환경에 정확하게 적용되었는지 확인할 수 있습니다.
권장되는 확장 팝업 창이 나타나면 모든 확장 설치 를 선택합니다.

참고 사항:다음과 같은 다른 팝업 창이 나타나면 전체 프로젝트에서 로컬로 설치된 Prettier 모듈을 올바르게 사용할 수 있도록 허용 옵션을 선택합니다.

폴더 구조

모든 도구와 플러그인에 기본 프로필을 설정한 후에, 나는 파일을 더욱 잘 구성하기 위해 새 폴더를 만들었다.
일부 템플릿 파일과 달리, 나는 코드에 따라 구성하지 않기로 선택했다. 왜냐하면 보통 모든 필드는 몇 개의 공유 특성을 가지고 있기 때문이다. 이외에, 나는 이것이 처리 코드를 좀 간단하게 만들었다고 생각한다.
기본적으로 이 폴더는 내 항목src 디렉토리에 있는 폴더입니다.

assets - 이미지 등 모든 정적 자원을 포함한다.

components - 응용 프로그램에 사용되는 모든 구성 요소를 포함합니다.아래의 글에서, 나는 모든 구성 요소에 폴더를 만들고, 단원 테스트 파일을 그 안에 두었다는 것을 주의하십시오.내가 보기에 이렇게 하면 구성 요소 파일을 각자의 테스트와 연결시키는 것이 더욱 쉽다.

constants - 전체 응용 프로그램에서 사용되는 상수 값을 저장하는 .js 개의 파일을 포함합니다.여기서 나는 프로젝트 범위에 따라 파일의 값을 그룹으로 나누는 '영역 구동' 방법을 선택한다.

reducers - 모든 .js 파일을 포함하고 전체 응용 프로그램에서 데이터를 계산하는 데 사용되는 모든 함수를 포함한다.이 이름은 그다지 좋지 않을 수도 있지만, 나에게는 매우 유용하다.내가 그것을 보았을 때, 나는 그것이 시스템에서 내보낸 상태를 계산하는 데 사용되는 모든 함수를 포함하고 있다는 것을 알았다.여기서, 나는 또한 '모든 영역' 을 사용하여 파일을 구분한다
방법

router - 라우팅 구성 포함;

theme - 스타일을 덮어쓰는 데 사용되는 모든 사용자 정의.scss 파일을 포함합니다.

store - 애플리케이션의 전체 상태를 관리하는 데 사용되는 모든 Vuex 파일을 포함합니다.

utils - DOM, 값 무결성 확인, 데이터 서식 적용 등을 수행할 수 있는 전역 함수를 포함하는 혼합.js 파일입니다.

validators - 나는 보통 자신의 검증 메커니즘을 세운다. 내가 이렇게 할 때 나는 모든 검증 파일을 이 폴더에 놓을 것이다(나는 머지않아 이 메커니즘에 관한 글을 쓸 것이다).

기본적으로 이것은 나의 src가 새로운 폴더를 만든 후의 모습이다. 위에서 말한 바와 같다.

이것이 바로 내 프로젝트 루트 디렉터리가 변경된 후의 모습입니다.

결론

처음부터 프로젝트를 구축할 때, 우리는 높은 생산성과 유지보수성을 목표로 프로젝트를 구축할 기회가 있다.견본은 우리가 힘든 일을 완성하는 것을 돕는 강력한 자원이다.
이 문서에서 최신 VueJS 2를 공유합니다.x 샘플은 몇 가지 도구, 플러그인과 설정을 포함하여 개발을 더욱 쉽고 빠르게 합니다.
니가 좋아했으면 좋겠어.댓글과 공유하세요!
너는 this link에서 위에서 언급한 모든 내용을 실현한 완전한 업무 예시를 찾을 수 있다.
표지 사진 작성자Jessica Lewis