下面我将为你详细讲解“Sublime Text新建.vue模板并高亮(图文教程)”的攻略：

Sublime Text新建.vue模板并高亮(图文教程)

1. 下载Vue Syntax Highlight插件

首先，在Sublime Text中安装Vue Syntax Highlight插件。可以选择在菜单栏中选择“Preferences” -> “Package Control” -> “Install Package” 再输入 “Vue Syntax Highlight”来进行安装，或者直接在控制台输入以下命令：

Package Control: Install Package

2. 新建.vue模板文件

接下来，在Sublime Text中新建.vue模板文件。点击菜单栏中的“File” -> “New File”，然后可以根据自己的需要添加一些初始化代码。最后命名文件为"Demo.vue"。

3. 设置.vue文件语法高亮

将光标移动到新建的.vue文件中，在Sublime Text中打开控制台，依次输入以下命令：

view.run_command('set_syntax_file', {'syntax': 'Packages/Vue Syntax Highlight/Vue.sublime-syntax'})

这将在当前.vue文件中设置语法高亮。

示例说明1

比如我们在.vue模板文件中添加以下代码：

<template>
  <div>
    <h1>Hello World!</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    }
  }
}
</script>

<style>
h1 {
  color: red;
}
</style>

这时我们可以看到，新建的.vue模板文件语法高亮成功，高亮显示出template、script、style三个区域。

示例说明2

再如我们在.vue模板文件中添加以下代码：

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
    data() {
        return {
            message: 'Hello, Vue!'
        }
    },
    mounted() {
        console.log('mounted')
    },
    methods: {
        sayHello() {
            console.log('Hello')
        }
    }
}
</script>

<style>
h1 {
  color: red;
}
</style>

这时我们可以看到，在vue模板文件中，以双括号{{}}包裹的内容可以得到正确的高亮，方便我们进行代码调试。

以上就是“Sublime Text新建.vue模板并高亮(图文教程)”的完整攻略。希望对您有所帮助！