当前位置：首页 > article >正文

WebStorm设置Vue Component模板

article 2025/2/9 7:21:11

下载vue.js插件

下面有模板样例

Composition API：这是 Vue 3 的一项新特性，允许通过 setup 函数来组织组件逻辑。
Options API：这是 Vue 2 和 Vue 3 都支持的传统方式，通过定义组件的 data、methods、computed 等来组织逻辑。

Composition API模板(Vue3)

<template>
  <div>
    <h1>{
  
  { message }}</h1>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  name: 'OptionsComponent',
  data() {
    return {
      message: 'Hello, Vue!',
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
      this.message = `Clicked ${this.count} times`;
    }
  }
};
</script>

<style scoped>//scoped仅在当前页面生效
h1 {
  color: blue;
}

button {
  padding: 10px;
  background-color: lightblue;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: lightgreen;
}
</style>

Options API模板(Vue2和Vue3都适用)

<template>
<div>
<h1>{ { message }}</h1>
<button @click="increment">Increment</button>
</div>
</template>

<script>
export default {
name: 'OptionsComponent',
data() {
return {
message: 'Hello, Vue!',
count: 0
};
},
methods: {
increment() {
this.count++;
this.message = `Clicked ${this.count} times`;
}
}
};
</script>

<style scoped>
h1 {
color: blue;
}

button {
padding: 10px;
background-color: lightblue;
border: none;
cursor: pointer;
}

button:hover {
background-color: lightgreen;
}
</style>