vue前端实现教程
Vue 前端实现基础教程
环境准备
安装 Node.js（建议 LTS 版本），通过 npm 或 yarn 安装 Vue CLI 工具：
npm install -g @vue/cli
# 或
yarn global add @vue/cli创建项目
使用 Vue CLI 初始化项目，选择默认配置或手动配置（如 Babel、Router 等）：
vue create my-project
cd my-project
npm run serve核心概念与实现
组件开发
单文件组件（.vue）包含模板、脚本和样式三部分：
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
data() {
return { message: "Hello Vue!" };
}
};
</script>
<style scoped>
div { color: red; }
</style>数据绑定
- 双向绑定使用
v-model：<input v-model="inputText" /> - 动态属性绑定使用
v-bind:或简写:：<a :href="url">Link</a>
事件处理
通过 v-on: 或简写 @ 绑定事件：
<button @click="handleClick">Click</button>
<script>
export default {
methods: {
handleClick() { alert("Clicked!"); }
}
};
</script>状态管理（Vuex）
安装与配置
安装 Vuex 并创建 store：
npm install vuex// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: { count: 0 },
mutations: {
increment(state) { state.count++; }
}
});组件中使用
通过 mapState 和 mapMutations 简化调用：
<template>
<div>{{ count }} <button @click="increment">+1</button></div>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
export default {
computed: mapState(['count']),
methods: mapMutations(['increment'])
};
</script>路由配置（Vue Router）
安装与配置
安装 Vue Router 并定义路由表：
npm install vue-router// router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from '../views/Home.vue';
Vue.use(Router);
export default new Router({
routes: [{ path: '/', component: Home }]
});导航与动态路由
使用 <router-link> 和编程式导航：
<router-link to="/about">About</router-link>
<script>
export default {
methods: {
goToAbout() { this.$router.push('/about'); }
}
};
</script>进阶优化
异步组件
通过动态导入实现代码分割：
const About = () => import('./views/About.vue');API 请求
使用 Axios 发送 HTTP 请求：
npm install axiosimport axios from 'axios';
axios.get('/api/data').then(response => {
console.log(response.data);
});部署构建
生成生产环境代码：
npm run build输出文件位于 dist/ 目录，可部署到静态服务器或 CDN。
