Giter Club home page Giter Club logo

vue-version-template's Introduction

vue-version-template

각각의 템플릿 모두 composition api 를 사용할것이고 각 형태가 어떻게 다른지 확인할겸 만들어봄.

vue 2 + composition api

그룹에서 벗어날수있다는것과 this 지옥에서 벗어날수있다는것이 가장 큰 장점인걸로 보인다.
다만 vuex 사용하는데 계속 버그가 있어서 이부분은 차후 확인이 필요.

설정해야할부분이 아래와 같다.

  1. 의존 추가
npm i @vue/composition-api 
npm i -D @vue/runtime-dom eslint-plugin-vue unplugin-vue2-script-setup vue-eslint-parser vue-tsc vue-template-compiler
  1. vue, vue-template-compiler 버전 ~2.6.0 으로 변경

  2. vue-config.js 파일 추가

// eslint-disable-next-line @typescript-eslint/no-var-requires
const ScriptSetup = require("unplugin-vue2-script-setup/webpack").default;

module.exports = {
  parallel: false,
  configureWebpack: {
    plugins: [
      ScriptSetup({
        /* options */
      }),
    ],
  },
  chainWebpack(config) {
    // disable type check and let `vue-tsc` handles it
    config.plugins.delete("fork-ts-checker");
  },
};
  1. tsconfig 내에 아래 값들 추가 targetVolar 가 기본적으로 vue3 로 인식하기때문에 수정해줘야한다.
"types": [
      "webpack-env",
      "unplugin-vue2-script-setup/types"
    ],
"vueCompilerOptions": {
    "target": 2,
    "experimentalCompatMode": 2
  },
  1. eslintrc.js 에 아래 내용 추가
  parser: "vue-eslint-parser",
    parserOptions: {
      ecmaVersion: 2022,
      sourceType: "module"
    },
  1. main.ts 에 아래 내용 추가
Vue.use(vueCompositionApi);
  1. vue, vetur 삭제하고 volar 설치

vue 3 + composition api + vite

vite 때문에 쓰는건데 다만 아쉬운점은 vuetify 가 여전히 베타버전이라는 점이다.
그외에는 위와 같이 설정해야할부분이 없다.

vue-version-template's People

Contributors

joonseolee avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.