vue3学习笔记[概念-安装-配置篇]

最新推荐文章于 2025-05-20 11:23:08 发布

原创最新推荐文章于 2025-05-20 11:23:08 发布 · 764 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#学习 #笔记 #vue

web前端开发学习同时被 2 个专栏收录

15 篇文章

订阅专栏

vue3学习

7 篇文章

订阅专栏

vue3学习笔记[概念-安装-配置篇]

编码规范

编程语言：JavaScript、TypeScript
代码风格：组合式API、选项式API
简写形式：setup语法糖

创建前准备

项目创建的方式

vue3项目创建有两种方式，分别是：

vue-cli脚手架创建(基于webPack)
Vite创建(官方推荐，咱们使用这种)

总结：Vite是一个新的，等同于webPack的构建工具；

vite构建的优点

轻量快速的热重载（HMR ），快速服务启动
TypeScript、JSX、css支持开箱即用，不用在进行配置
按需编译，不用等整个软件编译完毕

vite构建与webPack构建的区别

webPack：entry->router x N->module x N->serverReady（先加载处理所有路由和所有模块，最后就绪）
webPack：entry->router x N->module x N->serverReady（先就绪，根据访问加载处理所需的路由和模块）

创建vue3项目

❗️前提条件

熟悉命令行
最好熟悉vue2栈
已安装 18.3 或更高版本的 Node.js
编译软件为vscode

执行vite构建命令

前置条件为已经安装node.js环境

//通过vite创建(官方创建命令)
npm create vue@latest

在这里插入图片描述

当我们初次执行构建命令时，可以看到提示，我们未安装对应的用于vue3创建的 create-vue包，版本是3.12.2，问我们是否继续，如果已经安装了直接输入y继续就可以，但是如果没安装我们就可以先安装一下；

//全局安装create-vue包 
npm install -g create-vue@3.12.2

//安装完毕后，重新执行刚才的命令
npm create vue@latest

在这里插入图片描述

执行vite命令-[报错一]

在这里插入图片描述

出现这种情况是我们的npm构建失败，缺少必要的包，或者是网络的原因，那就先解决异议

解决一

//强制清空缓存
npm cache clean --force

//全局安装create-vue包 
npm install -g create-vue@3.12.2

//安装完毕后，重新执行刚才的命令
npm create vue@latest

在这里插入图片描述

解决二

//重新进行npm构建并创建vue3项目
 npm init vite

完成初步创建

当当面的命令执行后，大家会进入到选择界面，如果你使用的是cmd创建或者其他编译器啥的，可能是全英文界面，所以大家可以以我这个全中文的界面进行参考，通过键盘左右按键进行选择，比起vue-cli的vue2创建更加方便快捷；

在这里插入图片描述

❗️ [注意]：项目名称需要为非中文，英文小写，或可组合下划线的形式为佳

因为vue3已经全面拥抱TS了，所以咱们选上他:happy:

⛔️ ESlint很容易干扰到我们正常的拼写，所以咱们不选他,其他的按照我的选项来配置就行

目录结构初步讲解

㊗️等待我们执行完流程后，代表我们的项目已经初步创建完成了，那么接下来我们就可以开始运行项目了，不过在正式运行前，依旧是先对项目的目录做一下基本的讲解

目录讲解-[vscode文件夹]

在这里插入图片描述

在安装完成后我们会得到这样的一个项目目录,当然这个文件夹对项目影响不大，可删也可不删，我们对相对主要的做一下讲解：

我们会看.vscode这样一个文件夹，并且里面有一个extensions.json文件，这是vscode的一个拓展文件夹，旨在提醒你应该需要使用到的插件，你可能需要主动安装或者当你打开文件时，你的编译器右下角可能会弹出提示，让你准许安装某些插件，以支持咱们现在的项目开发；

插件注意事项

vetur插件报错

**注意：**当你的右下角出现这样的警告时，意思是你需要先禁用你的vutur插件；

在这里插入图片描述

原因是：

vutur主要用于对 vue 单文件组件提供语法高亮、语法支持以及语法检测，但不支持TypeScript;
vue3全面拥抱Ts，所以vutur对vue3的单文件支持已经不够用了，大家可以自行打开APP.vue，哐叽爆红🔴

所以在咱们进行vue3项目开发的时候先对vetur进行禁用就可以；

在这里插入图片描述

vue - official插件安装（volar）

vue - official有啥作用： Vue3 语言高亮、语法检测，组件拖拽，还支持 TypeScript 和基于 vue-tsc 的类型检查功能

注意：Volar插件已弃用或被合并

在这里我们需要特别提一嘴哈，因为可能会有小伙伴会有疑问，我看别的博主都用volar或者刚才看到的json文件中vue3不是要用volar来支持吗？其实是因为vue官方已经停止了对Volar Language Features 和TypeScript Vue Plugin(Volar) 的支持，现在这些插件都已经汇总合并到了vue - official 中，咱们直接安装最新版的插件就行
在这里插入图片描述

在这里插入图片描述

也就是说咱们这一篇博客是很新很新的，新到可以用手指头计算时间的😂

其他插件推荐

再给大家推荐几个插件，方便咱们进行高效开发，先把目录写一遍，方便大家看，并着重介绍推荐值拉满的。

插件名称	插件作用	支持情况
Aya Vue3 extension Pack	注意：这是16个插件的组合，不想像我一样自定义的可以直接使用它，他可能包含下面的一些	vue2、vue3
Vue VSCode Snippets	快速生成和补全Vue 代码片段	vue2、vue3
Vue Peek	Vue Peek 插件用来拓展 Vue 代码编辑的体验，可以快速跳转到组件、模块定义的文件。	vue2、vue3
Prettier - Code formatter	代码格式化工具之一，介于ESlint和Beautify之间，关键是它支持Ts	Js、Ts、css、html等
Beautify	代码格式化工具，推荐使用Js的vue项目使用（小型项目最佳搭档）	js、css、html
beautify css/sass/scss/less	样式代码格式化工具，保存时自动进行格式化，主要是适用范围广	css/sass/scss/less
Path Intellisense	文件路径补全工具，

Vue VSCode Snippets

Vue VSCode Snippets 用于快速生成和补全Vue 代码片段的方法，也在稳定更新中，它不仅仅支持vu3还支持vue2对于咱们来说绝对是生产力工具；

在这里插入图片描述

下面简单展示下他的语句补全功能，还是挺好用的，输入对应的指令完成补充，像咱们最常用到的 v-for，输入vfor即可进行快速补全，我也是做这篇博客时才发现他，真的是相见恨晚 😢

vfor快速填充

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

vbase页面模版快速填充

或者咱们新建了一个vue文件但是又不想复制粘贴改起来麻烦，使用指令即可快速生成

在这里插入图片描述

v3生成生命周期函数等

再或者使用v3+名称可以快速生成各种方法

在这里插入图片描述

Prettier - Code formatter

代码格式化工具之一，介于ESlint和Beautify之间，没有eslint的严格要求但同时又它支持Ts，对于咱们写vue3项目来说还是十分友好的；

在这里插入图片描述

不推荐插件

老规矩先上目录，因为是不推荐所以就不浪费篇幅细说了，如果有的话可以根据个人意愿进行卸载或禁用；

插件名称	插件作用	不推荐原因
Auto Close Tag	用于快速闭合html标签,例如输入<div会自动补全后一半	vscode已经自动支持补全，所以该插件作用已不大
Bracket Pair Colorizer	用于显示彩色括号	vscode已经自动支持,不过效果不太明显，可以自己选择
Guides	用来显示代码层级	vscode已经自动支持

目录讲解-[public文件夹]

这个其实就是脚手架的根目录，当我们打开public文件夹后看到只有一个.con的图标文件

在这里插入图片描述

这个文件就是咱们在进行网站访问的时候咱们页签的图标大家可以看一下，就是这俩小玩意儿在这里插入图片描述

目录讲解-[src文件夹]

这个就不多赘述了，都知道咱们的所有的工作基本都在这个文件夹中完成，是我们的源码所在，第一篇咱们先做最外层结构的简要分析，后面细说；

在这里插入图片描述

目录讲解-[index.html文件]

与原来的vue2结构不一样，vue3的index.html在public文件夹外作为一个入口文件，目前咱们看到的页面中，起到至关作用就是对man.ts的引入撑起了咱们的页面。

在这里插入图片描述

目录讲解-[env.d.ts文件]

[注意🛑 ]这个文件是千万不能删的哈，这个文件是用来告诉Ts 他妈是他妈的玩意儿，相当于是翻译官，你要是删了就会出现新的爆红，如下：
在这里插入图片描述

然后打开这个文件的时候我没猜错的话你肯定在爆红，原因是因为咱们现在还没有安装依赖包，大家可以看看自己是不是还缺少一个叫：node_modules 的文件夹，

在这里插入图片描述

所以咱们需要执行依赖安装，补全后才能进行项目的运行（已有请忽略）

在这里插入图片描述

安装必要依赖

记得在安装完成后重启项目

//依赖安装
npm i
npm install //这俩都一样，没区别

在这里插入图片描述

安装报错-[情况一]

如果大家出现进度条动的很慢或者很慢地动着动着报错了，那么可以有有线考虑是网络因素导致，咱们可以更换一下镜像源

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

解决报错-[情况一]

//1.查看当前的npm源
npm config get registry

咱们可以先查看自己的镜像源，因为考虑到有小伙伴在vue2的时候已经更改过镜像源，如果查出来跟我一样就像我一样继续就行，若不是但却报错了可以考虑强制清空缓存并重新运行，我们先说和我一样的再补充和我不一样的；

在这里插入图片描述

//2.将npm设置为淘宝镜像(2024-2025最新)
npm config set registry https://registry.npmmirror.com
//3.再次查看npm镜像设置
npm config get registry
//4.重新install
npm install

在这里插入图片描述

执行完没有报错之后咱们就直接继续往下就行

和我不一样的情况看这里

//强制清空缓存
npm cache clean --force
//重新运行
npm i

安装报错-[情况二]

出现这个报错记得排查一下是不是运行的目录出错了，比如咱们刚才创建的目录是vue3目录下的 /hello_vue3大家一定要先进去在运行以上命令哈

在这里插入图片描述

解决报错-[情况二]

在这里大家可以不用照搬我的代码哈，根据自己的情况，输入cd 再输入刚才创建的项目名称按tab就可以补全然后进去再运行就行

cd .\hello_vue3\

因为我这里没有出过别的报错，如果大家在这一步出现了别的报错记得联系我，我会进行补充(因为自己淋过雨，所以也想帮别人撑伞)，咱们齐心协力帮扶每一个可怜的前端娃儿🤕

等待咱们完成依赖安装后，就会是这样的场景，不再爆红了有木有~

在这里插入图片描述

目录讲解-[package文件]

package.json ：依赖配置文件；

package-lock.json ：实际锁定的依赖配置文件，保证不同开发环境中依赖安装结果一致；

目录讲解-[README.md文件]

对工程的简单介绍，可以自定义修改、删除

运行vue3项目

了结上上面那些，咱们终于算是开始跑项目了

//运行项目
npm run dev

//结束项目运行(键盘操作)
ctrl+C

项目运行报错-[情况一]

在这里插入图片描述

如果我没预计错，你应该大概率可能也许又双叒叕报错啦~

不过不用怕，因为有我在，我来祝你！

报错解决-[情况一]

这种情况是因为没有正确安装 vite 可执行文件，重新安装即可

//全局安装vite
npm install -g vite

在这里插入图片描述

vite安装报错

出现这样的情况或者安装过于缓慢可能是网络环境导致的，更换淘宝镜像源重新安装即可

在这里插入图片描述

解决vite安装报错

//2.将npm设置为淘宝镜像(2024-2025最新)
npm config set registry https://registry.npmmirror.com
//3.再次查看npm镜像设置
npm config get registry
//全局安装vite
npm install -g vite

运行成功

终于算是走到这里了，我的本篇博客也算是结束了；欢迎继续收看下一篇 vue3学习笔记[开始-认识-编写篇]

这也意味着咱们迈出了奔向vue3的第一步，能坚持到这里，你很强哦~

不得不提提一点，vue3跑起来是真的快，快到，我都没反应过来，一看时间559毫秒，半秒不到哦

接下里也是充满期待呢 :happy:

在这里插入图片描述

报错

//2.将npm设置为淘宝镜像(2024-2025最新)
npm config set registry https://registry.npmmirror.com
//3.再次查看npm镜像设置
npm config get registry
//全局安装vite
npm install -g vite