前端工程化：npm&vite

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

文章目录

前言
一、npm
二、vite

前言

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

一、npm

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

javascript 复制代码

npm init -y

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

javascript 复制代码

npm install jquery

卸载某个依赖，例如jquery：

javascript 复制代码

npm uninstall jquery

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

javascript 复制代码

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

二、vite

2.1、创建项目

创建项目脚手架：

javascript 复制代码

npm create vite

首先输入项目的名称

选择前端项目的框架

选择前端项目的语言

根据命令构建并启动项目

安装依赖：

javascript 复制代码

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 节点。

2.3、启动项目

使用以下命令启动项目，运行以下命令，执行了package.json的dev的脚本。

javascript 复制代码

npm run dev

这个网页实际就是App.vue中定义的。

2.4、打包项目

使用以下命令打包项目，运行以下命令，执行了package.json的build的脚本。

javascript 复制代码

npm run build

项目目录下会生成一个dist文件夹，存放打包后的内容。如果使用git进行项目管理，通常.gitignore中需要设置node_modules 和 dist 忽略提交