当前位置：首页 > ops >正文

前端工程化：npmvite

ops 2025/8/6 17:57:58

本文为个人学习笔记整理，仅供交流参考，非专业教学资料，内容请自行甄别

文章目录

前言
一、npm
二、vite
- 2.1、创建项目
- 2.2、目录结构
- 2.3、启动项目
- 2.4、打包项目

前言

npm是 Node.js 附带的包管理器，用于安装、管理和发布 JavaScript 包，相当于JAVA中的Maven。而Vite是一个前端构建工具和开发服务器，它可以用于快速启动前端项目并在生产环境打包优化代码。类似于集成了Maven的Spring Boot脚手架工程。需要安装Node.js，查看Node.js版本：
在这里插入图片描述

一、npm

npm初始化命令，会生成一个package的json文件：

npm init -y

安装某个依赖，例如jquery，会在package.json中生成 “dependencies”: { “jquery”: “^x.x.x”}，如果加入-a参数则是全局安装。

npm install jquery

卸载某个依赖，例如jquery：

npm uninstall jquery

在package.json的script中编写可以运行的脚本进行测试，可以用于启动项目的引导类：

npm run start(start是package.json中自己定义的脚本名称)

在这里插入图片描述

二、vite

2.1、创建项目

创建项目脚手架：

npm create vite

在这里插入图片描述
首先输入项目的名称

在这里插入图片描述
选择前端项目的框架

在这里插入图片描述
选择前端项目的语言

根据命令构建并启动项目

安装依赖：

npm install

在这里插入图片描述

2.2、目录结构

生成的项目结构：

components下存放vue组件，类似于JAVA的controller或service目录。
App.vue是Vue 项目的根组件。里面可以嵌套其他组件。
main.js是主启动类。
package.json定义了项目的依赖、脚本、元信息等，类似于JAVA的pom.xml
public用于放置放置不会被构建工具处理的静态资源（如 favicon、纯 HTML 文件、图标等），类似于JAVA的resources/static或 webapp
assets用于存放图片、字体、SVG 等资源，打包时会被 Vite 处理并优化。
index.html是网页的主页面，Vue 会在里面通过 id=“app” 挂载。
vite.config.js定义构建配置，比如插件、路径别名、代理服务等。类似于JAVA的application.yml

在这里插入图片描述
package.json：

main.js中的createApp(App).mount('#app')，代表了创建一个 Vue 应用实例，并将根组件 App 渲染到页面上 id 为 app 的 DOM 元素上。这里的App，是App.vue。createApp(App)相当于JAVA中的SpringApplication.run(MainApplication.class, args);
而.mount('#app')则是将 Vue 应用挂载到页面中 index.html 里的 DOM 元素上，在index.html中定义了：
在这里插入图片描述
'#app' 指的是这个 HTML 节点。