Initialize Project

requirement

• node 16+
• npm 7+
• vscode

vite + vue + ts

• vue 3.2+
• vite 2.7+

npm init vite@latest troubler -- --template vue-ts

volar

install vscode extension "Volar"

prettier

Official Prettier Guide

npm install --save-dev --save-exact prettier

echo {}> .prettierrc.json

// .prettierrc.json

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true
}

echo "" > .prettierignore

// .prettierignore

dist
node_modules

npx prettier --write .

echo "" > ./.vscode/settings.json

// .vscode/settings.json

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

eslint

ESLint for Vue 3.2 is not stable.

Don't apply it to the project until it stabilizes.

Official Vue ESLint Guide

npm install --save-dev eslint eslint-plugin-vue eslint-config-prettier

echo "" > .eslintrc.js

// .eslintrc.js

module.exports = {
  extends: [
    // add more generic rulesets here, such as:
    'eslint:recommended',
    'plugin:vue/vue3-recommended',
    'prettier',
    // 'plugin:vue/recommended' // Use this if you are using Vue.js 2.x.
  ],
  rules: {
    // override/add rules settings here, such as:
    // 'vue/no-unused-vars': 'error'
  },
}

// .vscode/settings.json
{
  ...
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue"
  ]
}

// .vscode/extensions.json
{
  "recommendations": [ ..., "dbaeumer.vscode-eslint"]
}

vue-router

npm install vue-router@4

// router.ts

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'

import Index from './pages/index.vue'
import MasteryBookShare from './pages/mastery-book-share.vue'

const routes: RouteRecordRaw[] = [
  { name: 'index', path: '/', component: Index },
  {
    name: 'masteryBookShare',
    path: '/mastery/book/share/:code?', // nullable param
    component: MasteryBookShare,
  },
]

const Router = createRouter({
  history: createWebHistory(),
  routes,
})

export default Router

// main.ts

import { createApp } from 'vue'
import App from './App.vue'
import Router from './router'

const app = createApp(App)
app.use(Router)
app.mount('#app')

tailwindcss

Tailwindcss Official Guide

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.ts

import { createApp } from 'vue'
import App from './App.vue'
import Router from './router'
import './index.css'

const app = createApp(App)
app.use(Router)
app.mount('#app')

// index.vue

<template>
    <h1 class="text-3xl font-bold underline">Troubler</h1>
    <p>Community Service for TROUBLESHOOTER</p>

    <router-link :to="{ name: 'masteryBookShare' }">특성판 공유</router-link>
</template>

//.vscode/extensions.json

{
  "recommendations": [..., "bradlc.vscode-tailwindcss"]
}