vue3_cli_start

vue3 CLI

초기 세팅

node.js (v14.13.0), npm (v8.11.0)

vue CLI 기본 설치

초기 세팅

(설치 i, 삭제 r)

• npm

  • 설치 (1,2 버젼 'vue-cli'), (3 버젼 '@vue/cli')
    ~~npm i -g vue-cli~~
npm i -g @vue/cli
  • 업데이트
    npm update -g @vue/cli

• yarn

  • 설치
    npm install -g yarn
yarn add @vue/cli
  • 업데이트
    yarn global upgrade --latest @vue/cli

• vue, vue cli 설치
  npm install -g @vue/cli

  • 실행
    개발 : npm run dev
    배포 : npm run build

프로젝트 생성

• vue create [project이름]
  vue create project이름
  • 프로젝트 생성 옵션
    1) Manually select features > [Bable, Router, Vuex, Linter/formatter] > 3.x
    2) Use history mode for router? : 라우터 해시모드 사용 Y.
    3) ESLint + Standard config : 코딩규칙
    4) Lint on save : 코딩규칙 저장할때 체크
    5) In package.json : 파일에서 규칙 관리
    6) Save this as a preset for future projects? : 환경저장여부
    • 환경 삭제 : vue config 열어서 삭제
    • 환경 삭제 : "C:\Users\사용자이름.vuerc" 파일 열어서 삭제
      7) npm or yarn 으로 설치 변경
    • 바꾸기어설치 : vue create [project이름] --packageManager npm
    • 옵션에서 바꾸기 : "C:\Users\사용자이름.vuerc" 파일 열어서 삭제

      {
        "useTaobaoRegistry": false,
        "packageManager": "npm"
      }

• vite 로생성
  npm init vite-app 프로젝트이름 or npm init vite-app@vitejs/app 프로젝트이름
  • backend
    • sqlite3 : sql 데이터베이스 앤진
    • express : 서버
    • cors : 웹 서버에 존재하는 리소스에 대해서 다른 도메인이 접근하는 것을 막거나 허용함
      npm init
npm i sqlite3 express cors

      빌드

• 폴더 이동 빌드
  cd project이름
• 개발모드 : npm run serve or yarn run serve
• 배포 : npm run build or yarn run build

플러그인 추가 설치

scss 추가

• sass-loader v8.0.0 이후로 webpack 최소 요구 버전이 v4.36.0 이상
  npm i -D node-sass sass-loader
  or

• webpack v4.36.0 미만 ("sass-loader": "^7.3.1", "node-sass": "^4.14.1")
  npm install —-save-dev sass-loader@7.3.1 node-sass@4.14.1 or yarn add -D sass-loader@7.3.1 node-sass@4.14.1

• 라우터
  npm install vue-router@4

• 마크다운 에디터
  npm install vue3-markdown-it

• MD5 보안
  npm install js-md3

vscode setting

vue 코드 템플릿 (snippet)

1. 설정 > User Snippets > vue.json | User/사용자/AppData/Roaming/code/User/snippets/vue.json

   "vue components sample": {
    "prefix": "vue-start",
    "body": [
      "<template>\n\t<div>\n\t</div>\n</template>",
      "",
      "<script>",
      "export default {",
      "\tname: '${TM_FILENAME/(.*)\\..+$/$1/}$1',",
      "\tprops: {},",
      "\tdata() {\n\t\treturn {}\n\t},",
      "\tcomputed: { },",
      "\tmethods: { aaa:function(){ },",
      "\tcomponents: {},",
      "\tsetup: {},",
      "\tcreated: {},",
      "\tmounted: {},",
      "\tunmounted: {},",
      "\tmethods: {},",
      "}",
      "</script>",
      "",
      "<style lang='scss' scoped>\n</style>"
    ],
    "description": "Vue snippet with scss and scoped"
   },

학습 스텝

1. 라이프사이클
2. 디렉티브(클래스, 속성다루기)
   v-bind, v-model, v-if, v-show, v-for
3. event
4. props(데이터이동)
5. vuex(데이터공유)
6. CRUD : Create(생성), Read(읽기), Update(갱신), Delete(삭제)
7. 라우터(Router)