VUE 学习笔记

VUE-基础语法

引入vue

vue

使用vue cli搭建单文件组件vue项目

什么是单文件组件

Vue 单文件组件（Single-File Components，简称 SFC）是一种以 .vue 为后缀的文件格式，它允许你将一个 Vue 组件的模板、脚本和样式封装在同一个文件中。

结构：

一个典型的单文件组件包含三个部分：

<template>:组件的 HTML 模板，用于定义组件的结构和外观。每个 .vue 文件只能有一个 <template> 块。
<script>:组件的 JavaScript 代码，用于定义组件的数据、方法、计算属性、生命周期钩子等逻辑。导出一个 Vue 实例对象作为组件的选项。
<style>:组件的 CSS 样式，用于定义组件的样式。可以包含多个 <style> 块，并使用 scoped 属性限制样式的作用范围。

示例：

<template>
  <div class="my-component">
    <h1>{{ message }}</h1>
    <button @click="increment">点击 +1</button>
    <p>计数：{{ count }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from SFC!',
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

<style scoped>
.my-component {
  border: 1px solid #ccc;
  padding: 10px;
}
h1 {
  color: blue;
}
</style>

为什么要用单文件组件

清晰的结构：将模板、脚本和样式组织在一个文件中，使代码更清晰、易于理解和维护。
代码高亮和语法提示：现代代码编辑器（例如 VS Code、WebStorm 等）可以识别 .vue 文件，并提供代码高亮、语法提示和自动补全等功能，提高开发效率。
CSS 作用域：使用 scoped 属性可以将 CSS 样式限制在当前组件内，避免样式污染其他组件。
预处理器支持：可以使用预处理器（例如 Sass、Less、Stylus 等）编写 CSS 样式，提高 CSS 的可维护性和复用性。
构建工具集成： Vue CLI 等构建工具可以将 .vue 文件编译成浏览器可执行的 JavaScript 代码。
组件化开发：单文件组件促进了组件化开发，使代码更易于组织、复用和测试。

与非单文件组件的比较：

特性	单文件组件	非单文件组件
文件类型	`.vue`	`.js`
代码组织	模板、脚本、样式分离	模板、脚本、样式混合
可读性	更高	较低
可维护性	更强	较弱
CSS 作用域	支持	不支持
预处理器支持	支持	需要额外配置

如何创建一个单文件组件的项目

使用vue cli创建

使用 Vue CLI 创建 Vue 项目的步骤如下：

确保已安装 Node.js 和 npm (或 yarn):

在windows图标上按鼠标右键点击终端打开终端。

BIFxQUY79x

在终端中运行以下命令检查是否已安装 Node.js 和 npm：

node -v
npm -v

WindowsTerminal_X3LLoPBsqJ

运行成功如上图，显示的数字可以与上图不同。这里显示的是两个软件的版本号，软件的版本号会随着时间更新。

如果没有安装，请先从 Node.js 官网下载并安装: https://nodejs.org/

小提示

这里有的同学在运行npm -v的时候可能会遇到报错，如下图：

出现了很多红色的报错信息，这是因为Win11的终端问题。

需要在windows图标上按鼠标右键点击终端打开终端管理员

在终端管理员窗口中输入set-ExecutionPolicy RemoteSigned按下回车

WindowsTerminal_01LXVYSYlb

如上图即为成功，重新打开终端窗口输入npm -v即可看到版本号

全局安装 @vue/cli (如果尚未安装):

#先将npm的下载源换为国内的
npm config set registry https://registry.npmmirror.com/
# 安装@vue/cli
npm install -g @vue/cli

创建项目:

vue create my-vue-project

将 my-vue-project 替换为你想要的项目名称。

选择一个预设:

Vue CLI 会提示你选择一个预设。你可以选择以下几种方式：

Default ([Vue 3] babel, eslint) : Vue 3 的默认预设，包含 Babel 和 ESLint。
Default (Vue 2) : Vue 2 的默认预设。如果你要创建 Vue 2 项目，请选择这个。
Manually select features: 手动选择项目的功能，例如 TypeScript、Router、Vuex、CSS 预处理器等. 这可以根据项目需要进行自定义配置.

使用上下方向键选择，按下 Enter 键确认。

这里选择第三个选项Manually select features， 按下Enter开始配置项目。

WindowsTerminal_36LwdaN9Fn

WindowsTerminal_c6hx7ZaDSv

WindowsTerminal_gXfPkg0vMQ

WindowsTerminal_SmFBqrrJqz

WindowsTerminal_WYey0JdLBg

WindowsTerminal_F0f0xsLi4O

WindowsTerminal_mQ3OmC73ai

转一会

WindowsTerminal_Mq7R7k5PFK

如上图显示说明项目创建成功

(如果选择手动配置) 选择需要的功能：

如果选择了 "Manually select features"，你会看到一个多选列表，可以使用空格键选择你需要的功能，例如：

Choose Vue version: 选择 Vue 版本 (2 或 3)。
Babel: 将 ES6+ 代码转换为浏览器兼容的 JavaScript 代码。
TypeScript: 使用 TypeScript 进行开发。
Progressive Web App (PWA) Support: PWA 支持。
Router: 使用 Vue Router 进行路由管理。
Vuex: 使用 Vuex 进行状态管理。
CSS Pre-processors: CSS 预处理器 (Less, Sass, Stylus)。
Linter / Formatter: 代码检查和格式化工具 (ESLint)。
Unit Testing: 单元测试。
E2E Testing: 端到端测试。

选择完成后，按下 Enter 键继续.

配置选项 (如果选择了手动配置)：

Vue CLI 会询问一些配置选项，例如：

Use history mode for router? : 是否使用 history 模式 (需要后端服务器支持)。
Pick a linter / formatter config: 选择 ESLint 配置。
Pick additional lint features: 选择额外的 lint 功能。
Where do you prefer placing config for Babel, ESLint, etc.?: 配置文件存放位置 (In dedicated config files 或 In package.json)。
Save this as a preset for future projects?: 是否保存当前配置为预设，以便将来复用。

根据你的项目需求进行选择。

7. 进入项目目录：

cd my-vue-project

8. 启动开发服务器：

npm run serve

这会在本地启动一个开发服务器，你可以在浏览器中访问 http://localhost:8080/ 查看你的 Vue 项目。

其他说明：

你可以使用 vue ui 命令打开图形化界面创建项目，更加方便直观。

解释项目的构造

一个使用 Vue CLI 创建的 Vue 2 项目的典型目录结构如下，我会解释每个文件和文件夹的作用：

my-vue2-project/
├── public/                     # 静态资源目录，编译过程中不会被处理
│   ├── favicon.ico            # 网站图标
│   └── index.html             # 项目入口 HTML 文件，引入编译后的 JavaScript 和 CSS
├── src/                        # 源代码目录
│   ├── main.js                # Vue 实例的入口文件
│   ├── App.vue                 # 根组件，所有其他组件都会被渲染在这里
│   ├── components/             # 存放可复用组件
│   │   └── MyComponent.vue    # 示例组件
│   ├── assets/                 # 存放静态资源，例如图片、字体等 (会被Webpack处理)
│   │   └── logo.png           # 示例图片
│   ├── router/                 # 存放路由配置文件 (如果使用了 Vue Router)
│   │   └── index.js           # 路由配置文件
│   ├── store/                  # 存放 Vuex 状态管理相关的文件 (如果使用了 Vuex)
│   │   └── index.js           # Vuex store 配置
│   ├── views/                  # 存放页面组件 (可选)
│   │   └── Home.vue            # 示例页面组件
│   └── ...                     # 其他目录，例如 utils, api 等
├── .gitignore                  # Git 忽略文件列表
├── babel.config.js             # Babel 配置文件 (处理 ES6+ 语法)
├── package.json                # 项目配置文件，包含依赖项、脚本等信息
├── package-lock.json           # 锁定依赖版本，确保一致性 (npm)
└── README.md                   # 项目说明文件

主要文件/文件夹说明：

public/:
- index.html: 项目的入口 HTML 文件。 Vue 应用会在这里被挂载。通常你不需要修改这个文件，除非你需要添加一些特殊的 meta 标签或其他外部资源。
- favicon.ico: 网站的图标文件。
src/: 项目的源代码目录，你大部分的开发工作都会在这里进行。
- main.js: Vue 实例的入口文件，用于创建 Vue 实例并挂载到 index.html 中。在这里引入全局组件、插件等。
- App.vue: 根组件，所有其他组件都会被渲染在这个组件中。这是你应用的顶层组件。
- components/: 存放可复用的组件。建议将每个组件都放在一个单独的 .vue 文件中。
- assets/: 存放静态资源，例如图片、字体、样式表等。这些资源会被 Webpack 处理。
- router/: (可选) 如果你使用了 Vue Router，路由配置文件会放在这里。
- store/: (可选) 如果你使用了 Vuex，Vuex store 的配置文件会放在这里.
- views/: (可选) 用于存放页面组件。
.gitignore: Git 忽略文件列表，用于指定哪些文件/文件夹不应该被 Git 跟踪。
babel.config.js:Babel 配置文件，用于配置 Babel 将 ES6+ 代码转换成浏览器兼容的 JavaScript 代码。
package.json: 项目的配置文件，包含项目的名称、版本、依赖项、脚本等信息。这是 Node.js 项目的标准配置文件。
package-lock.json (或 yarn.lock): 锁定依赖项的版本，确保在不同环境下安装的依赖项版本一致，避免出现兼容性问题。

Vue CLI 创建的项目结构清晰，分工明确，方便管理和维护代码。 在开发过程中，建议遵循 Vue CLI 的目录结构规范，这可以提高代码的可读性和可维护性。

项目运行过程

在一个使用 Vue CLI 创建的 Vue 2 项目中，代码的运行过程大致如下：

入口： 浏览器加载 public/index.html 文件。
挂载点： index.html 文件中包含一个 <div id="app"></div> 元素，作为 Vue 应用的挂载点。index.html 文件的作用是作为 Webpack 的一个模板，Webpack 会在构建过程中将打包后的文件路径自动注入到 index.html 中。这样就实现了 main.js 与 index.html 的关联，即使 index.html 中没有显式地引入 main.js。
main.js ： main.js 是 Vue 实例的入口文件。

创建 Vue 实例： main.js 中创建了一个新的 Vue 实例：

import Vue from 'vue';
import App from './App.vue'; // 引入根组件
// ...其他引入，例如 router, store ...


new Vue({
  render: h => h(App), // 将 App 组件渲染到挂载点
  router, // 如果使用了 Vue Router
  store   // 如果使用了 Vuex
}).$mount('#app'); // 将 Vue 实例挂载到 id 为 "app" 的元素上

App.vue (根组件): Vue 实例会渲染 App.vue 组件，并将其挂载到 index.html 中的 <div id="app"></div> 元素上。
组件树： App.vue 组件可能包含其他子组件，这些子组件又可能包含更深层次的子组件，形成一个组件树。 Vue 会递归地渲染整个组件树。
组件渲染： 每个组件都有一个模板 (<template>)，Vue 会将模板编译成渲染函数 (render function)。渲染函数会根据组件的数据和逻辑生成虚拟 DOM (Virtual DOM)。
更新视图： Vue 将虚拟 DOM 与真实的 DOM 进行对比，找出需要更新的部分，然后高效地更新真实的 DOM，从而将组件渲染到页面上。
响应式系统： 当组件的数据发生变化时，Vue 的响应式系统会自动重新计算相关的计算属性、重新渲染受影响的组件，并更新视图。
事件处理： 用户与页面交互时，会触发 DOM 事件。 Vue 会监听这些事件，并在对应的事件处理函数中执行相应的逻辑。
组件通信： 组件之间可以通过 props、事件、provide/inject 等方式进行通信。例如，父组件可以通过 props 向子组件传递数据，子组件可以通过触发事件向父组件发送消息。
路由导航 (如果使用了 Vue Router): 当用户点击链接或浏览器地址发生变化时，Vue Router 会根据路由配置导航到对应的组件，并更新视图。
状态管理 (如果使用了 Vuex): Vuex 用于管理应用程序的状态。组件可以通过访问 Vuex store 获取或修改状态，状态的变化会触发组件的重新渲染。

简化流程图：

index.html --> main.js --> 创建 Vue 实例 --> App.vue (根组件) 
                                                  |
                                                  +--> 子组件 1
                                                       |
                                                       +--> 子组件 1-1
                                                  +--> 子组件 2
// ...

相互调用关系：

main.js 创建 Vue 实例并渲染根组件 (App.vue)。
根组件包含其他子组件，形成组件树。
父组件通过 props 向子组件传递数据。
子组件通过 $emit 触发事件向父组件传递数据。
组件之间还可以通过其他方式进行通信，例如 provide/inject、事件总线等。
Vue Router 控制页面导航和组件渲染。
Vuex 管理应用程序的状态，组件可以访问和修改状态。

项目代码解释

main.js

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

Vue.config.productionTip = false
// 将App组件挂载到div上，显示在页面上
new Vue({
  render: h => h(App),
}).$mount('#app')

main.js是Vue 应用的标准入口,是整个 Vue 应用的控制入口。

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

这两行代码是使用 ES6 的 import 语法导入 Vue 库和 App.vue 组件。Vue 是 Vue.js 的核心库,App.vue 是应用程序的根组件。

Vue.config.productionTip = false

这行代码是一个配置选项,用于关闭 Vue 在启动时生成的生产提示。这个提示在开发阶段有助于捕获常见错误,但在生产环境下显示这些日志就没有必要了,所以关闭它可以获得更好的用户体验。

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

这是 Vue 应用的主要入口。它创建了一个新的 Vue 实例,并传入了一个选项对象。
render: h => h(App) 是一个渲染函数,它告诉 Vue 如何将组件渲染到页面上。这里的 h 是 createElement 函数的一个简写,它会生成一个 App 组件的实例,并插入到页面中。
.$mount('#app') 这一句会将刚才生成的 Vue 实例挂载到 HTML 中 id 为 app 的 DOM 元素上。也就是说,Vue 会管理该元素及其内部的所有内容。

App.vue

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

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

这是整个Vue项目的父组件。

<template>

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

这是组件的模板部分。它定义了组件的 HTML 结构和标记。在这里,它渲染了一个包含 Vue 标志图片和 HelloWorld 组件的 div 元素。HelloWorld 组件通过 msg 属性传入了一个字符串。

<script>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

这是组件的脚本部分。首先,它使用 import 语句导入了 HelloWorld 组件。然后,它通过 export default 语句导出了一个组件选项对象。这个对象定义了组件的名称为 App,并在 components 选项中注册了 HelloWorld 组件,这允许在模板中使用 <HelloWorld> 标签。

<style>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

这是组件的样式部分。它定义了一些 CSS 规则,应用于具有 id 为 app 的元素及其子元素。这些规则指定了字体样式、字体平滑、文本对齐方式、颜色和顶部边距。

菜单

分享

VUE 学习笔记

VUE 学习笔记

VUE-基础语法

引入vue

vue

使用vue cli搭建单文件组件vue项目

什么是单文件组件

为什么要用单文件组件

如何创建一个单文件组件的项目

使用vue cli创建

解释项目的构造

项目运行过程

项目代码解释

main.js

App.vue

使用单文件组件开发一个小案例

在vue2项目中使用ElementUI

介绍ElementUI

安装ElementUI

控件介绍

使用ElementUI搭建一个简单的后台页面

评论

在 Vue 2 项目中使用 Element UI

VUE 学习笔记

Datawhale AI 夏令营从零入门CV图像竞赛(Deepfake攻防)

解密软件开发的幕后英雄：大学生职业指南

python爬虫学习路径

社团logo

游戏开发学习路径

前端开发学习路径

学习路径

java后端开发学习路径