Vue.js学习笔记
本文最后更新于：2025年8月22日 晚上
Web 全沾工程师的旅途
一、官网
Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。
vuejs.org What is Vue?
Vite（法语意为 “快速”，发音 /vit/，发音同 “veet”）是一种构建工具，旨在为现代 Web 项目提供更快、更精简的开发体验。
vitejs.dev What is Vite?
官方手册-Vue2：https://v2.cn.vuejs.org/v2/guide/
官方手册-Vue2 迁移到 Vue3：https://v3-migration.vuejs.org/
组合式 API 常见问答(Vue3 <script setup>)：https://cn.vuejs.org/guide/extras/composition-api-faq.html
ElementUI 安装：https://element.eleme.cn/#/zh-CN/component/quickstart
ElementUI 组件(基于 Vue2.0)：https://element.eleme.cn/#/zh-CN/component/button
ElementUI 组件(基于 Vue3.0)：https://element-plus.org/zh-CN/component/button.html
从 Element2.0 迁移：https://element-plus.org/zh-CN/guide/migration.html
1.1 Vue2 和 Vue3 版本差异比较
| 特性 | Vue2 | Vue3 |
|---|---|---|
| 构建工具 | webpack | Vite |
| IE11 支持 | √ | × |
二、创建一个 Vue 项目
参考链接：Vue2 和 Vue3 共存方式
参考链接：Vue3.0 知识点
2.1 脚手架工具说明
Vue2 项目创建脚手架请使用：npm i vue-cli@2.9.6
Vue3 项目创建脚手架请使用：npm i @vue/cli@5.0.8
但是，2022 年了，vue-cli在 npm 仓库中已经被标识为：deprecated
然后跟随引导尝试使用 @vue/cli ，又发现它的官网手册标注：
所以此处记录的两种安装方式已经成为历史，不再推荐使用。
最新的创建方式应该使用官方的脚手架工具：create-vue
1 | |
之所以在文章中记录下来这件事是因为：
- 仍然有许多项目或开源项目还在使用 Vue2 没有迁移到 Vue3
- 工作中有许多脚手架项目(指需求业务上的脚手架)已经基于 Vue2 封装的很成熟了，属于拿来改改就能交工的项目，迁移到 Vue3 的精力、维护成本较高。
2.2 Vue2.0
▼ 2.2.1 create-vue 创建 Vue 2 项目 (推荐)
执行命令：npm create vue@2
这是文章记录时官方最新的脚手架工具，推荐使用。
▼ 2.2.2 vue-cli@2.9.6 创建 Vue 2 项目
执行命令：vue2 init webpack pro
这是 Vue 2.0 时期最早的脚手架工具。其中 vue2 命令来自于本地安装 vue-cli@2.9.6 之后，手动将命令行文件更名为 vue2 并添加到系统环境变量中得到的。
2.3 Vue3.0
▼ 2.3.1 create-vue 创建 Vue 3 项目 (推荐)
执行命令：npm create vue@3
这是文章记录时官方最新的脚手架工具，推荐使用。
▼ 2.3.2 @vue/cli@5.0.8 创建 Vue 3 项目
执行命令：vue3 create vue3-cli-demo
其中 vue3 命令来自于本地安装 @vue/cli@5.0.8 之后，手动将命令行文件更名为 vue3 并添加到系统环境变量中得到的。
这个命令在创建项目的第一步，也可以选择创建 vue2 的项目；第二步选择默认包管理器：[yarn, npm]。
2.4 各个脚手架出现的时间顺序
| 顺序 | 工具 | 对应版本 | 构建工具 | 命令 |
|---|---|---|---|---|
| 1 | vue-cli |
vue2 | webpack |
vue init webpack project-name |
| 2 | @vue/cli |
vue2+3 | vue-cli-service |
vue create project-name |
| 3 | create-vue |
vue2+3 | vite |
npm create vue@2npm create vue@3 |
说明：
- 交互式命令行,只能创建 vue2,因为此时正处于 vue2 的发展时代
- 交互式命令行,第一步可以选择项目创建版本
- 交互式命令行,通过命令区分项目创建版本
2.5 Vue DevTools Github
这是一款浏览器插件形式的工具，依据 Vue DevTools 官方手册 给出的链接，到你所使用的相应浏览器中下载安装插件即可。
▽ 以火狐浏览器为例，安装过后的界面如下所示：
安装过后，一般会在浏览器的工具栏右上部分的功能区出现一个经典的 Vue 图标。在插件探测到当前网页是 Vue 开发的情况下图标会”亮”起来，否则是灰色的。
在插件启用的情况下下，打开浏览器的开发者调试工具，会发现在最后多了一个 Vue 的标签页，在这里就可以进行调试工作了。
如果没有发现这个标签页，关闭开发者工具，再重新打开一次或多次尝试，我在使用火狐浏览器时遇到了这种情况。
Vue 导出 Excel 表格
https://www.npmjs.com/package/xlsx#array-of-arrays-input
https://zhuanlan.zhihu.com/p/338935767
https://blog.csdn.net/yhj198927/article/details/124269024
https://zhuanlan.zhihu.com/p/95984128
https://blog.csdn.net/ningjiebing/article/details/125209319
https://github.com/protobi/js-xlsx#cell-object
其他参考文章
Vue-router 中 hash 模式和 history 模式的区别
Vue3 创建项目
确定有效 已声明“XXX”，但从未读取其值，vscode 如何关闭 ts 报错(xxx is declared but its value is never read.)
三、CDN 引入方式开发
3.1 通过 CDN 引入的elementUi、vue —— 如何使用其内部相关方法
本节内容节选自：https://blog.csdn.net/yehaocheng520/article/details/121137650
有些开发场景是并不是基于 Vue 脚手架创建的项目结构进行开发的，并且还是需要使用到elementui的提示信息，而非 window.alert()的提示信息。
在 js 文件中如何使用elementUI中的方法：
我们先来看下elementUI中的 js 的源码：
elementUI 中的 js 的线上地址 (点击查看)：https://unpkg.com/element-ui/lib/index.js
打开这个线上地址，看到满屏的 vue 的时候，就一定要清楚：elementUI 是跟 vue 一起使用的，而且引入elementUI一定要是在vue引入之后才可以。
而且代码开头处，有 define("ELEMENT" 和 exports.ELEMENT，找不到可以Ctrl+F搜索查看。这个其实就是 element 的集合，所有使用的组件方法都可以直接通过ELEMENT去调用。
下面汇总一下使用方法：
- 首先要引入 vue.js
未压缩版本
1 | |
minify 版本：
1 | |
- 引入 elementUI 的 css 和 js 文件
1 | |
需要在 body 闭合标签之前引入封装好的函数文件才可以生效，也就是为了能够在所有的标签渲染完成后再使用，这点要注意。
通过 cdn 引入的 elementUI，在使用 message.error 等方法时，需要通过下面的方式来调用：
1 | |
其他方法同理
四、查漏补缺
4.1 Vue3 开发时的注意事项
· 语法部分
如下数据类型等引用，必须要确保在
<script>标签上加上lang="ts"1
2
3
4
5
6
7
8
9
10<script lang="ts">
export interface Dept {
id: number;
value: number;
}
function handleDeptSelect(v1: string | null, option: Dept) {
console.log(`${v1}, ${option}`);
}
...
</script>想使用 Vue3 的最新写法 (就是不使用原来的
export default { }) 写法，请记得要在<script>标签中，加上setup1
2<script lang="ts" setup>
</script>