本文为个人学习笔记整理,仅供交流参考,非专业教学资料,内容请自行甄别
文章目录
前言
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 忽略提交