vue前端实现教程
Vue 前端实现基础教程
环境准备
确保已安装 Node.js（建议版本 14+）和 npm/yarn。通过以下命令安装 Vue CLI（官方脚手架工具）：
npm install -g @vue/cli
# 或
yarn global add @vue/cli创建项目
使用 Vue CLI 快速初始化项目：
vue create my-vue-project选择默认配置或手动配置（如 Babel、Router、Vuex 等）。进入项目目录：
cd my-vue-project项目结构
核心文件说明：
src/main.js：应用入口文件，初始化 Vue 实例。src/App.vue：根组件，包含路由视图。src/components/：存放可复用组件。src/views/（若使用 Router）：存放页面级组件。
编写组件
单文件组件（.vue）示例：
<template>
<div>
<h1>{{ title }}</h1>
<button @click="handleClick">点击</button>
</div>
</template>
<script>
export default {
data() {
return {
title: "Hello Vue!"
};
},
methods: {
handleClick() {
alert("按钮被点击");
}
}
};
</script>
<style scoped>
h1 {
color: #42b983;
}
</style>路由配置
安装 Vue Router（若未自动安装）：
npm install vue-router在 src/router/index.js 中配置路由：
import { createRouter, createWebHistory } from "vue-router";
import Home from "../views/Home.vue";
const routes = [
{ path: "/", name: "Home", component: Home },
{ path: "/about", name: "About", component: () => import("../views/About.vue") }
];
const router = createRouter({
history: createWebHistory(),
routes
});
export default router;状态管理（Vuex）
安装 Vuex（若需全局状态管理）：
npm install vuex在 src/store/index.js 中创建 Store：
import { createStore } from "vuex";
export default createStore({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++;
}
},
actions: {
incrementAsync({ commit }) {
setTimeout(() => commit("increment"), 1000);
}
}
});运行与构建
启动开发服务器：
npm run serve生产环境构建：
npm run build常用扩展
- UI 库：Element Plus、Vant、Ant Design Vue。
- HTTP 客户端：Axios（安装后封装为全局服务）。
- 调试工具：Vue Devtools 浏览器插件。
进阶实践
组件通信
- Props/Events：父子组件通过
props传递数据，$emit触发事件。 - Provide/Inject：跨层级组件数据传递。
- Event Bus：全局事件总线（小型项目适用）。
自定义指令
示例：实现一个聚焦指令：
// main.js
app.directive("focus", {
mounted(el) {
el.focus();
}
});使用：
<input v-focus />混入（Mixins）
复用组件逻辑：
// mixins/logger.js
export default {
created() {
console.log("组件创建");
}
};在组件中引入：
import logger from "./mixins/logger";
export default {
mixins: [logger]
};插件开发
封装全局功能（如 Toast 插件）：
// plugins/toast.js
export default {
install(app) {
app.config.globalProperties.$toast = (msg) => {
alert(msg);
};
}
};在 main.js 中注册：
import Toast from "./plugins/toast";
app.use(Toast);通过以上步骤，可快速上手 Vue 前端开发并逐步扩展复杂功能。
