一、 Vite的介绍
1.1 Vite的由来
在浏览器支持 ES 模块之前,JavaScript 并没有提供原生机制让开发者以模块化的方式进行开发。这也正是我们对 “打包” 这个概念熟悉的原因:使用工具抓取、处理并将我们的源码模块串联成可以在浏览器中运行的文件。时过境迁,我们见证了诸如 webpack、Rollup 和 Parcel 等工具的变迁,它们极大地改善了前端开发者的开发体验
1.2 前端应用开发出现的问题
在构建大型应用时,JavaScript代码量的急剧增加往往导致开发工具性能下降,在开发服务器启动时间延长至数分钟,以及即使启用模块热替换技术,代码更改后的更新效果在浏览器中的反映也需要数秒。这种缓慢的反馈循环严重降低了开发效率,并对开发者的工作满意度产生了负面影响。
1.3 Vite针对问题的解决方式
Vite 旨在利用生态系统中的新进展解决上述问题:浏览器开始原生支持 ES 模块,且越来越多 JavaScript 工具使用编译型语言编写。https://cn.vitejs.dev/guide/why.html前端工程化的作用包括但不限于以下几个方面:
-
快速创建项目:使用脚手架可以快速搭建项目基本框架,避免从零开始搭建项目的重复劳动和繁琐操作,从而节省时间和精力。
-
统一的工程化规范:前端脚手架可以预设项目目录结构、代码规范、git提交规范等统一的工程化规范,让不同开发者在同一个项目上编写出风格一致的代码,提高协作效率和质量。
-
代码模板和组件库:前端脚手架可以包含一些常用的代码模板和组件库,使开发者在实现常见功能时不再重复造轮子,避免因为轮子质量不高带来的麻烦,能够更加专注于项目的业务逻辑。
-
自动化构建和部署:前端脚手架可以自动进行代码打包、压缩、合并、编译等常见的构建工作,可以通过集成自动化部署脚本,自动将代码部署到测试、生产环境等。
二、 Vite创建Vue3工程化项目
2.1 Vite+Vue3项目的创建、启动、停止
2.1.1 使用命令行创建工程
找个电脑的合适位置上,创建一个空目录用于存储多个前端项目,然后用vscode打开该目录,在vocode中打开命令行运行如下命令
npm create vite@latest
第一次使用vite时会提示下载vite,输入y回车即可,下次使用vite就不会出现了
注意: 选择vue+JavaScript选项即可
2.2 安装项目所需依赖
cd进入刚刚创建的项目目录,然后输入命令 npm install(npm i是缩写)命令安装基础依赖
cd ./你刚刚创建的项目名
npm install
2.3 启动项目
查看项目下的package.json
下面是对项目中的一些基本配置的信息的记录,包括插件,版本以及自定义的命令
{
"name": "demo0-happy",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"@vue/cli": "^5.0.8",
"bwip-js": "^4.5.0",
"qrcode": "^1.5.4",
"vue": "^3.4.35"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.1.2",
"vite": "^5.4.0"
}
}
npm run dev
2.4 停止项目
命令行上 ctrl+c 需要输入Y确认退出
三 、 Vite+Vue3项目的目录结构
1.下面是 Vite 项目结构和入口的详细说明:
public/ 目录:用于存放一些公共资源,如 HTML 文件、图像、字体等,这些资源会被直接复制到构建出的目标目录中。
src/ 目录:存放项目的源代码,包括 JavaScript、CSS、Vue 组件、图像和字体等资源。在开发过程中,这些文件会被 Vite 实时编译和处理,并在浏览器中进行实时预览和调试。以下是src内部划分建议:
-
assets/
目录:用于存放一些项目中用到的静态资源,如图片、字体、样式文件等。 -
components/
目录:用于存放组件相关的文件。组件是代码复用的一种方式,用于抽象出一个可复用的 UI 部件,方便在不同的场景中进行重复使用。 -
layouts/
目录:用于存放布局组件的文件。布局组件通常负责整个应用程序的整体布局,如头部、底部、导航菜单等。 -
pages/
目录:用于存放页面级别的组件文件,通常是路由对应的组件文件。在这个目录下,可以创建对应的文件夹,用于存储不同的页面组件。 -
plugins/
目录:用于存放 Vite 插件相关的文件,可以按需加载不同的插件来实现不同的功能,如自动化测试、代码压缩等。 -
router/
目录:用于存放 Vue.js 的路由配置文件,负责管理视图和 URL 之间的映射关系,方便实现页面之间的跳转和数据传递。 -
store/
目录:用于存放 Vuex 状态管理相关的文件,负责管理应用程序中的数据和状态,方便统一管理和共享数据,提高开发效率。 -
utils/
目录:用于存放一些通用的工具函数,如日期处理函数、字符串操作函数等。
vite.config.js 文件:Vite 的配置文件,可以通过该文件配置项目的参数、插件、打包优化等。该文件可以使用 CommonJS 或 ES6 模块的语法进行配置。
package.json 文件:标准的 Node.js 项目配置文件,包含了项目的基本信息和依赖关系。其中可以通过 scripts 字段定义几个命令,如 dev、build、serve 等,用于启动开发、构建和启动本地服务器等操作。
Vite 项目的入口为 src/main.js 文件,这是 Vue.js 应用程序的启动文件,也是整个前端应用程序的入口文件。在该文件中,通常会引入 Vue.js 及其相关插件和组件,同时会创建 Vue 实例,挂载到 HTML 页面上指定的 DOM 元素中。
2.vite的运行界面
在安装了 Vite 的项目中,可以在 npm scripts 中使用 vite
可执行文件,或者直接使用 npx vite
运行它。下面是通过脚手架创建的 Vite 项目中默认的 npm scripts:(package.json)
{
"scripts": {
"dev": "vite", // 启动开发服务器,别名:`vite dev`,`vite serve`
"build": "vite build", // 为生产环境构建产物
"preview": "vite preview" // 本地预览生产构建产物
}
}
运行设置端口号:(vite.config.js)
//修改vite项目配置文件 vite.config.js
export default defineConfig({
plugins: [vue()],
server:{
port:3000
}
})