vue项目笔记package.json node.js项目的核心配置文件，现代 JavaScript 项目的通用标准，可

package.json

node.js项目的核心配置文件，现代 JavaScript 项目的通用标准，可以将它简单视为maven中的pom.xml，它包含：

基本项目信息：

{
  "name": "admin",
  "version": "0.0.0",
  "private": true,
  "type": "module",

"name": "admin"：项目名称，通常用于发布到 npm，内部项目名也会写一下。
"version": "0.0.0"：版本号
"private": true：表示这个项目不会被发布到 npm。
"type": "module"：启用 ES 模块语法（import/export），适用于现代 JS。

脚本常用命令

  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },

"dev"：启动开发服务器，运行 vite
"build"：构建生产版本，会打包到 dist/ 目录。
"preview"：本地预览生产版本，检查打包效果。

项目依赖dependencies

这些是生产环境中运行时需要用到的库：

  "dependencies": {
    "vue": "^3.4.29",                      // Vue 3 主框架
    "vue-router": "^4.3.3",                // Vue 路由库
    "pinia": "^2.1.7",                     // Vue 状态管理库
    "element-plus": "^2.7.6",              // UI 框架（Element Plus）
    "@element-plus/icons-vue": "^2.3.1",   // Element Plus 的图标
    "axios": "^1.7.2",                     // 网络请求库
    "nprogress": "^0.2.0",                 // 顶部加载进度条
    "hotkeys-js": "^3.13.7",              // 键盘快捷键库
    "color": "^4.2.3",                    // 颜色处理工具
    "animate.css": "^4.1.1",              // 动画库
    "sortablejs": "^1.15.2",              // 拖拽排序库
    "echarts": "^4.8.0",                  // 图表库（注意：版本较老）
    "@wangeditor/editor-for-vue": "^5.1.12", // 富文本编辑器
    "path-to-regexp": "^7.0.0"            // 用于路径匹配（可能用于动态路由）
  },

开发依赖（devDependencies）

这些是开发时需要的工具或插件：

  "devDependencies": {
    "vite": "^5.3.1",                            // 构建工具
    "@vitejs/plugin-vue": "^5.0.5",             // 支持 Vue 文件的插件
    "@vitejs/plugin-vue-jsx": "^4.0.0",         // 支持 JSX 语法
    "sass": "^1.77.6",                          // 支持使用 SCSS/SASS 样式
    "unplugin-auto-import": "^0.17.6",          // 自动导入 Vue、Pinia 等 API
    "unplugin-vue-components": "^0.27.0",       // 自动按需导入组件
    "unplugin-element-plus": "^0.8.0"           // 自动导入 Element Plus 组件 & 样式
  }

项目依赖和开发依赖的区别

dependencies 是你构建完、上线后用户还会用到的包

比如：

Vue 框架（Vue.js）
路由系统（vue-router）
状态管理（pinia）
发请求的库（axios）

这些都必须保留在最终打包后的代码里。

devDependencies 是你本地写代码时、构建过程中才需要的工具

比如：

打包工具（vite、webpack）
插件（vite 插件、自动导入插件）
代码风格检查（eslint）
单元测试工具（jest、vitest）

vite.config.js

vite.config.js 是整个项目的“构建配置中心”,它告诉vite：

项目该如何启动、如何打包、用哪些插件、路径怎么解析、样式如何处理等。

导入依赖模块：

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import ElementPlus from 'unplugin-element-plus/vite'

fileURLToPath, URL：用于路径处理，把 import.meta.url 转换为普通路径（下面别名用得到）
defineConfig：Vite 提供的语法糖，用来写配置文件
@vitejs/plugin-vue：让 Vite 能解析 .vue 文件
vueJsx：支持 <script setup lang="tsx"> 或 .jsx 文件
unplugin-auto-import：自动导入 Vue 的函数，比如 ref、reactive，不用每次手动写 import
unplugin-vue-components：自动按需引入组件（比如 Element Plus 组件）
ElementPlusResolver：为上面两个插件服务，专门识别并引入 Element Plus 的内容
unplugin-element-plus/vite：优化 Element Plus 的样式导入（比如 sass 模式）

plugins配置

plugins: [
  vue(),
  vueJsx(),
  AutoImport({
    imports: ["vue"],
    resolvers: [ElementPlusResolver()],
  }),
  Components({
    resolvers: [ElementPlusResolver({ importStyle: "sass" })],
    dirs: ["src/components", "src/**/components"],
  }),
],

插件	作用
`vue()`	支持解析 `.vue` 单文件组件
`vueJsx()`	支持 Vue 的 JSX/TSX 写法
`AutoImport`	自动导入 Vue 中的函数（如 `ref`, `computed`），以及 Element Plus 的 API
`Components`	自动导入 Vue 组件，尤其是 Element Plus 组件；自动识别 `src/components` 路径下的组件

server 开发服务器配置

server: {
  host: '0.0.0.0',
  port: 5000,
  strictPort: false,
  open: false,
  proxy: {
    '/v1': {
      target: 'http://localhost:3099',
      changeOrigin: true,
    }
  }
}

配置项	作用
`host: '0.0.0.0'`	允许其他设备访问你的开发页面
`port: 5000`	本地启动的端口
`strictPort: false`	如果 5000 被占用，是否自动找下一个可用端口
`open: false`	是否自动打开浏览器
`proxy`	设置本地开发接口代理，解决跨域问题（如请求 `/v1` 会转发到 `http://localhost:3099`）

关于host: '0.0.0.0'，默认情况下，Vite 的本地服务器只能通过你电脑本机访问（比如访问 localhost:5173）。但加了 host: '0.0.0.0' 之后，它就会监听你电脑的所有网络接口

效果是：

你可以在 同一局域网的其他设备上访问你的页面 比如你手机连着和你电脑一样的 Wi-Fi，就可以通过：

http://你的电脑IP地址:端口号

来访问你正在开发的网页。

resolve 路径别名配置

resolve: {
  alias: {
    '@': fileURLToPath(new URL('./src', import.meta.url)),
    'store': fileURLToPath(new URL('src/store', import.meta.url)),
    'utils': fileURLToPath(new URL('src/utils', import.meta.url)),
    'libs': fileURLToPath(new URL('src/libs', import.meta.url)),
  }
}

这样你在写代码时可以使用别名而不是复杂路径，例如：

import { useUserStore } from 'store/user'
import { fetchData } from 'utils/request'
import Tool from 'libs/tool'

别名	实际路径	用途
`@`	项目的 `src` 目录	常用于引用组件、页面等
`store`	`src/store` 目录	Vuex/Pinia 状态管理模块
`utils`	`src/utils` 工具函数目录	放通用方法、封装函数等
`libs`	`src/libs` 库或第三方封装目录	自己封装的库或适配层

举个例子：

如果你想在某个组件中引用一个工具函数：

没有别名时：

import { formatDate } from '../../utils/date.js'

使用别名后：

import { formatDate } from 'utils/date.js'

css样式预处理配置

css: {
  preprocessorOptions: {
    scss: {
      javascriptEnabled: true,
      additionalData: `@use "@/assets/styles/main.scss" as *;`,
    },
  },
},

告诉 Vite 每个 .scss 文件在编译时自动注入 main.scss（通常包含变量、全局样式、mixin）
@use 是 Sass 的模块化导入语法
as * 表示将里面的变量 / 方法全部引入当前作用域

这份配置文件主要完成了这些功能：

功能	实现方式
支持 Vue 文件和 JSX	`@vitejs/plugin-vue`, `vueJsx`
自动导入 Vue 和 Element Plus 组件/API	`AutoImport` 和 `Components` 配合 `ElementPlusResolver`
组件按需加载样式（sass）	`importStyle: "sass"`
支持全局 scss 样式	`css.additionalData` 注入
使用路径别名	`@`, `store`, `utils`, `libs`
开发时代理接口请求	`server.proxy`
支持跨端访问和热更新	`server.host = '0.0.0.0'`

index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4123035_9zyjilfa6s8.css">
    <title>ZHOUYI</title>
</head>
<body>
<div id="app">
</div>
<script type="module" src="/src/main.js"></script>
</body>
</html>

在 Vue 项目中，index.html 是整个应用的HTML模板文件，它是浏览器真正加载的起点页面。

渲染过程（vue + vite）

浏览器加载 index.html
解析 <script type="module" src="/src/main.js">
执行 main.js，创建 Vue 应用
将 App.vue 渲染到 <div id="app"> 中
所有页面、组件通过路由切换，最终都显示在这个容器中

main.js

main.js 是一个 Vue 项目的入口文件，它的作用就像是整个应用的“启动脚本”。把所有的插件、全局配置、组件和页面结构组织起来，然后把整个应用“挂载”到网页上运行。

也就是说，main.js 的作用是 创建 Vue 应用实例，并加载插件、全局配置、根组件，最后挂载到页面上运行。

一般它做的事有：

引入根组件 App.vue，创建vue实例

import { createApp } from 'vue'
const app = createApp(App)

引入和启用插件

路由（vue-router）
状态管理（pinia 或 vuex）
UI 框架（Element Plus、Ant Design 等）
自定义指令、自定义插件

import {createApp} from 'vue'
import {createPinia} from 'pinia'
import ElementPlus from 'element-plus'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import 'element-plus/theme-chalk/dark/css-vars.css'
import App from './App.vue'
import router from './router'
import "animate.css";
import Directives from './directives/index'
import setting from "@/setting.js";
import utilLog from "@/utils/util.log.js";

注册全局组件（比如图标）

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

ElementPlusIconsVue 是一个包含所有图标组件的对象：

{
  Edit: [Vue组件],
  Delete: [Vue组件],
  Plus: [Vue组件],
  ... // 还有很多图标
}

Object.entries(...) 会把对象变成一个个 [key, value] 的数组，比如：

[['Edit', EditComponent], ['Delete', DeleteComponent], ...]

for (const [key, component] of ...) 是在遍历每一个图标组件
app.component(key, component) 的作用是：

把每个图标注册为全局组件，比如 app.component('Edit', EditComponent)，这样你就可以在模板里直接用 <Edit /> 了。

你使用了这一段代码后，页面就可以这样写：

<template>
  <Edit />
  <Delete />
  <Plus />
</template>

不需要每次都 import { Edit } from '@element-plus/icons-vue' 了。

在vue中注册各种插件和配置项

app.use(Directives);
app.use(router)
app.use(createPinia())
app.use(ElementPlus, {size: setting.theme.size})

app.use(router)：启用 Vue Router 路由系统。

router 是通过 vue-router 配置好的路由对象。这让你的应用支持多页面跳转、嵌套路由、动态路由等功能。

app.use(createPinia())：启用 Pinia 状态管理系统。

Pinia 是 Vue 推荐的状态管理库（比 Vuex 更简单）。 createPinia() 创建一个状态管理容器，传给 app.use(...) 后，全局就可以使用 store 了。

app.use(ElementPlus, { size: setting.theme.size })：启用 Element Plus UI 框架，并设置全局默认大小

ElementPlus 是一套 UI 组件库（按钮、表单、弹窗等）

{ size: setting.theme.size } 设置了全局组件大小（如 'small', 'default', 'large'）

setting.theme.size 是从配置文件读取的，可能根据用户配置决定大小。

utilLog.capsule('ZYAdmin', `欢迎使用${setting.websiteInfo.name}，当前版本:${setting.websiteInfo.version}`)
utilLog.capsule('作者主页', 'https://gitee.com/Z568_568', 'success')

utilLog 是一个工具对象，专门用来打印日志（很可能是你项目里 utils/log.js 之类的文件）。
.capsule(...) 是它封装的一个方法，作用是：用“胶囊样式”打印出一段美观的控制台信息。

挂载应用到页面

app.mount("#app")

index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4123035_9zyjilfa6s8.css">
    <title>ZHOUYI</title>
</head>
<body>
<div id="app">
</div>
<script type="module" src="/src/main.js"></script>
</body>
</html>

类比理解（just类比）

Java 项目	Vue 项目
`main()` 方法	`main.js` 文件
Spring Boot 启动类	Vue 应用创建语句
`@Bean`、配置注册等	`app.use(...)` 插件注册
启动项目监听端口	`app.mount('#app')` 把 Vue 挂载到页面