当前位置：首页 > VUE

vue添加功能实现

2026-03-10 02:40:19VUE

Vue 添加功能实现方法

安装 Vue 通过 npm 或 yarn 安装 Vue：

npm install vue

或

yarn add vue

创建 Vue 实例 在 HTML 文件中引入 Vue 并创建实例：

vue添加功能实现

<div id="app">
  {{ message }}
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  })
</script>

添加组件 创建 Vue 组件并注册：

Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})

使用 Vue Router 安装 Vue Router 并配置路由：

vue添加功能实现

npm install vue-router

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = new VueRouter({
  routes
})

new Vue({
  router
}).$mount('#app')

状态管理（Vuex） 安装 Vuex 并创建 store：

npm install vuex

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

new Vue({
  store
}).$mount('#app')

API 请求 使用 axios 进行 HTTP 请求：

npm install axios

import axios from 'axios'

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