当前位置：首页 > VUE

vue实现前端

2026-01-07 20:44:53VUE

Vue 实现前端的核心方法与步骤

安装 Vue 项目
使用 Vue CLI 或 Vite 创建项目。Vue CLI 是传统构建工具，Vite 是新一代轻量级工具。

npm init vue@latest  # Vite 方式
# 或
npm install -g @vue/cli
vue create my-project  # Vue CLI 方式

项目结构说明
典型 Vue 3 项目包含以下关键目录：

src/components：存放可复用组件
src/views：存放页面级组件
src/router：路由配置（使用 Vue Router）
src/store：状态管理（使用 Pinia/Vuex）

基础组件开发
创建单文件组件（.vue），包含模板、脚本和样式三部分：

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

<script setup>
const message = 'Hello Vue!'
</script>

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

状态管理（Pinia 示例）
安装 Pinia 并创建 store：

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 store = useCounterStore()
</script>

路由配置（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
})

挂载到 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')

API 交互（Axios 示例）
安装 Axios 并封装请求：

npm install axios

创建 API 服务文件：

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

const api = axios.create({
  baseURL: 'https://api.example.com'
})

export const getData = () => api.get('/data')

组合式 API 使用
Vue 3 的组合式 API 提供更灵活的代码组织方式：

<script setup>
import { ref, onMounted } from 'vue'
import { getData } from '@/services/api'

const data = ref(null)

onMounted(async () => {
  data.value = await getData()
})
</script>

构建与部署
项目开发完成后进行生产构建：