在
Vue 的官方文档中，我们可以看到一个页面
文件的示例代码：
```
html
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.
vuejs.org" target="_blank" rel="noopener">
vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/
vuejs/
vue-cli/tree/dev/packages/%40
vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/
vuejs/
vue-cli/tree/dev/packages/%40
vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://
vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.
vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.
vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/
vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.
vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.
vuejs.org" target="_blank" rel="noopener">
vue-router</a></li>
<li><a href="https://
vuex.
vuejs.org" target="_blank" rel="noopener">
vuex</a></li>
<li><a href="https://github.com/
vuejs/
vue-devtools#
vue-devtools" target="_blank" rel="noopener">
vue-devtools</a></li>
<li><a href="https://
vue-loader.
vuejs.org" target="_blank" rel="noopener">
vue-loader</a></li>
<li><a href="https://github.com/
vuejs/awesome-
vue" target="_blank" rel="noopener">awesome-
vue</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
msg: 'Welcome to Your
Vue.js App'
};
}
};
</script>
<style scoped>
h1,
h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
```
这个示例代码的
文件名是 `HelloWorld.
html`，但是它实际上是一个
Vue 组件。在
Vue 项目中，页面
文件的
后缀名通常是 `.
vue`，但是也可以使用其他
后缀名，例如 `.
html`。
Vue 项目使用的是
Vue CLI
工具，它会默认将 `.
html`
文件作为
Vue 组件来处理。当你在浏览器中打开这个
文件时，
Vue 会将其解析成一个
JavaScript 对象，并进行渲染。与 `.
vue`
文件类似，`.
html`
文件也包含了模板、
JavaScript 代码和样式。
因此，
Vue 的页面
文件后缀名并不一定要是 `.
vue`，也可以是其他
后缀名。
Vue CLI
工具会根据配置自动
识别文件类型，并进行处理。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
178
