vue 工程之 vite + vue3.x

100 阅读 0 评论 66 点赞

我是靠谱客的博主殷勤路人，这篇文章主要介绍vue 工程之 vite + vue3.x，现在分享给大家，希望可以做个参考。

一、Vue前端工程化开发，即：单页面SPA。

二、创建SPA工程的方法：

三、Vite 基本使用（仅支持 vue3.x）

前言：先大概知道前端工程相关信息。（。。。。。持续更新中）

一、Vue前端工程化开发，即：单页面SPA。

SPA单页面启动时，初始化时，一次性将工程所需要的html、css、js、等加载回来。
后续的用户操作，页面不重新加载不跳转，通过js来控制当前页面的交互，部分内容重新渲染加载；

1、优点：

①用户体验感好很多；

②前端只负责页面渲染；后端只负责提供接口（还可复用再小程序...）；

③服务器只提供数据，压力轻很多；

2、缺点：（有方法可以解决这些缺点）

①首屏加载慢：CDN、路由懒加载、精灵图、代码压缩...等（前端高频面试问题）

②不利于SEO：SSR服务器端渲染

二、创建SPA工程的方法：

vite 创建
vue-cli 创建

vite 和 vue-cli 优缺
	Vite	vue-cli
支持vue 的版本	仅支持 vue3.X	支持Vue2.X 和 vue3.X
是否基于webpack	否	是
运行速度	快	较慢
功能完善度	小而巧（逐渐完善）	大而全
是否建议在企业级开发案中使用	目前不建议	建议

三、Vite 基本使用（仅支持 vue3.x）

终端操作命令行

复制代码

1
2
3
4
5
6
// 1.创建    
npm init vite-app 项目名称
// 2.下载依赖 
npm i
// 3.启动项目 
npm run dev

四、Vite 项目的运行流程

Vue做的事情：就是通过main.js 把 APP.vue 渲染到 index.html 指定的区域中。

APP.vue 用来编写待渲染的模板结构
index.html 中需要预留一个 el 区域
main.js 把APP.vue 渲染到 index.html 所预留的区域中

Main.js中怎么联系 app.vue 和 index.html??

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 1.从 vue 中 按需导入 createApp 函数
// createApp 函数的作用：创建vue 的 “单页面应用程序的实例”
import { createApp } from ‘vue’

//2. 导入待渲染的App 组件
import App from  ‘./App.vue’

//3. 调用createApp() 函数 返回值是“单页面应用程序的实例”，用常量 spa_app进行接收，
//同时把APP组件 作为参数传给 createApp函数，表示要把 App 渲染到index.html页面上

const spa_app = createApp( App ) 

// 4.调用 spa_app 实例的mount 方法 用来指定vue实际要控制的区域
spa_app.mount(‘#app’)