使用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的相关分享。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,688评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,559评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,749评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,581评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,741评论 3 271
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,684评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,122评论 2 292
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,847评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,441评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,939评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,333评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,783评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,275评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,830评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,444评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,553评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,618评论 2 249

推荐阅读更多精彩内容