前端工程化: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的controllerservice目录。
  • App.vue是Vue 项目的根组件。里面可以嵌套其他组件。
  • main.js是主启动类。
  • package.json定义了项目的依赖、脚本、元信息等,类似于JAVA的pom.xml
  • public用于放置放置不会被构建工具处理的静态资源(如 favicon、纯 HTML 文件、图标等),类似于JAVA的resources/staticwebapp
  • 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.jsondev的脚本。

javascript 复制代码
npm run dev

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

2.4、打包项目

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

javascript 复制代码
npm run build

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

相关推荐
༺๑Tobias๑༻15 分钟前
Linux下Redis常用命令
linux·前端·redis
寅时码1 小时前
我开源了一款 Canvas “瑞士军刀”,十几种“特效与工具”开箱即用
前端·开源·canvas
CF14年老兵1 小时前
🚀 React 面试 20 题精选:基础 + 实战 + 代码解析
前端·react.js·redux
CF14年老兵1 小时前
2025 年每个开发人员都应该知道的 6 个 VS Code AI 工具
前端·后端·trae
十五_在努力1 小时前
参透 JavaScript —— 彻底理解 new 操作符及手写实现
前端·javascript
典学长编程1 小时前
前端开发(HTML,CSS,VUE,JS)从入门到精通!第四天(DOM编程和AJAX异步交互)
javascript·css·ajax·html·dom编程·异步交互
拾光拾趣录1 小时前
🔥99%人答不全的安全链!第5问必翻车?💥
前端·面试
IH_LZH2 小时前
kotlin小记(1)
android·java·前端·kotlin
lwlcode2 小时前
前端大数据渲染性能优化 - 分时函数的封装
前端·javascript