admin管理员组

文章数量:1532362

从头建立一个vue项目请参考上一篇>>>>上一篇戳这里<<<<

这篇文章是基于建立好了一个vue项目之上的开发。

第一步，打开 VS Code，然后打开您的 Vue 项目文件夹。可以在 VS Code 的菜单栏中选择 "File" -> "Open Folder" 来选择并打开项目文件夹。

vs的中文安装教程下一篇出，也可以参考别的博主的文章~

成功打开了项目文件夹，不过看着目录这么复杂还真是眼花缭乱呢，不过不要太担心，我们主要的开发过程在【src】文件夹里。

第二步：在左侧的资源管理器中，展开 Vue 项目文件夹，并找到 `src` 文件夹。

第三步，在 `src` 文件夹下创建一个新文件，命名为 `index.html`。可以右键点击 `src` 文件夹，在右键菜单中选择 "New File"，然后输入文件名为 `index.html`。

第四步，在 `index.html` 文件中输入以下内容：

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello Vue</title>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>
  
  <script src="../dist/js/chunk-vendors.js"></script>
  <script src="../dist/js/app.js"></script>
</body>
</html>
以上代码创建了一个包含一个 `id` 为 `app` 的 div 元素，并在其中使用双括号插值语法 `{{ message }}`。这将提供一个简单的模板，以在 Vue 应用程序中显示一条消息。

第五步：打开`App.vue` 文件，替换为下面的代码

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

<script>
export default {
  data() {
    return {
      message: this.$root.message,
    };
  },
};
</script>
确保在您的项目中已经定义了 `App.vue` 组件。如果还没有，请在 `src` 目录下创建一个名为 `App.vue` 的文件，并添加组件的相应代码。

第六步：在 `src` 文件夹下找到 `main.js` 文件，这是 Vue 应用程序的入口文件。打开 `main.js` 文件，并在文件的顶部添加以下代码来定义 Vue 实例：

import { createApp } from 'vue';
import App from './App.vue';

createApp({
  render() {
    return <App />;
  },
  data() {
    return {
      message: 'Hello',
    }
  },
}).mount('#app');

我们首先使用 `createApp` 创建了一个 Vue 应用实例 `app`。然后，使用 `app.config.globalProperties` 将 `message` 属性设置为全局变量，并将其值设置为 'Hello'。
接着，我们将 `app` 实例挂载到 `#app` 元素上。
在您的 Vue 组件中，您可以使用 `$message` 变量来访问全局的 'Hello' 值

第七步：在终端中运行以下命令来启动开发服务器：

npm run serve

 

结果如下

复制到浏览器看看

我们成功写出了hello文本~！真是太厉害了~

本文标签： 简单网页chatGPTHelloWorld

版权声明：本文标题：跟随chatgpt学前端之写一个简单的helloworld网页 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dianzi/1726839197a1086590.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。