vue实现步骤和方法
Vue 实现步骤和方法
创建 Vue 项目
使用 Vue CLI 快速搭建项目框架，确保已安装 Node.js 和 npm/yarn。
运行命令初始化项目：
npm init vue@latest根据提示选择配置（如 Router、Pinia 等），完成后进入项目目录并安装依赖。
项目结构配置
核心文件通常包括：
src/main.js：应用入口，初始化 Vue 实例。src/App.vue：根组件。src/views/和src/components/：分别存放页面级和可复用组件。src/router/index.js：配置路由（若使用 Vue Router）。
组件开发
单文件组件（.vue）结构示例：
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello Vue!'
}
}
}
</script>
<style scoped>
div {
color: blue;
}
</style>状态管理
使用 Pinia（推荐）或 Vuex 管理全局状态。
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 counter = useCounterStore() </script> <template> <button @click="counter.increment">{{ counter.count }}</button> </template>
路由配置
通过 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
})
export default router生命周期与 API 调用
在 onMounted 钩子中发起异步请求：
<script setup>
import { ref, onMounted } from 'vue'
const data = ref(null)
onMounted(async () => {
const response = await fetch('https://api.example.com/data')
data.value = await response.json()
})
</script>响应式数据
使用 ref 或 reactive 声明响应式变量：
<script setup>
import { ref } from 'vue'
const count = ref(0)
function increase() {
count.value++
}
</script>构建与部署
运行生产环境构建：
npm run build生成的 dist 文件夹可部署到静态服务器（如 Nginx、Netlify）。
