[vue3] vue3 초기셋팅

● 설치방법

vue create 폴더명 

 

 

● 기본 사용 문법

 

<template>

    <div class="name">{{name}}</div>

    <div>Hi</div>

</template>

<script>

export default {

  setup () {

    const name = 'Kossie Coder1';

    return {

      name

    }

  }

}

</script>

<style>

.name {

  font-size: 20px;

  color: red;

}

</style>

 

● F1 - Open Setting(UI)

    "vetur.validation.template": false,

    "vetur.validation.script": false,

    "vetur.validation.style": false,

 

- 파일내 추가해야함.

 

 

● veture.config.js

 

// vetur.config.js
/** @type {import('vls').VeturConfig} */
module.exports = {
    // **optional** default: `{}`
    // override vscode settings
    // Notice: It only affects the settings used by Vetur.
    settings: {
      "vetur.useWorkspaceDependencies": true,
      "vetur.experimental.templateInterpolationService": true
    },
    // **optional** default: `[{ root: './' }]`
    // support monorepos
    projects: [
      './packages/repo2', // Shorthand for specifying only the project root location
      {
        // **required**
        // Where is your project?
        // It is relative to `vetur.config.js`.
        root: './packages/repo1',
        // **optional** default: `'package.json'`
        // Where is `package.json` in the project?
        // We use it to determine the version of vue.
        // It is relative to root property.
        package: './package.json',
        // **optional**
        // Where is TypeScript config file in the project?
        // It is relative to root property.
        tsconfig: './tsconfig.json',
        // **optional** default: `'./.vscode/vetur/snippets'`
        // Where is vetur custom snippets folders?
        snippetFolder: './.vscode/vetur/snippets',
        // **optional** default: `[]`
        // Register globally Vue component glob.
        // If you set it, you can get completion by that components.
        // It is relative to root property.
        // Notice: It won't actually do it. You need to use `require.context` or `Vue.component`
        globalComponents: [
          './src/components/**/*.vue'
        ]
      }
    ]
  }

 

vuture - vue2

volar - vue3