当前位置：首页 > VUE

vue 实现流程

2026-01-12 23:54:57VUE

Vue 实现流程

初始化项目

使用 Vue CLI 或 Vite 创建项目：

# Vue CLI
npm install -g @vue/cli
vue create project-name

# Vite
npm create vite@latest project-name --template vue

安装依赖后进入项目目录：

cd project-name
npm install
npm run dev

项目结构

典型 Vue 项目结构：

src/
├── assets/       # 静态资源
├── components/   # 可复用组件
├── views/        # 页面级组件
├── router/       # 路由配置
├── store/        # Vuex/Pinia 状态管理
├── App.vue       # 根组件
└── main.js       # 应用入口

核心功能实现

组件开发
单文件组件示例 (HelloWorld.vue)：

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

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

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

路由配置
安装 Vue Router：

npm install vue-router

配置路由 (router/index.js)：

vue 实现流程

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

状态管理
Pinia 示例 (推荐替代 Vuex)：
安装 Pinia：

npm install pinia

创建 Store (store/counter.js)：

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++
    }
  }
})

数据交互

Axios 请求示例：
安装 Axios：

vue 实现流程

npm install axios

API 调用示例：

import axios from 'axios'

axios.get('/api/data')
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.error(error)
  })