vue 实现流程
Vue 实现流程
初始化项目
使用 Vue CLI 或 Vite 创建项目：
# Vue CLI
npm install -g @vue/cli
vue create project-name
# Vite
npm create vite@latest project-name --template vue安装依赖后进入项目目录：
cd project-name
npm install
npm run dev项目结构
典型 Vue 项目结构：
src/
├── assets/ # 静态资源
├── components/ # 可复用组件
├── views/ # 页面级组件
├── router/ # 路由配置
├── store/ # Vuex/Pinia 状态管理
├── App.vue # 根组件
└── main.js # 应用入口核心功能实现
组件开发
单文件组件示例 (HelloWorld.vue)：
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello Vue!'
}
}
}
</script>
<style scoped>
div {
color: red;
}
</style>路由配置
安装 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
})
export default router状态管理
Pinia 示例 (推荐替代 Vuex)：
安装 Pinia：
npm install pinia创建 Store (store/counter.js)：
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
state: () => ({ count: 0 }),
actions: {
increment() {
this.count++
}
}
})数据交互
Axios 请求示例：
安装 Axios：
npm install axiosAPI 调用示例：
import axios from 'axios'
axios.get('/api/data')
.then(response => {
console.log(response.data)
})
.catch(error => {
console.error(error)
})构建部署
生产环境构建：
npm run build部署到静态服务器 (如 Nginx)：
将 dist 目录内容上传至服务器，配置 Nginx 指向该目录。
进阶功能
- 自定义指令：实现 DOM 操作封装
- 插件开发：扩展 Vue 功能
- SSR：使用 Nuxt.js 实现服务端渲染
- TypeScript 支持：增强类型检查
关键点：
- 组件化开发遵循单一职责原则
- 合理使用计算属性和侦听器优化性能
- 路由懒加载提升首屏速度
- 状态管理避免过度使用，仅共享必要数据
