使用vue3.0 + vite + element-plus搭建项目(vite源码解读)

写在前面

vue3刚出来的时候,就去了解vue3相关语法和使用。最近恰逢公司某新项目启动,搓搓小手,就采用vue3.0去搭建编写(不过这个项目用的是vue-cli4脚手架生成的项目,内置webpack,所以写的时候也只能先用webpack)。现在项目进程一半有余,也踩了很多坑,感悟了vue3函数编程的魅力。不过!这几天又痴迷于尤大大力推的vite!本着对新技术的探索和分享精神(哈哈还有蹭Vite的热度),决定整理一篇vite相关入门和解读的文章。🤩

准备工作

1.vue3.0

建议先有一些vue语法知识储备

在 Vue3.x 是兼容 Vue2.x 的语法的, Vue2.x 的90%语法能正常在 Vue3.x 中运行
从vue2.x到vue3.x,这其实是由完全面向对象OOP的思路,到函数式编程的思想转变。
Options APIComposition API的转变。(实在不会使用一些语法糖,就将就使用vue2.x的语法吧)

2. vite

vite工具是写这篇文章的唯一目的,具体了解可以看看文档:vue3中文文档-vitevite-github
尤大大说Vite是前端下一代打包工具。咱用奥运精神总结就是:更高、更快、更强。️️️

image.png

在本文的Vite模块,也会加大篇幅解读Vite相关的源码

3.element-plus

文档地址:Element Plus

Element Plus,一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库

开始

1.全局安装 create-vite-app

yarn global add create-vite-app@1.18.0

或者

npm i -g create-vite-app@1.18.0

2.创建项目目录

cva program-name

或者

 create-vite-app app-name

// 转眼间就好了 ,真的很快🤣

create-vite-app.png

目录结构:


目录结构.png

3. 启动项目

Vite帮我们生成的目录结构很简洁,主要文件和 vue-cli 的文件都是一样的,但是对比 vue-cli 新建的新项目的webpack启动,Vite启动真的很快了,甚至说启动时间可以忽略不计了🤔🤔🤔🤔

启动项目.png

启动效果.png

4. vite帮我们做了什么事

好家伙,启动速度快到我根本看不见就好了,所以去代码扒一扒,vite偷偷做了哪些事情:
index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="icon" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vite App</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>

/src/main.js

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

createApp(App).mount('#app')

其实就是index.html中引⼊了src/main.js, main.js 引⼊App.vue并挂载到html中,很好理解的一个流程,打开浏览器组件也确实渲染出来了。

Vite 是一个 web 开发构建工具,由于其原生 ES 模块导入方法,它允许快速提供代码。

浏览器通过<script module>,为每个导⼊⽣成HTTP请求, vite的dev服务拦截http请求,并把代码做⼀些转换之后返回给浏览器进⾏渲染。简单来说就是 Vite通过node编译静态资源返回给浏览器渲染。


http请求.png

5.vite原理是什么:

通过请求内容,其实我们不难看出端倪,首先在我们运⾏npm run dev之后,vite启动了⼀个dev server去拦截我们请求的资源⽂件,所以我们在浏览器看到的⻚⾯实际上是经过vite处理后的html⽂件。

5.1. vite先向html内插入代码

<script type="module">import "/vite/client"</script>

image.png

这个部分顺便提一句,教大家如何去阅读源码吧:
1.按照启动命令,去对应的文件夹下面找到入口,如果是自定义的命令,自己肯定知道入口的,初始化的入口都在node_modules内:
图1.png

2.找到命令的入口,然后顺利找到引入的文件cli.js
图2.png

3.在cli.js内,找到命令后可以看到.action内有具体执行的函数块。这里如果不明白为什么的,可以看看我写的一个关于手写cli的文章 模仿vue-cli,手写一个脚手架,可以解惑。
图3.png

4.继续在cli.js内,找到了runServe函数的具体位置,从而可以看到server的入口是server/index.js
图4.png

5.在server/index.js继续阅读代码,通过const serverPluginHtml_1 = require("./serverPluginHtml");知道了下一个我们需要去的位置路径
图5.png

6.顺利找到插入的具体地方
图6.png

5.2. client建立了一个sokcet服务

image.png

这个client在浏览器中启了⼀个socket服务,实时的去接受⼀系列的指令,根据指令再去处理响应的逻辑
connected: socket 连接成功
vue-reload: 组件重新加载
vue-rerender: 组件重新渲染
style-update: 样式更新
style-remove: 样式移除
js-update: js ⽂件更新
full-reload: ⽹⻚重刷新

例如保存代码热更新后,组件重新加载

image.png

直接上源码解读,同样,在图6的代码处可以看到热更新模块和client模块


图7.png

图8.png

图9.png

6.element-plus

快速上手:element-plus,

npm install element-plus --save

在 main.js 中写入以下内容:

import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue';

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

去hello-world组件尝试使用:写一个el-button,保存。
同时在控制台可以看到跟上面解读vite源码时,client服务所提供的热更新以及组件刷新逻辑的验证。


image.png
image.png

验证成功,ok!


image.png

以上就是自己有关vite的一点理解,感谢阅读,觉得vite部分说的不错有收获的话可以点个赞哈哈。
后续在公司项目结束后,可能会整理开发时vue3和element-plus的相关分享。

推荐阅读更多精彩内容