(Vue) 새로운 Vue 프로젝트를 생성할 때 공통적으로 사용하는 것들 모음 – Vue 프로젝트 루틴

by

빌드, 실행, 빌드 프로젝트

프로젝트 생성

$ vue create 프로젝트이름
  • 프로젝트 이름은 대문자를 포함할 수 없습니다.

프로젝트를 이끈다

$ npm run serve

프로젝트를 구축

$ npm run build

vue.config.js 설정

기본값(vue 3.2.13부터)

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

GitHub 페이지에 배포하기 위한 설정

  1. 빌드 파일 저장 경로를 docs로 변경하면 편리합니다.
    (기본 저장 경로는 dist입니다.)
  2. publicPath가 지정되지 않은 경우 Github 페이지에 배포할 때 빈 화면이 표시될 수 있습니다.
  3. assetsDir이 지정되지 않은 경우 이미지 파일이 제대로 표시되지 않을 수 있습니다.
  4. Github 사이트 설정에서 폴더를 docs로 변경
const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,
  outputDir: "./docs", //build 결과물을 docs라는 폴더에 저장
  publicPath: "./",
  assetsDir: "./",
});

글꼴 설정 지정

Github 링크

  1. 가변 동적 하위 집합 
    <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable-dynamic-subset.css" />
font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  1. 가변 동적 하위 집합 – JP 
    <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable-jp-dynamic-subset.css" />
    font-family: "Pretendard JP Variable", "Pretendard JP", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Hiragino Sans", "Apple SD Gothic Neo", Meiryo, "Noto Sans JP", "Noto Sans KR", "Malgun Gothic", Osaka, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;

훌륭한 글꼴 설정

CDN 주소 모음 링크

CSS 설정

body,html{
  height: 100%;
}
body {
margin : 0px;
}
#app {
  height: 100%;
}

'추천 관련글,