当前位置：首页 > VUE

vue app 实现

2026-01-13 06:57:44VUE

Vue App 实现方法

创建 Vue 项目

使用 Vue CLI 创建新项目，运行以下命令：

npm install -g @vue/cli
vue create my-vue-app
cd my-vue-app
npm run serve

项目结构

典型 Vue 项目结构如下：

my-vue-app/
├── node_modules/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── views/
│   ├── App.vue
│   ├── main.js
├── package.json

核心组件开发

在 src/components 目录创建可复用组件：

<template>
  <div class="my-component">
    {{ message }}
  </div>
</template>

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

<style scoped>
.my-component {
  color: #42b983;
}
</style>

状态管理

对于复杂状态管理，使用 Vuex：

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  }
})

路由配置

使用 Vue Router 实现页面导航：

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/About.vue')
    }
  ]
})

API 集成

使用 axios 进行 HTTP 请求：

// src/api.js
import axios from 'axios'

export default {
  async getUsers() {
    try {
      const response = await axios.get('https://api.example.com/users')
      return response.data
    } catch (error) {
      console.error(error)
    }
  }
}