当前位置：首页 > VUE

vue全家桶实现

2026-01-19 11:14:05VUE

Vue 全家桶实现

Vue 全家桶通常指 Vue.js 及其核心生态工具，包括 Vue Router、Vuex（或 Pinia）、Vue CLI（或 Vite）等。以下是实现一个完整 Vue 全家桶项目的关键步骤和配置方法。

初始化项目

使用 Vue CLI 或 Vite 创建项目基础结构。Vue CLI 适合传统项目，Vite 更适合现代前端开发。

Vue CLI 方式：

npm install -g @vue/cli
vue create my-project

Vite 方式：

npm create vite@latest my-project --template vue
cd my-project
npm install

集成 Vue Router

Vue Router 是官方推荐的路由管理工具，用于构建单页面应用（SPA）。

安装 Vue Router：

npm install vue-router@4

配置路由（示例）：

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: () => import('../views/About.vue') }
]

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')

状态管理（Vuex 或 Pinia）

Vuex 是 Vue 的官方状态管理工具，Pinia 是更现代的替代方案。

Vuex 安装与配置：

npm install vuex@next

创建 Store：

// src/store/index.js
import { createStore } from 'vuex'

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

挂载到 Vue 实例：

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

const app = createApp(App)
app.use(store)
app.mount('#app')

Pinia 安装与配置：

npm install pinia

创建 Store：

// src/store/counter.js
import { defineStore } from 'pinia'

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

挂载 Pinia：

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const app = createApp(App)
app.use(createPinia())
app.mount('#app')