前端工程化: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 分钟前
大话设计模式——关注点分离原则下的事件处理
前端·后端·架构
山有木兮木有枝_7 分钟前
node文章生成器
javascript·node.js
yvvvy23 分钟前
前端必懂的 Cache 缓存机制详解
前端
北海几经夏39 分钟前
React自定义Hook
前端·react.js
龙在天43 分钟前
从代码到屏幕,浏览器渲染网页做了什么❓
前端
TimelessHaze44 分钟前
【performance面试考点】让面试官眼前一亮的performance性能优化
前端·性能优化·trae
yes or ok1 小时前
前端工程师面试题-vue
前端·javascript·vue.js
我要成为前端高手1 小时前
给不支持摇树的三方库(phaser) tree-shake?
前端·javascript
Noxi_lumors1 小时前
VITE BALABALA require balabla not supported
前端·vite
周胜21 小时前
node-sass
前端