vue项目入门——index.html和App.vue

作者：System 时间：2024年08月09日分类：所有,vue.js 字数：1084

这篇文章距离上次修改已过203天，其中的内容可能已经有所变动。

在Vue项目中，index.html通常是整个单页应用的入口HTML文件，而App.vue是项目的入口组件。

index.html 通常包含以下内容：




<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue App</title>
</head>
<body>
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>
</html>

App.vue 是一个Vue组件，定义了应用的根组件：




<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>
 
<script>
import HelloWorld from './components/HelloWorld.vue'
 
export default {
  name: 'app',
  components: {
    HelloWorld
  }
}
</script>
 
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

在这个例子中，index.html 定义了一个id为 app 的div作为Vue挂载点。App.vue 文件定义了根组件，并导入了一个子组件HelloWorld.vue，这个子组件是一个简单的世界 Hello World 消息。<style>标签内定义了一些基本的样式。

vue项目入门——index.html和App.vue

评论已关闭

推荐阅读