vue3框架搭建

作者：﹏〃对不起╮他是为你哭了发布日期:2025-05-03 浏览:63

// main.js
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.mount('#app')

// 这段代码是 Vue 3 项目的入口文件。它使用 `createApp` 函数创建一个应用实例，并将根组件 `App.vue` 挂载到 HTML 中的 `#app` 元素上。

<!-- public/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 3 App</title>
</head>
<body>
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>
</html>

<!-- 这是一个简单的 HTML 文件，包含了一个用于挂载 Vue 应用的 `div` 元素（id 为 `app`）。其他资源文件（如 CSS 和 JavaScript）会在构建过程中自动注入。 -->

<!-- src/App.vue -->
<template>
  <div id="app">
    <h1>Hello Vue 3!</h1>
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

<style scoped>
/* 你可以在这里添加一些样式 */
</style>

<!-- 这是一个单文件组件 (SFC)，包含了模板、脚本和样式部分。它定义了应用程序的根组件，其中包含了一个简单的欢迎消息。 -->

// vite.config.js (如果使用 Vite 构建工具)
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
})

// 如果你使用 Vite 作为构建工具，这段配置文件指定了如何处理 Vue 组件。Vite 是一个现代的前端构建工具，能够快速开发和构建 Vue 项目。

{
  "name": "vue3-app",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.0.0",
    "vite": "^2.0.0"
  }
}

// package.json 文件列出了项目的依赖项和脚本命令。`dependencies` 包含运行时依赖，而 `devDependencies` 包含开发时依赖。

如果你需要更多关于 Vue 3 的配置或功能实现，请告诉我！

上一篇：vue安装sass

下一篇：vue2 动态组件