vue3

yarn install 하기

npm install --global yarn

yarn --version

yarn global add @vue/cli

yarn -v

 

 

CND 사용

 

1. [CDN Package]

<script src="https://unpkg.com/vue@3"></script>

 

 

npm 설치 방법

1.  [vue cli]

npm install vue@next

npm install -g vue-create

npm install -g @vue/cli

 

--- 설치 후 ---

<프로젝트 생성>

1) npm init vue

 

또는? 

 

vue create <project-name>

2) 터미널 열고 의존성 모듈 설치 npm install

 

 

vite 설치 방법

npm init vite-app <project-name>

 

 

eslint 설정

1) .eslintrc.cjs

/* eslint-env node */
require("@rushstack/eslint-patch/modern-module-resolution");

module.exports = {
  "root": true,
  "extends": [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "@vue/eslint-config-prettier"
  ],
  "env": {
    "vue/setup-compiler-macros": true
  }
}

 

 

 

2). setting.json

VSCode 에서 ESLint 기반으로 Format On Save 설정하기

 

ctrl+, => eslint => validate에서 setting.json 설정

// settings.json
{
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "typescript",
        "typescriptreact",
        "vue",
        "markdown"
    ],
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "editor.tabSize": 2,
}

 

3) 전체적용

npm run lint

 

json.config 파일 설정

디렉토리 루트 설정하기 등

{
  "compilerOptions": {
    "baseUrl": ".",
    "jsx": "preserve",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "exclude": ["node_modules", "dist"]
}

 

 

html 속성은 :(콜론) 사용 / html 내용 수정은 {{}} 중괄호 2개

 

 

[참고 블로그]

https://www.gymcoding.co/d871ce77473941058d578b2e41250570#7986628efb5e4cfa8215e9a1ffb6c975

https://nykim.work/74