vue实现前端
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>构建与部署
项目开发完成后进行生产构建：
npm run build生成的 dist 目录可直接部署到 Web 服务器（如 Nginx、Apache）。
