vue前端实现

Vue 前端实现基础步骤

安装 Vue.js
通过 npm 或 CDN 引入 Vue.js。npm 安装命令：

npm install vue

CDN 引入方式：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

创建 Vue 实例
在 HTML 中定义挂载点，并通过 new Vue() 初始化实例：

<div id="app">{{ message }}</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  });
</script>

组件化开发

定义组件
使用 Vue.component 或单文件组件（.vue 文件）：

Vue.component('my-component', {
  template: '<div>A custom component!</div>'
});

单文件组件结构
.vue 文件包含模板、脚本和样式：

<template>
  <div>{{ msg }}</div>
</template>

<script>
export default {
  data() {
    return { msg: 'Hello from SFC!' };
  }
};
</script>

<style scoped>
div { color: red; }
</style>

状态管理（Vuex）

安装与配置
安装 Vuex 并创建 store：

npm install vuex

import Vuex from 'vuex';
Vue.use(Vuex);

const store = new Vuex.Store({
  state: { count: 0 },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

组件中使用
通过 this.$store 访问状态或触发变更：

methods: {
  increment() {
    this.$store.commit('increment');
  }
}

路由管理（Vue Router）

安装与配置
安装并定义路由表：

npm install vue-router

import VueRouter from 'vue-router';
Vue.use(VueRouter);

const routes = [
  { path: '/home', component: Home },
  { path: '/about', component: About }
];

const router = new VueRouter({ routes });

路由视图与导航
在模板中使用 <router-view> 和 <router-link>：

<router-link to="/home">Home</router-link>
<router-view></router-view>

响应式数据绑定

数据与事件
通过 v-model 实现双向绑定，v-on 绑定事件：

<input v-model="message" @keyup.enter="submit">

methods: {
  submit() {
    console.log(this.message);
  }
}

生命周期钩子

常用钩子示例
在组件不同阶段执行逻辑：

export default {
  created() {
    console.log('组件已创建');
  },
  mounted() {
    console.log('DOM 挂载完成');
  }
};

进阶功能

自定义指令
注册全局或局部指令：

Vue.directive('focus', {
  inserted(el) {
    el.focus();
  }
});

使用方式：

<input v-focus>

混入（Mixins）
复用组件逻辑：

const myMixin = {
  methods: {
    logMessage() {
      console.log(this.message);
    }
  }
};

export default {
  mixins: [myMixin]
};

构建与部署

Vue CLI 项目
使用脚手架初始化项目：

npm install -g @vue/cli
vue create my-project

生产环境构建：

npm run build

生成的文件位于 dist/ 目录，可直接部署到服务器。