作为一个 React、Vue 双修选手,在 Vue 3 逐渐稳定下来之后,是时候摸摸 Vue 3 了。Vue3 的变化不可谓不大,所以,本系列主要通过对 Vue3 中的一些 Big Changes 做详细的介绍,然后封装一个比较通用的业务脚手架,里面会增加很多非常有用的小技巧,让你在 Vue 3 的世界里纵享丝滑 ~
第一篇将着重介绍一些 Vue3 中重要的变化和概念 ~
找个可以开机的电脑,在终端输入:
打开链接 http://127.0.0.1:5173,你的眼睛就会看到:
代表项目初始化成功,你真棒!
你的目录会长这个样子:
注意:记笔记,小技巧学起来,在 vscode 终端中使用 tree 指令打印当前项目的文件树:
tree -I "node_modules|.vscode|cypress" > tree.txt
这个命令会做两件事:
这样 tree 命令的输出就会被写入到 tree.txt 文件中,而不是打印到终端屏幕上。在项目中执行,然后你就会在项目根目录中看到一个 tree.txt 文件:
.
├── README.md
├── cypress.config.ts
├── dist
│ ├── assets
│ │ ├── AboutView-4d995ba2.css
│ │ ├── AboutView-675ecf4b.js
│ │ ├── index-9f680dd7.css
│ │ ├── index-d5df9149.js
│ │ └── logo-277e0e97.svg
│ ├── favicon.ico
│ └── index.html
├── env.d.ts
├── index.html
├── package.json
├── pnpm-lock.yaml
├── public
│ └── favicon.ico
├── src
│ ├── App.vue
│ ├── assets
│ │ ├── base.css
│ │ ├── logo.svg
│ │ └── main.css
│ ├── components
│ │ ├── HelloWorld.vue
│ │ ├── TheWelcome.vue
│ │ ├── WelcomeItem.vue
│ │ ├── __tests__
│ │ │ └── HelloWorld.spec.ts
│ │ └── icons
│ │ ├── IconCommunity.vue
│ │ ├── IconDocumentation.vue
│ │ ├── IconEcosystem.vue
│ │ ├── IconSupport.vue
│ │ └── IconTooling.vue
│ ├── main.ts
│ ├── router
│ │ └── index.ts
│ ├── stores
│ │ └── counter.ts
│ └── views
│ ├── AboutView.vue
│ └── HomeView.vue
├── tree.txt
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
├── tsconfig.vitest.json
├── vite.config.ts
└── vitest.config.ts
简单介绍一下重要的文件/文件夹:
public
里面的东西不会经过编译和打包,所以放在 public 内的东西 ”不要引用“;
通常会放置( 不被JavaScript ) 引用的静态资源,例如:网页标题栏 icon,即 favicon.ico;
打包的时候,里面的东西会直接被复制一份,放在根目录内,所以要引用 public 内的资源时,要使用根目录绝对路径,比如:要取 public/favicon.ico ,你应写成 /favicon.ico;
assets:放静态资源,如:图片、CSS
components:放公用组件
stores:与 Pinia 状态管理器有关
router:与 Vue Router 路由管理有关
views:放路由组件
2、深入认识 npm xxx
在 package.json 的 scripts 中常用的有三个指令:
npm run dev|npx vite:启动项目本地服务,并提供 Hot Module Replacement (HMR),可以在更新代码后即时更新页面;
是的,在项目根目录下 npx vite 也可以启动项目!
Vue3项目打包的主要目:
打包主要是为了优化性能、安全性、扩展性、部署便利性等等,实际项目部署中也是必要的步骤。
Vue 3 提供 Option API 和 Composition API 两种写法,Option API 是延续自 Vue 2 的写法,Composition API 则是跟着 Vue 3 一起推出的新写法。
Option API 和 Composition API 主要差别有两个:
不过需要注意:
还是一项实验性功能。它不一定会最终成为稳定功能,并且在稳定之前相关 API 也可能会发生变化。
在 Vue 3 中,SFC(Single File Component,单文件组件)是一种将模板、脚本和样式封装在一个单独的文件中的开发模式。SFC 提供了一种组织和编写 Vue 组件的便捷方式,并提供了更好的可读性和可维护性。
一个典型的 Vue 3 SFC 包含三个部分:
因为浏览器并不认识.vue档,所以在开发的时候,我们不能像以前一样直接通过 live server 在浏览器上预览项目,这也是为什么我们需要用到 Vite 或 Vue Cli 等建构工具,建构工具会根据 Vue 提供的 loader -@vue/compiler-sfc 来编译 .vue 文件。
Vue 3 的编译器会解析 SFC 的模板、脚本和样式部分,并将它们转换为可执行的渲染函数、JavaScript 代码和样式。这样,开发人员可以通过单个文件来组织组件的结构和逻辑,提高代码的可维护性和可读性,并且在构建过程中,Vue 3 的编译器会将 SFC 转换为可执行的 Vue 组件,使其能够在浏览器中运行。
打开浏览器的控制台,你就会发现,虽然它还有.vue,但你再仔细看看它,它已经是js了:
原文链接:https://juejin.cn/post/7277089907973603388
页面更新:2024-05-10
本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828
© CopyRight 2020-2024 All Rights Reserved. Powered By 71396.com 闽ICP备11008920号-4
闽公网安备35020302034903号