Vue 简介

官网

Vue 提供了官方的中英文文档站点，是学习和查阅API的权威渠道：

1. 英文官网：Vue.js - The Progressive JavaScript Framework | Vue.js
2. 中文官网：Vue.js - 渐进式 JavaScript 框架 | Vue.js

介绍与描述

Vue 是一款用于动态构建用户界面的渐进式 JavaScript 框架，由尤雨溪于2014年正式发布。它的核心设计理念是"渐进式"，意味着你可以从在现有页面中嵌入简单交互开始，逐步引入路由、状态管理等能力，最终构建完整的大型单页应用。

Vue 的特点

遵循 MVVM 模式

Vue 是 MVVM 架构的典型实现，通过 ViewModel 层自动同步 Model 和 View 的状态，大幅减少手动DOM操作代码量。

// 简化的MVVM实现示意

const vm = new Vue({

  el: 'app',

  data: { message: 'Hello Vue!' } // Model层

})

• Model层：对应Vue实例的data对象，存储应用数据
• View层：对应HTML模板，展示用户界面
• ViewModel层：Vue实例本身，作为桥梁自动完成数据与视图的双向绑定

编码简洁, 体积小, 运行效率高

Vue 3 核心库gzip后仅约16KB，学习曲线平缓，1-2周即可达到基本生产力。在10000个列表项渲染测试中，Vue 3初次渲染仅需290ms，更新耗时240ms，性能表现优于同场景下的React和Angular。

只关注UI，可灵活扩展

Vue核心库仅聚焦视图层，不会强制绑定全套技术栈，开发者可以根据项目需求自由引入第三方库，避免框架过度封装带来的冗余。

与其它 JS 框架的关联

Vue 在设计阶段充分借鉴了两大主流框架的成熟特性，形成了自身的技术优势：

• 借鉴 Angular 的模板语法和双向数据绑定技术，通过声明式模板降低学习门槛
• 借鉴 React 的组件化开发思想和虚拟DOM技术，通过Diff算法实现高效的视图更新

三大框架核心特性对比如下：

特性	Vue	React	Angular
核心定位	渐进式框架	UI库	全功能框架
响应式实现	Proxy/Object.defineProperty	状态更新调度	Zone.js
主包体积(gzip)	~16KB	~40KB	~65KB

Vue 周边库

Vue 生态提供了完整的工具链，覆盖从项目搭建到业务开发的全流程：

vue-cli: Vue 脚手架

官方提供的项目初始化工具，一键生成标准化的Vue项目结构，内置webpack/vite构建配置，无需手动处理复杂的工程化配置。

创建Vue项目

npm create vue@latest my-vue-project

cd my-vue-project

npm install

npm run dev

axios

目前Vue项目中最主流的HTTP请求库，用于替代早期的vue-resource，支持拦截器、请求取消、自动转换JSON数据等特性。

// axios基础封装示例

import axios from 'axios'

const request = axios.create({

  baseURL: '/api',

  timeout: 5000

})

// 请求拦截器

request.interceptors.request.use(config => {

  config.headers.Authorization = localStorage.getItem('token')

  return config

})

export default request

vue-router: 路由

Vue官方的单页应用路由插件，实现URL与组件的映射，支持无刷新页面跳转、路由懒加载、导航守卫等功能。

// 基础路由配置
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
})

export default router

在模板中使用路由：

<template>
  <div>
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-view></router-view> <!-- 路由组件渲染出口 -->
  </div>
</template>

vuex: 状态管理

Vue官方的集中式状态管理库，用于解决多组件间状态共享的问题，统一管理全局数据（如用户信息、购物车状态）。

// 基础vuex配置示例
import { createStore } from 'vuex'

export default createStore({
  state: {
    count: 0
  },

  mutations: {
    increment(state) {
      state.count++
    }
  },

  actions: {
    asyncIncrement({ commit }) {
      setTimeout(() => commit('increment'), 1000)
    }
  }
})

element-ui / ant-design-vue

两款主流的PC端Vue UI组件库，提供开箱即用的表单、表格、弹窗等业务组件，大幅提升中后台项目开发效率。其中 Element UI 由饿了么团队维护，Ant Design Vue 是蚂蚁集团Ant Design体系的Vue实现，两者都支持Vue 2和Vue 3版本。

转载自 CSDN-专业IT技术社区

原文链接：https://blog.csdn.net/cccloveforever/article/details/169361172