[vue.js] Vue cli - 설치 및 세팅

Vue 설치하기

$ npm install -g @vue/cli
(-g: 글로벌 인스톨)

---

$ sudo npm install -g @vue/cli
(위 방법이에러나거나 mac에서 인스톨 시 sudo명령어 사용)

Vue 프로젝트 생성하기

• 프로젝트 생성
  $ vue create projectFolder
  vue3, vue2, custom setting등 선택옵션이 나온다.

---

• 프로젝트 생성후 폴더안으로 들어가서 vscode를 실행
  $ code .

Vue 프로젝트 실행하기

Vscode 터미널에서

$ npm run serve : vue-cli 개발서버에서 실행(live server)
$ npm run build : vue코드를 실제 사용가능한 html, css, javascript로 변환
$ npm run lint :

serve 멈추고 싶을때: control + c

*폴더안에 수동으로 설치하는 과정(webpack 설치)

npm init -y : package.json파일 생성

npm install webpack webpack-cli --save-dev : webpack 모듈 설치
<webpack.config 파일을 생성해야한다.>
npx webpack : webpack으로 컴파일 실행(bundling)
npx webpack --watch : 파일에 변화가 있을때마다 번들링 실행

npm install babel-loader @babel/core @babel/preset-env --save-dev : babel 모듈 설치
<babel config 파일을 생성해야 한다.>

npm install style-loader css-loader --save-dev : css 모듈 설치

*** Vue 커스텀 프로젝트 생성하기

$ vue create {project-folder-name}

• 'Manually select features' 를 선택, 아래와 같이 옵션 선택
  • Babel + Router + Vuex + Linter/Formatter
  • vue 3.0 + Y + (ESLint+Standard config) + Lint on save
  • In package.json + N

---

$ code . 으로 vscode를 실행한다.

---

• Tailwind 설치 (터미널에서)
  $ npm install -D tailwindcss postcss autoprefixer
$ npx tailwindcss init -p

// tailwind.config.js
module.exports = {
content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

// index.css
@tailwind base;
@tailwind components;
@tailwind utilities;

// main.js
import './index.css' 추가

---

• ESLint와 Prettier 충돌 에러 수정

1. 루트 디렉토리에 `.prettierrc` 파일 생성 후 아래 코드 작성
// .prettierrc
{
  "semi": false,
  "bracketSpacing": true,
  "singleQuote": true,
  "useTabs": false,
  "trailingComma": "none",
  "printWidth": 80
}

2. 'package.json` 파일에 룰 추가
// package.json
"rules": {
      "space-before-function-paren": "off"
    }

3. css파일에 `@import` 에러 없애기
// vscode plugin
PostCSS Language Support 를 설치하면 더 이상 경고 문구가 보이지 않는다

위와 같은 방법으로 코딩포멧을 매치시켜줘야 에러가 발행하지 않는다!

---

* Vue Component Snippet 만들기

맨날 <template> <script> export default ... 타이핑하기 갱장히 귀찮다!!!

1. vscode 죄하단에: ⚙️ Setting -> Configure User Snippets
2. 커넽드창에 'vue'입력 -> vue.json파일 선택
3. 아래 코드를 복붙한다.

# template 태그 코드는 개취입니다.

"vue template snippets 🦊": {
  "prefix": "vue-temp 🦊",
  "body": [
    "<template>",
    "\t<div class='comp-wrap🦊'>",
    "\t\t<div>${TM_FILENAME_BASE}</div>",
    "\t</div>",
    "</template>",
    "",
    "<script>",
    "export default {",
    "\tname: '${TM_FILENAME/(.*)\\..+$/$1/}$1',",
    "\tcomponents: {},",
    "\tprops: {},",
    "\tdata() {\n\t\treturn {}\n\t},",
    "\tmethods: {},",
    "}",
    "</script>",
    "",
    "<style scoped></style>"
  ],
  "description": "Vue snippet with css and scoped"
}