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