前端vue的实现
Vue 的基本实现
安装 Vue 可以通过 CDN 或 npm 进行。CDN 方式适合快速原型开发，而 npm 方式更适合大型项目。
通过 CDN 引入 Vue：
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>通过 npm 安装 Vue：
npm install vue创建 Vue 应用
使用 Vue 3 的 Composition API 创建一个简单的应用。新建一个 HTML 文件，引入 Vue 并初始化应用。
<div id="app">
{{ message }}
</div>
<script>
const { createApp } = Vue;
createApp({
data() {
return {
message: 'Hello Vue!'
};
}
}).mount('#app');
</script>组件化开发
Vue 的核心思想是组件化。创建一个 Vue 组件可以通过定义选项对象或使用单文件组件（SFC）。
定义组件选项对象：
const MyComponent = {
template: '<div>A custom component!</div>'
};
createApp({
components: {
'my-component': MyComponent
}
}).mount('#app');单文件组件（SFC）通常以 .vue 结尾，包含模板、脚本和样式：
<template>
<div>{{ msg }}</div>
</template>
<script>
export default {
data() {
return {
msg: 'Hello from SFC!'
};
}
};
</script>
<style scoped>
div {
color: red;
}
</style>响应式数据
Vue 使用响应式系统自动跟踪数据变化。在组件中，data 选项返回的对象会被转换为响应式。
data() {
return {
count: 0
};
}通过方法修改响应式数据：
methods: {
increment() {
this.count++;
}
}指令与模板语法
Vue 提供指令用于动态绑定数据和操作 DOM。常见指令包括 v-bind、v-model 和 v-for。
绑定属性：
<div v-bind:id="dynamicId"></div>双向绑定表单输入：
<input v-model="message" />循环渲染列表：
<li v-for="item in items" :key="item.id">
{{ item.text }}
</li>生命周期钩子
Vue 组件有多个生命周期钩子，用于在不同阶段执行代码。常见钩子包括 created 和 mounted。
created() {
console.log('Component created');
},
mounted() {
console.log('Component mounted to DOM');
}状态管理
对于复杂应用，可以使用 Vuex 或 Pinia 进行状态管理。Pinia 是 Vue 3 推荐的状态管理库。
安装 Pinia：
npm install pinia创建和使用 store：
import { defineStore } from 'pinia';
export const useCounterStore = defineStore('counter', {
state: () => ({ count: 0 }),
actions: {
increment() {
this.count++;
}
}
});在组件中使用 store：
import { useCounterStore } from './stores/counter';
export default {
setup() {
const counter = useCounterStore();
return { counter };
}
};路由管理
Vue Router 是官方路由库，用于构建单页应用（SPA）。
安装 Vue Router：
npm install vue-router配置路由：
import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
];
const router = createRouter({
history: createWebHistory(),
routes
});在应用中使用路由：
createApp(App).use(router).mount('#app');构建与部署
使用 Vite 或 Vue CLI 构建 Vue 应用。Vite 是新一代构建工具，速度更快。
安装 Vite：
npm create vite@latest my-vue-app --template vue构建生产环境代码：
npm run build部署生成的 dist 文件夹到静态文件服务器。
