vuejs 기본강좌 1 > 기타강좌

• 목록

https://vuejs.org/

https://cli.vuejs.org/

===============================================================

1. 설치하기
    node.js 설치
    VSCode 설치
        플러그인 설치
            Vue 3 Pack / hollowtree
            Mithril Emmet
            html css support

        터미널창 에러시.
            1. ctrl+, (셋팅창)에서 default profile 검색후 : 윈도우의 터미널창을 command prompt 로 바꿔서 터미널 창을 실행한다.
            2. Power Shell 관리자 권한 실행
                > Get-ExecutionPolicy
                Restricted

                > Set-ExecutionPolicy RemoteSigned
                y

                > Get-ExecutionPolicy
                RemoteSigned

                변경

2. vue cli 설치
> npm install @vue/cli

3. vue 프로젝트 만들기
=> vue create 폴더명
> vue create test

> cd test

> npm run serve

4. 플러그인 추가 설치

> npm install vue-router@3 --save

5. bootstrap-vue.org 설치

> npm install vue bootstrap bootstrap-vue

6. Component name "Menu" should always be multi-word vue/multi-word-component-names
위의 같은 에러 나왔을때 조치

vue.config.js 파일에
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,  
})

lintOnSave : false <-- 를 추가해준다.

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave : false
})

이 에러는 Eslint와 같이 사용할 때 발생하는 에러인데, vue에서 component명을 만들 때 반드시 단어의 조합(CmmMenu)으로 지어야 한다는 의미이다.
이는 html 태그와 헷갈리지 않게 하려고 그렇게 설정해놨다고 한다.
위의 에러를 무시하기 위해서
lintOnSave : false 를 추가함

7. vue2 에서 vue-router 설치하기

> npm install vue-router@3

vue2 에서는 vue-router 3 버전대만 지원함

8. setting.json 설정 추가

보기 > 명령팔레트 (ctrl+shift+p) > 기본설정 (Open User Setting)

설정검색 > eslint > Working Directories > setting.json 으로 편집

    "eslint.workingDirectories": [
        {"mode": "auto"}
    ]

추가