【前端后端环境】

学习视频【带小白做毕设02】从0开始手把手带你做Vue框架的快速搭建以及项目工程的讲解

C:\Users\Again>java -version
java version "21.0.1" 2023-10-17 LTS
Java(TM) SE Runtime Environment (build 21.0.1+12-LTS-29)
Java HotSpot(TM) 64-Bit Server VM (build 21.0.1+12-LTS-29, mixed mode, sharing)C:\Users\Again>javac -version
javac 21.0.1C:\Users\Again>node -v
v20.18.1C:\Users\Again>npm -v
10.8.2C:\Users\Again>git --version
git version 2.47.1.windows.2C:\Users\Again>python --version
Python 3.11.5
C:\Users\Again>mysql --version
mysql  Ver 8.0.28 for Win64 on x86_64 (MySQL Community Server - GPL)C:\Users\Again>mvn -v
Apache Maven 3.9.9 (8e8579a9e76f7d015ee5ec7bfcdc97d260186937)
Maven home: D:\apache-maven-3.9.9-bin\apache-maven-3.9.9
Java version: 21.0.1, vendor: Oracle Corporation, runtime: C:\Program Files\Java\jdk-21
Default locale: zh_CN, platform encoding: UTF-8
OS name: "windows 11", version: "10.0", arch: "amd64", family: "windows"

我的开发环境配置全记录（2025年更新）

记录当前主力开发机的软件配置，方便日后回溯和团队共享环境。

核心开发工具

Java 生态系统

• JDK 21.0.1 LTS (Oracle HotSpot)
  用途：Java/Spring后端开发、JVM系语言运行环境
  特点：长期支持版本，含G1 GC优化和新特性预览
• Apache Maven 3.9.9
  用途：Java项目构建依赖管理
  配置：自定义本地仓库路径（显示为Windows路径）

JavaScript/Node.js 体系

• Node.js v20.18.1 (Current)
  用途：前端工程化、服务端JavaScript运行时
• npm 10.8.2
  配套：新版扁平化依赖树结构

数据库工具

• MySQL 8.0.28 Community Edition
  用途：关系型数据库服务
  注意：Win64原生支持，含窗口函数等高级特性

辅助工具链

版本控制

• Git 2.47.1 (Windows版)
  配置：已识别为Windows 11平台

脚本语言

• Python 3.11.5
  用途：自动化脚本/机器学习辅助

环境详情

# 系统基础信息
OS: Windows 11 (10.0) 64位
Locale: zh_CN.UTF-8# 验证命令（与博文开头输出一致）
java -version
javac -version
node -v
npm -v
git --version
python --version
mysql --version
mvn -v

配置建议

1. 版本控制：建议将JDK和Node.js版本通过.nvmrc/.sdkmanrc管理
2. MySQL升级：当前8.0.28可考虑升级到最新8.0.x获得安全更新
3. 环境变量：确认JAVA_HOME=C:\Program Files\Java\jdk-21已配置

小技巧：使用mvn -v可快速验证JAVA_HOME配置是否正确

---

Vue.js 的安装步骤

Vue CLI 是官方提供的脚手架工具，可快速搭建标准化项目结构。

Microsoft Windows [版本 10.0.26100.4061]
(c) Microsoft Corporation。保留所有权利。C:\Users\Again>node -v
v20.18.1C:\Users\Again>npm -v
10.8.2C:\Users\Again>npm install -g @vue/cli
npm error code CERT_HAS_EXPIRED
npm error errno CERT_HAS_EXPIRED
npm error request to https://registry.npm.taobao.org/@vue%2fcli failed, reason: certificate has expired
npm error A complete log of this run can be found in: C:\Users\Again\AppData\Local\npm-cache\_logs\2025-06-01T01_49_45_231Z-debug-0.logC:\Users\Again>npm config set registry https://registry.npmjs.orgC:\Users\Again>npm install -g @vue/cli
npm warn deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm warn deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm warn deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm warn deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm warn deprecated rimraf@2.6.3: Rimraf versions prior to v4 are no longer supported
npm warn deprecated @babel/plugin-proposal-nullish-coalescing-operator@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-nullish-coalescing-operator instead.
npm warn deprecated @babel/plugin-proposal-class-properties@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead.
npm warn deprecated @babel/plugin-proposal-optional-chaining@7.21.0: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-chaining instead.
npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm warn deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
npm warn deprecated apollo-server-errors@3.3.1: The `apollo-server-errors` package is part of Apollo Server v2 and v3, which are now end-of-life (as of October 22nd 2023 and October 22nd 2024, respectively). This package's functionality is now found in the `@apollo/server` package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm warn deprecated apollo-reporting-protobuf@3.4.0: The `apollo-reporting-protobuf` package is part of Apollo Server v2 and v3, which are now end-of-life (as of October 22nd 2023 and October 22nd 2024, respectively). This package's functionality is now found in the `@apollo/usage-reporting-protobuf` package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm warn deprecated apollo-datasource@3.3.2: The `apollo-datasource` package is part of Apollo Server v2 and v3, which are now end-of-life (as of October 22nd 2023 and October 22nd 2024, respectively). See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm warn deprecated apollo-server-env@4.2.1: The `apollo-server-env` package is part of Apollo Server v2 and v3, which are now end-of-life (as of October 22nd 2023 and October 22nd 2024, respectively). This package's functionality is now found in the `@apollo/utils.fetcher` package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm warn deprecated apollo-server-plugin-base@3.7.2: The `apollo-server-plugin-base` package is part of Apollo Server v2 and v3, which are now end-of-life (as of October 22nd 2023 and October 22nd 2024, respectively). This package's functionality is now found in the `@apollo/server` package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm warn deprecated apollo-server-types@3.8.0: The `apollo-server-types` package is part of Apollo Server v2 and v3, which are now end-of-life (as of October 22nd 2023 and October 22nd 2024, respectively). This package's functionality is now found in the `@apollo/server` package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm warn deprecated subscriptions-transport-ws@0.11.0: The `subscriptions-transport-ws` package is no longer maintained. We recommend you use `graphql-ws` instead. For help migrating Apollo software to `graphql-ws`, see https://www.apollographql.com/docs/apollo-server/data/subscriptions/#switching-from-subscriptions-transport-ws    For general help using `graphql-ws`, see https://github.com/enisdenjo/graphql-ws/blob/master/README.md
npm warn deprecated apollo-server-core@3.13.0: The `apollo-server-core` package is part of Apollo Server v2 and v3, which are now end-of-life (as of October 22nd 2023 and October 22nd 2024, respectively). This package's functionality is now found in the `@apollo/server` package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm warn deprecated apollo-server-express@3.13.0: The `apollo-server-express` package is part of Apollo Server v2 and v3, which are now end-of-life (as of October 22nd 2023 and October 22nd 2024, respectively). This package's functionality is now found in the `@apollo/server` package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm warn deprecated vue@2.7.16: Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details.added 827 packages in 2mC:\Users\Again>vue creat vue
Usage: vue <command> [options]Options:-V, --version                              output the version number-h, --help                                 display help for commandCommands:create [options] <app-name>                create a new project powered by vue-cli-serviceadd [options] <plugin> [pluginOptions]     install a plugin and invoke its generator in an already created projectinvoke [options] <plugin> [pluginOptions]  invoke the generator of a plugin in an already created projectinspect [options] [paths...]               inspect the webpack config in a project with vue-cli-serviceserve                                      alias of "npm run serve" in the current projectbuild                                      alias of "npm run build" in the current projectui [options]                               start and open the vue-cli uiinit [options] <template> <app-name>       generate a project from a remote template (legacy API, requires@vue/cli-init)config [options] [value]                   inspect and modify the configoutdated [options]                         (experimental) check for outdated vue cli service / pluginsupgrade [options] [plugin-name]            (experimental) upgrade vue cli service / pluginsmigrate [options] [plugin-name]            (experimental) run migrator for an already-installed cli plugininfo                                       print debugging information about your environmenthelp [command]                             display help for commandRun vue <command> --help for detailed usage of given command.Unknown command creat.Did you mean create?C:\Users\Again>vue create vue
?  Your connection to the default npm registry seems to be slow.Use https://registry.npmmirror.com for faster installation? YesVue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Linter
? Choose a version of Vue.js that you want to start the project with3.x
> 2.x
C:\Users\Again>vue create vueVue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Linter
? Choose a version of Vue.js that you want to start the project with
> 3.x2.x
C:\Users\Again>vue create vueVue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? Yes
? Save preset as: default🎉  Preset default saved in C:\Users\Again\.vuercVue CLI v5.0.8
✨  Creating project in C:\Users\Again\vue.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...added 810 packages in 42s104 packages are looking for fundingrun `npm fund` for details
🚀  Invoking generators...
📦  Installing additional dependencies...added 6 packages in 4s104 packages are looking for fundingrun `npm fund` for details
⚓  Running completion hooks...📄  Generating README.md...🎉  Successfully created project vue.
👉  Get started with the following commands:$ cd vue$ npm run serveC:\Users\Again>cd vueC:\Users\Again\vue>npm run serve> vue@0.1.0 serve
> vue-cli-service serveINFO  Starting development server...DONE  Compiled successfully in 6108ms                                                                          10:23:52App running at:- Local:   http://localhost:8080/- Network: http://192.168.0.104:8080/Note that the development build is not optimized.To create a production build, run npm run build.

ctrl + 鼠标左键 点击 这个上面的链接 http://localhost:8080/

vue

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Customize configuration

See Configuration Reference.

以下是这段内容的中文翻译：

Vue 项目设置

npm install       # 安装项目依赖

开发环境编译及热重载

npm run serve     # 启动开发服务器

生产环境编译及压缩

npm run build     # 构建生产版本

自定义配置
请查看配置参考文档。

说明：

• npm install：安装项目所需的所有依赖包（基于 package.json 中的配置）。

package.json

  {"name": "vue","version": "0.1.0","private": true,"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build"},"dependencies": {"core-js": "^3.8.3","vue": "^2.6.14","vue-router": "^3.5.1"},"devDependencies": {"@vue/cli-plugin-babel": "~5.0.0","@vue/cli-plugin-router": "~5.0.0","@vue/cli-service": "~5.0.0","vue-template-compiler": "^2.6.14"},"browserslist": ["> 1%","last 2 versions","not dead"]
}

• npm run serve：启动本地开发服务器，支持代码热更新（修改文件后自动刷新页面），适用于开发阶段。
• npm run build：将项目代码打包为生产环境版本，会自动压缩代码并优化资源，输出文件位于 dist/ 目录。
• 配置参考：如需自定义webpack、Babel等配置，可通过创建 vue.config.js 文件实现，详见 Vue CLI 官方文档。

以下是对该Vue项目工程结构的介绍：

根目录相关文件

• .idea：这是IntelliJ IDEA等JetBrains系列IDE用于存储项目配置信息的目录，如项目设置、运行配置等，一般不需要手动修改，且版本控制时通常会将其添加到.gitignore中排除。
• node_modules：存放项目通过npm或yarn等包管理器安装的所有依赖包及模块，是项目运行依赖的基础，体积较大，版本控制时一般也会排除。
• package.json：项目的核心配置文件之一，记录项目基本信息（名称、版本、作者等），定义项目依赖（开发依赖和生产依赖），还包含各种脚本命令（如npm run serve 对应的启动命令等）。
• package - lock.json：锁定项目依赖的具体版本信息，确保团队成员安装的依赖版本一致，避免因依赖版本差异导致的问题。
• README.md：项目说明文档，用于向他人介绍项目功能、使用方法、安装步骤等重要信息。
• .gitignore：指定在使用Git进行版本控制时，哪些文件或目录不需要被追踪和提交，提升版本管理效率。
• babel.config.js：Babel配置文件，Babel用于将ES6+等新语法转换为浏览器能识别的旧语法，保证项目在不同浏览器环境下正常运行。
• jsconfig.json：用于为VSCode等编辑器提供JavaScript项目的配置信息，辅助代码智能提示、路径解析等功能。
• vue.config.js：Vue项目的自定义配置文件，可用于配置webpack相关设置、代理服务器、插件等，不配置时会使用默认配置。

public 目录

• favicon.ico：网站图标，在浏览器标签页、书签等位置显示，用于标识网站。
• index.html：项目的入口HTML文件，是浏览器加载的第一个页面，页面中会通过script标签引入打包后的JavaScript代码，link标签引入样式等。

src 目录（项目源码核心目录）

• assets：用于存放静态资源，如图片、字体、样式文件等。像logo.png就是项目中用到的图片资源，可在组件中通过相对路径引用。
• components：存放Vue组件的目录，组件是Vue项目构建UI的基本单元，可复用。HelloWorld.vue就是一个自定义组件，通常包含模板（HTML结构）、脚本（JavaScript逻辑）和样式（CSS样式）部分。
• router：路由相关配置目录。index.js文件一般用于定义路由规则，配置不同URL路径对应的组件渲染，实现单页面应用（SPA）的页面切换功能。
• views：存放视图组件的目录，视图组件一般是与路由对应的页面级组件，AboutView.vue和HomeView.vue分别对应关于页面和主页的组件。
• App.vue：项目的根组件，整个Vue应用从这里开始渲染，一般包含应用的整体布局结构，会引入其他子组件。
• main.js：项目的入口文件，主要作用是创建Vue实例，引入根组件App.vue，并挂载到index.html中的指定DOM元素上，同时也会进行一些全局配置，如引入路由、状态管理等。

安装 element

https://element.eleme.cn/#/zh-CN/component/installation

PS C:\Users\Again\vue> npm i element-ui -Sup to date, audited 826 packages in 3s104 packages are looking for fundingrun `npm fund` for details10 vulnerabilities (2 low, 8 moderate)To address issues that do not require attention, run:npm audit fixTo address all issues possible (including breaking changes), run:npm audit fix --forceSome issues need review, and may require choosing
a different dependency.Run `npm audit` for details.
PS C:\Users\Again\vue>