前端工程化: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 忽略提交

相关推荐
江城开朗的豌豆4 分钟前
uni-app弹层遮罩难题?看我如何见招拆招!
前端·javascript·微信小程序
江城开朗的豌豆9 分钟前
小程序生命周期漫游指南:从诞生到落幕的完整旅程
前端·javascript·微信小程序
亿元程序员12 分钟前
100个Cocos实例之双摇杆(57/100)
前端
Mike_jia14 分钟前
Kaniko:无特权容器镜像构建的革命者
前端
欧阳码农16 分钟前
忍了一年多,我做了一个工具将文章一键发布到多个平台
前端·人工智能·后端
Hy行者勇哥18 分钟前
软件开发中前端页面、后台管理页面、后端、数据中台的关系与开发流程
前端
江城开朗的豌豆21 分钟前
跨平台开发实战:我的小程序双端(iOS、安卓)开发指南
前端·javascript·微信小程序
IT_陈寒32 分钟前
Python性能优化:5个让你的代码提速300%的NumPy高级技巧
前端·人工智能·后端
艾小码1 小时前
前端路由的秘密:手写一个迷你路由,看懂Hash和History的较量
前端·javascript
偷光3 小时前
浏览器中的隐藏IDE: Elements (元素) 面板
开发语言·前端·ide·php