Vue.js - 渐进式 JavaScript 框架(1）_javascript渐进式框架-CSDN博客

本文链接：https://blog.csdn.net/LYQBackup/article/details/141726749

Vue.js（通常简称为Vue）是一个用于构建用户界面的开源JavaScript框架。它是由前Google工程师尤雨溪（Evan You）于2014年创建的，并且自那时以来，Vue.js在全球范围内获得了广泛的关注和使用。(官网：Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org))

特点

组件化架构

Vue.js 鼓励开发者使用组件化的方式构建应用，这意味着将应用的 UI 分解为可复用的组件。每个组件都有自己的模板、脚本和样式，可以独立于其他组件进行开发和测试。这种组件化的开发方式有助于提高代码的可维护性、可复用性和可扩展性。

声明式渲染

Vue.js 使用声明式渲染来描述 UI 和数据状态之间的映射关系。开发者通过编写模板，将数据绑定到 DOM 元素上，Vue.js 框架会自动更新 DOM 以反映数据的变化。这种声明式的开发方式使得代码更加简洁和直观，同时也更容易理解。

响应式数据绑定

Vue.js 提供了双向数据绑定机制，允许开发者将数据绑定到 DOM 元素上，同时也可以将 DOM 元素的属性绑定到数据上。当数据发生变化时，Vue.js 会自动同步数据和视图，减少开发者手动操作 DOM 的需求。

指令系统

Vue.js 有一套指令系统，如 v-if、v-for、v-bind 等，用于执行各种 DOM 操作。这些指令提供了简洁明了的方式来控制 DOM 的显示和行为，使得开发者可以更加专注于业务逻辑的实现。

过渡效果

Vue.js 提供了过渡效果的封装，允许开发者轻松地实现动画和过渡效果。通过使用 CSS 过渡和动画，Vue.js 能够平滑地处理组件的创建、更新和销毁，为用户提供更加流畅的用户体验。

单文件组件

Vue.js 支持单文件组件，允许开发者将模板、脚本和样式封装在一个 .vue 文件中。这种单文件组件的封装方式使得代码的组织更加清晰，也方便了团队成员之间的协作和代码的维护。

核心库和生态系统

Vue.js 是一个构建用户界面的 JavaScript 框架，它的核心库专注于视图层，但与其他框架如 Angular 和 React 相比，Vue.js 更加轻量级和易于上手。以下是对 Vue.js 核心库及其生态系统中关键组件的概述：

Vue 核心库

Vue.js 的核心库专注于构建用户界面。它提供了一个响应式的数据绑定系统和一个声明式的模板语法，允许开发者以简洁明了的方式创建动态和交互式的用户界面。Vue.js 支持单文件组件，这意味着可以将模板、脚本和样式封装在一个文件中，从而提高代码的可读性和可维护性。

Vue Router

Vue Router 是 Vue.js 的官方路由管理器，用于构建单页面应用（SPA）。它与 Vue.js 紧密集成，提供了一种简单的方式来管理应用中的不同页面和组件。Vue Router 支持路由懒加载、动态路由匹配、路由导航守卫等功能，使得单页面应用的导航更加灵活和高效。

Vuex

Vuex 是 Vue.js 的官方状态管理库，用于处理复杂应用的状态。它提供了一个可预测的状态管理模式，使得状态变更可以被跟踪和记录，从而更容易调试和维护。Vuex 支持模块化、热替换、持久化等功能，可以帮助开发者构建更加健壮和可扩展的应用。

Vue CLI

Vue CLI 是 Vue.js 的官方命令行工具，用于快速搭建标准化项目结构。它提供了丰富的插件和配置选项，使得开发者可以轻松地创建、开发、构建和部署 Vue.js 应用。Vue CLI 支持多种构建工具，如 Webpack、Babel、ESLint 等，可以满足不同开发场景的需求。

Vue DevTools

Vue DevTools 是一个浏览器扩展，用于调试 Vue.js 应用。它提供了实时预览、性能分析、组件状态跟踪等功能，可以帮助开发者更好地理解和优化 Vue.js 应用的性能和交互。Vue DevTools 与 Vue.js 核心库和生态系统紧密集成，是开发过程中不可或缺的工具。

使用Vue

引入Vue：可以通过CDN或npm安装Vue。
创建Vue实例：每个Vue应用都是通过构造函数Vue创建一个新的Vue实例开始的。
编写模板：在HTML中使用Vue的模板语法绑定数据。
定义组件：通过Vue.component或使用单文件组件定义可复用的组件。
使用指令：使用Vue的指令控制DOM元素的显示和行为。

下面是一个使用npm安装Vue并通过Vue CLI创建项目的完整过程，以及如何在该项目中创建Vue实例、编写模板、定义组件和使用指令。

1. 安装Vue CLI

首先，确保你已经安装了Node.js（下载 | Node.js 中文网 (nodejs.cn)）和npm。然后在命令行中全局安装Vue CLI：

npm install -g @vue/cli

2. 创建一个新的Vue项目

使用Vue CLI创建一个新的Vue项目：

vue create my-vue-app

按照提示选择预设配置或手动配置项目。

3. 进入项目目录并启动开发服务器

cd my-vue-app
npm run serve

这将启动一个开发服务器，通常在 http://localhost:8080。

4. 创建Vue实例

在 src/main.js 文件中，你可以看到创建Vue实例的代码：

import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: h => h(App),
}).$mount('#app')

这里，我们导入了Vue，定义了一个根组件App.vue，并在实例化Vue时将其渲染到DOM中。

5. 编写模板

在 src/App.vue 文件中，你可以编写模板：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

这里使用了<HelloWorld>组件，它是项目创建时自动生成的。

6. 定义组件

在 src/components/HelloWorld.vue 文件中定义了一个单文件组件：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<!-- 添加一些样式 -->
<style scoped>
.hello {
  /* styles */
}
</style>

7. 使用指令

在 HelloWorld.vue 组件中，你可以使用Vue的指令来控制DOM元素的显示和行为。例如，使用v-bind绑定属性，v-if条件渲染，v-for列表渲染等。

<template>
  <div class="hello">
    <h1 v-if="showMessage">{{ msg }}</h1>
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      showMessage: true,
      items: ['Item 1', 'Item 2', 'Item 3']
    }
  }
}
</script>

在这个例子中，v-if指令根据showMessage的值来决定是否渲染<h1>元素，而v-for指令用于渲染列表。

以上步骤展示了如何在Vue项目中引入Vue，创建实例，编写模板，定义组件和使用指令。通过这种方式，你可以构建一个功能完整的Vue.js应用。

使用WebStrom快速搭建Vue.js应用

WebStorm 是由 JetBrains 开发的一款强大的 JavaScript IDE，它提供了对 Vue.js 的优秀支持，使得快速搭建 Vue.js 应用变得简单。以下是使用 WebStorm 快速搭建 Vue.js 应用的步骤：

1. 安装 Node.js 和 npm

在开始之前，确保你的计算机上已经安装了 Node.js 和 npm。你可以从 Node.js（下载 | Node.js 中文网 (nodejs.cn)）下载并安装。

2.使用WebStorm自带的软件生态进行项目搭建

选择新建->项目

选择Vue.js->创建（如果提示未找到Node.js解释器，则需要在系统环境变量中添加node.js，一般软件会自动检测解释器，因此完成第一步后无需手动添加）

选择安装依赖项

vue项目结构

Vue.js项目通常采用特定的文件和目录结构来组织代码，这样的结构有助于维护和扩展应用程序。以下是一个典型的Vue项目结构，尤其适用于使用Vue CLI（Vue的命令行工具）创建的项目：

这个结构为Vue项目提供了一个清晰的组织方式，以下是一些关键点的说明：

public/index.html：是整个单页应用的模板HTML文件。
src/：包含了所有源代码。
- assets/：用于存放静态资源，如图片、字体等。
- components/：用于存放可复用的Vue组件。
- views/：用于存放路由映射到的页面组件。
- App.vue：是应用的根组件，所有页面组件最终都会被渲染到这个组件下。
- main.js：是应用的入口文件，用于创建Vue实例并挂载到DOM上。
- router/：包含了Vue Router的配置。
- store/：包含了Vuex状态管理的配置。
- utils/：可以放置一些工具函数。
- filters/：放置Vue的过滤器。
- styles/：放置全局样式文件。
node_modules/：存放项目依赖的第三方库。
配置文件：如.babelrc、.eslintrc.js、vue.config.js等，用于配置构建工具和代码风格。

根据项目的规模和需求，这个结构可以适当调整。例如，一些项目可能会在src目录下增加services或者plugin目录用于存放API请求逻辑等，或者增加directives目录用于存放自定义指令。

示例

下面是一个简单的Vue实例（仅从最简单的HTML+Vue简述）：

<!DOCTYPE html>
<html>
<head>
  <title>Vue.js示例</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>

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

这个文件通常很简单，主要包含以下部分：

<!DOCTYPE html>：文档类型声明。
<html>：HTML文档的根元素。
<head>：包含元数据和其他一些不会直接显示在页面上的信息，如字符集定义、视口设置、页面标题和样式表链接。
<body>：包含页面的所有内容，其中最重要的是<div id="app"></div>元素，这是Vue应用实例挂载的DOM元素。
<script>：包含页面中的所需js代码，在上面这个例子中我们可以看到有一个Vue实例化，为了使这段代码工作，你需要在 HTML 文件中有一个对应的元素，其 ID 为 app。

在这个例子中，{{ message }}是数据绑定的语法，它会显示Vue实例中data对象里message属性的值。

Vue.js非常适合于构建复杂的单页面应用（SPA），并且由于其灵活性和易用性，它被许多开发者和公司广泛采用。随着版本的更新，Vue.js也在不断进化，提供了更多高级功能和优化。