认识Vue.js

Vue3官方文档

Vue.js（简称Vue）是一个用于构建用户界面的渐进式JavaScript框架。与其他大型框架不同，Vue被设计为可以逐步采用的框架。核心库只关注视图层，并且非常容易上手，同时也便于与其它库或已有项目集成。

概念认识

单页应用

在传统的多页应用中，每次用户点击链接或提交表单时，浏览器都会发送一个新的请求到服务器，服务器返回一个新的HTML页面，浏览器加载并渲染这个新页面。这种方式的缺点是每次请求都会重新加载整个页面，影响性能和用户体验。

单页应用（Single Page Application，简称SPA）是一种Web应用程序，所有必要的代码（HTML、JavaScript、CSS）都在单个页面加载完成后，通过动态更新页面内容来响应用户的操作，而不需要重新加载整个页面，之后的内容更新通过JavaScript来动态加载和渲染。SPA通过AJAX或Fetch API从服务器获取数据，并动态更新页面内容，而不需要重新加载整个页面。由于不需要重新加载整个页面，只需要更新部分内容，SPA的响应速度更快，用户体验更好。前端负责界面和用户交互，后端提供数据和API支持。

渐进式JavaScript框架

渐进式JavaScript框架是一种设计理念，使框架能够逐步集成到现有项目中，并根据项目需求逐步添加更多功能和复杂性。可以先用它来增强页面的一部分，甚至是单个元素，而无需改变整个应用程序的架构。随着需求的增加，可以逐步引入更多的功能，例如路由（Vue Router）、状态管理（Vuex）等，甚至可以用它来构建一个完整的单页应用（SPA）。这种框架的核心思想是提供一个基础的、轻量级的核心库，然后通过插件和模块逐步增强功能。使得开发者可以根据项目的具体需求，选择性地使用框架的特性，而不需要一次性引入整个框架。

Vue Router

Vue Router 用来为 Vue.js 应用提供路由功能，也就是控制不同的 URL 地址与不同的视图之间的映射关系。在 Vue 应用中，用户点击链接时，Vue Router 会根据配置的规则来切换视图，而不需要重新加载整个页面。例如，可以设置不同的 URL 路径对应不同的组件，点击链接时，只更新页面中指定的部分，而保持应用的状态不变。当用户访问不同的 URL 时，Vue Router 会通过匹配路由规则，加载对应的 Vue 组件，并展示在页面中。

假设正在构建一个博客应用，包含首页、文章详情页和关于页面，可以使用 Vue Router 来管理不同页面的路由：

1
2
3
4
5
const routes = [
  { path: '/', component: Home },
  { path: '/post/:id', component: PostDetail },
  { path: '/about', component: About }
];

在这个例子中：

  • / 对应首页。
  • /post/:id 对应文章详情页，其中 :id 是动态参数，表示文章的 ID。
  • /about 对应关于页面。

用户点击链接或直接访问某个 URL 时，Vue Router 会根据路由规则展示相应的组件。

Vue.js的主要特点：

  1. 组件化：Vue鼓励使用组件化的方式构建应用程序，可以重用和组织代码。看见*.vue后缀的文件，基本可以认为这是一个组件，每个组件都有自己的结构、逻辑和样式
  2. 响应式数据绑定：Vue的数据绑定是响应式的，当数据变化时，视图会自动更新。
  3. 虚拟DOM：Vue使用虚拟DOM来提高性能，通过最小化直接操作真实DOM来优化渲染速度。
  4. 生态系统丰富：Vue有丰富的官方和社区插件、工具和库，如Vue Router（路由管理）、Vuex（状态管理）、Vue CLI（项目构建工具）等。

Vue.js 拥有非常活跃和丰富的生态系统，包含了许多官方和社区提供的插件、工具和组件库。这些资源可以帮助快速开发应用程序，并且可以直接在项目中使用别人做好的组件。

Vue 生态系统的主要组成部分：

  • Vue CLI：用于快速创建和管理 Vue 项目，包含项目模板和插件系统，官方文档：Vue CLI

  • Vue Router：官方的路由管理器，用于构建单页应用（SPA），官方文档：Vue Router

  • Vuex：官方的状态管理库，用于管理复杂应用的状态。官方文档：Vuex

  • Vue Devtools：一个浏览器扩展，用于调试 Vue 应用，官方文档：Vue Devtools

  • 社区组件库：

    • Element：饿了么为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，官方文档：Element

    • Vuetify：基于 Material Design 的 Vue 组件库，官方文档：Vuetify

    • Ant Design Vue：Ant Design 的 Vue 实现，提供高质量的 UI 组件，官方文档：Ant Design Vue

  • UI 组件和插件：Vue 的社区中有很多开源的 UI 组件和插件，可以直接引入到您的项目中使用，可以在 npm 或 GitHub 上搜索到这些资源。

Vue项目结构

一个完整的Vue项目通常具有以下目录结构和文件，这些文件和目录各自承担特定的功能：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
my-vue-project/
├── node_modules/        # 项目依赖包
├── public/
│   ├── index.html       # 入口HTML文件
│   ├── favicon.ico      # 网站图标
├── src/
│   ├── assets/          # 静态公共资源，如图片、字体、公共css等
│   ├── components/      # 可复用的Vue组件
│   ├── views/           # 路由视图组件
│   ├── router/          # 路由配置
│   │   ├── index.js     # 路由定义
│   ├── store/           # Vuex状态管理
│   │   ├── index.js     # Vuex store入口
│   ├── App.vue          # 主入口组件，根组件
│   ├── main.js          # 注入口文件，初始化Vue实例
├── .env                 # 环境变量
├── .gitignore           # Git忽略文件
├── babel.config.js      # Babel配置文件
├── package.json         # 项目配置文件，依赖和脚本
├── README.md            # 项目说明文件
├── vue.config.js        # Vue CLI配置文件
文件/目录 功能说明
node_modules/ 项目依赖包，通常通过npm install或yarn install自动生成。
public/ 存放公共资源，如入口HTML文件和网站图标。
public/index.html 项目的入口HTML文件，通常包含一个<div id="app"></div>作为Vue挂载点。
public/favicon.ico 网站的图标。
src/ 存放应用的源代码，包括组件、视图、路由、状态管理等。
src/assets/ 存放静态资源，如图片、字体等。
src/components/ 存放可复用的Vue组件，每个组件通常有自己的文件。
src/views/ 存放路由视图组件，每个视图对应一个路由。
src/router/ 路由配置目录。
src/router/index.js 路由定义文件，配置各个路由及其对应的组件。
src/store/ Vuex状态管理目录。
src/store/index.js Vuex store入口文件，定义全局状态和变更方法。
src/App.vue 根组件，整个应用的顶层组件。
src/main.js 入口文件，初始化Vue实例并挂载到DOM。
.env 环境变量文件，例如API地址、运行模式等。
.gitignore Git忽略文件，定义哪些文件和目录不应被提交到版本控制系统中。
babel.config.js Babel配置文件，用于配置JavaScript转码器Babel。
package.json 项目配置文件，定义了项目的元数据、依赖包和脚本命令。
README.md 项目说明文件，通常包含项目简介、安装和使用说明等。
vue.config.js Vue CLI配置文件，用于配置和定制Vue CLI的行为。

安装Vue

在 npm 中使用 -g 标志进行安装，表示全局安装（global installation）该包。这意味着包会被安装到全局的 node_modules 目录，而不是安装到当前项目的 node_modules 目录下。我的全局目录是C:\Users\LHF\AppData\Roaming\npm\node_modules。这些包可以从任何目录访问和运行，通常用于命令行工具和全局依赖。

  1. 安装Vue之前必须先安装Node.js，由于我之前使用的hexo依赖于Node.js,我已经安装过了，所以不再重复安装，具体安装方法网上很多

Node版本

  1. 安装vue，使用管理员身份运行这条命令，以防出现报错

npm install vue -g

  1. 安装webpack模板

npm install webpack -g

  1. 安装webpack-cli

npm install webpack-cli -g

  1. 安装脚手架vue-cli

npm install vue-cli -g

  1. 输入vue –version，能输出版本号即成功安装

vue --version

安装成功

  1. 安装vue-router

npm install vue-router -g

  1. 全局安装 @vue/cli-init 插件

npm install -g @vue/cli-init

  1. 运行第一个vue-cli应用程序

D:\Python Project\AI_project\VUE_project>vue init webpack myvue

npm run serve # 运行vue项目命令 “serve为项目名称”

image-20250322161208854

运行成功

全局安装与本地安装

全局安装

全局安装的Node.js包可从任何目录访问，也可以在命令行中从任何位置访问和执行，适用于命令行工具，如vue-cli、hexo-cli、webpack-cli等。

安装好之后打开C:\Users\LHF\AppData\Roaming\npm\node_modules文件夹，可以看到全局安装的模块都统一在这里。这些文件夹是通过npm（Node Package Manager）全局安装的Node.js包。每个文件夹代表一个单独的包或模块，这些包是命令行工具、库或框架。

CLI（Command Line Interface）是指命令行界面。CLI 工具允许开发人员通过命令行执行各种任务，例如创建项目、运行构建、启动服务器等。CLI 工具通常能提高开发效率，简化常见的开发和部署流程。

安装到模块都在这里

本地安装

本地安装的Node.js包只能在当前项目中使用，专门用于当前项目。适用于安装某个项目的依赖库，如lodash、express等。安装命令不使用-g标志，直接在项目目录中运行npm install <package-name>

hexo项目中本地安装的依赖包

总结

全局安装的包适用于命令行工具，可以从任何位置访问和运行，而本地安装的包是项目特定的，只能在当前项目中使用。通过这种方式，可以确保每个项目的依赖是独立的，不会与其他项目的依赖冲突。

常见的–save是什么意思？

在 npm 中，--save 是一个命令行选项，曾经用于告诉 npm 将安装的依赖包添加到项目的 package.json 文件的 dependencies 字段中。

不过，从 npm 5.0 版本开始，--save 选项已经是默认行为，所以现在安装包时不需要显式地加上 --save，npm 会自动把安装的依赖添加到 package.json 中的 dependencies 字段。

安装插件指定版本号，可以通过@实现，例如

npm install --save swiper@8.1.6

vscode创建vue新项目报错

自定义项目名字时，切记只能小写！！不能大写

在vscode下新建项目时出现报错，报错信息如下:

1
2
3
4
5
6
7
PS D:\Python Project\deepseek_api_web> vue create vue-demo
vue : 无法加载文件 C:\Users\LHF\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。
所在位置 行:1 字符: 1
+ vue create vue-demo
+ ~~~
    + CategoryInfo          : SecurityError: (:) []，PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess

报错

解决方法

  1. 使用管理员权限打开PowerShell(win+x),输入如下命令，得到回复是Restricted，表示状态是禁止的。
1
get-ExecutionPolicy

查看

  1. 执行set-ExecutionPolicy RemoteSigned，回车，输入Y。
1
set-ExecutionPolicy RemoteSigned

更改策略

  1. 成功解决问题

成功

报错信息

之前粗心大意犯了一个非常傻逼的错误，创建完vue项目之后，通过npm run server命令运行项目，报错如下，应该运行的是npm run serve,而不是server！！！我还纠错找了半天原因，还去看了json文件，愣是没发现这个问题

报错

如何加载自定义的组件

首先，需要创建一个自定义组件。假设有一个叫 MyComponent.vue 的组件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<template>
    <div class="component">
        <h1>这是一个组件</h1>
        <h2>它会自己动态更新</h2>
    </div>
</template>

<script>
export default{
    name:"mycomponent"
}
</script>

<style>
h1{
    color: red;
}
</style>

在父组件中引入并使用，可以使用 局部注册 的方式引入自定义组件。即在父组件的 components 选项中注册它，然后就可以在父组件的模板中使用它，例如父组件为App.vue，因为组件树的存在，所以不必所有组件都要在App.vue中引用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
  <div id="app">
    <MyComponent />    // 显示组件
  </div>
</template>

<script>
import MyComponent from './components/MyComponent.vue'; // 引入 MyComponent

export default {
  name: 'App',
  components: {
    MyComponent  // 注册 MyComponent
  }
};
</script>

<style scoped>
/* 样式 */
</style>

如果希望在多个组件中都能使用该组件，或者不想每次都单独导入和注册，可以选择 全局注册 该组件。这样，在所有组件中都可以直接使用。

在 Vue 3 中，可以在应用的入口文件中（比如 main.js 或 main.ts）进行全局注册，这样，就可以在任何组件中直接使用 <MyComponent />，而不需要在每个父组件中导入和注册它。

1
2
3
4
5
6
7
8
9
10
import { createApp } from 'vue';
import App from './App.vue';
import MyComponent from './components/MyComponent.vue';

const app = createApp(App);

// 全局注册组件
app.component('MyComponent', MyComponent);

app.mount('#app');

一旦完成了引入和注册，接下来就可以在模板中像 HTML 元素一样使用它了，直接把它当做一个html元素，如div、button、p等元素，但是只有一个尖括号 <MyComponent />

通常，一个应用会以一颗嵌套的组件树的形式来组织吗，如下图中的根组件包含三个子组件，子组件又包含子组件……

组件树

vue的生命周期

在 Vue 中，生命周期指的是从 Vue 实例被创建到销毁的过程中，Vue 会执行的一系列钩子函数。生命周期钩子函数可以在 Vue 实例的不同阶段插入自定义的代码逻辑。

Vue 的生命周期分为几个阶段：创建阶段、挂载阶段、更新阶段和销毁阶段。下面是每个阶段的生命周期钩子函数：

  • 创建阶段：beforeCreate、created
  • 挂载阶段：beforeMount、mounted
  • 更新阶段：beforeUpdate、updated
  • 销毁阶段：beforeDestroy、destroyed

这些生命周期钩子函数允许在组件的不同阶段插入逻辑代码，有助于控制 Vue 实例的行为。可以利用这些钩子函数进行数据请求、事件监听、DOM 操作等任务。