当前位置：首页 > VUE

vue app 实现

2026-02-10 14:28:59VUE

Vue App 实现步骤

初始化项目

使用 Vue CLI 或 Vite 创建项目。Vue CLI 是官方提供的脚手架工具，适合快速搭建 Vue 项目。Vite 是现代化的构建工具，启动速度快，适合开发体验要求高的场景。

npm init vue@latest
# 或
npm create vite@latest my-vue-app --template vue

项目结构

典型的 Vue 项目结构包含以下目录和文件：

src/：源代码目录
- main.js 或 main.ts：应用入口文件
- App.vue：根组件
- components/：存放可复用组件
- views/ 或 pages/：存放页面级组件
- router/：路由配置
- store/：状态管理（如使用 Vuex 或 Pinia）
- assets/：静态资源（图片、样式等）
public/：公共资源，直接复制到输出目录
package.json：项目依赖和脚本配置

核心功能实现

组件开发
Vue 使用单文件组件（.vue），包含模板、脚本和样式三部分：

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

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

<style scoped>
div {
  color: red;
}
</style>

状态管理
对于复杂状态，推荐使用 Pinia（Vue 官方推荐）：

安装 Pinia：
```
npm install pinia
```

创建 store：

// stores/counter.js
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++
    }
  }
})

在组件中使用：

<script setup>
import { useCounterStore } from '@/stores/counter'
const counter = useCounterStore()
</script>

路由配置
使用 Vue Router 实现页面导航：

安装 Vue Router：
```
npm install vue-router
```

配置路由：

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/views/Home.vue'
const routes = [{ path: '/', component: Home }]
const router = createRouter({
  history: createWebHistory(),
  routes
})
export default router

在 main.js 中挂载：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')