vue 工程之 vite + vue3.x

目录

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

二、创建SPA工程的方法：

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

---

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

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

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

1. 1、优点：

①用户体验感好很多；

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

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

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

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

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

1. 二、创建SPA工程的方法：

• vite 创建
• vue-cli 创建

vite 和 vue-cli 优缺

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

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

     终端操作命令行

// 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.从 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’)