前端学习笔记（实战准备篇）——用vite构建一个项目【吐血整理】

一、环境准备

[1.安装 Node.js](#1.安装 Node.js)

[2. 使用 Vite 创建项目](#2. 使用 Vite 创建项目)

[3. 安装项目依赖-生成node_modules文件夹+package-lock.json+下载代码包](#3. 安装项目依赖-生成node_modules文件夹+package-lock.json+下载代码包)

[4. 安装 Element Plus](#4. 安装 Element Plus)

[5.安装vs code](#5.安装vs code)

二、打开工程

1.开始编程

[2.引入 Element Plus](#2.引入 Element Plus)

[3. 使用 Element Plus 组件测试](#3. 使用 Element Plus 组件测试)

[4. 运行项目](#4. 运行项目)

已电脑为纯净环境为例，如已安装可略过

一、环境准备

1.安装 Node.js

首先需要安装 Node.js。

下载地址 ：

• 官方：https://nodejs.org/ （下载 LTS 版本）

• 淘宝镜像：https://npmmirror.com/ （国内推荐）

双击安装包，一路默认安装即可（安装程序会自动把 node 和 npm 添加到系统 PATH）。

安装完成后，打开命令行（Windows 搜索 cmd 或 PowerShell，Mac 打开 终端），输入以下命令验证是否成功：

验证安装：v或者version皆可

bash 复制代码

# 打开终端/命令提示符
node --version
npm --version
node -v
npm -v

2. 使用 Vite 创建项目

创建有两种方式：

1、在命令行中，进入你想存放项目的文件夹（例如 cd Desktop）

2、打开想存放项目的文件夹中，点击路径框，输入cmd回车

在cmd中输入，然后运行：

bash 复制代码

npm create vite@latest

命令执行后，会提示输入项目名称，例如输入 my-vue-app。
接下来选择框架：使用键盘上下键选择 Vue，回车。
然后选择语言变体：选择 TypeScript，回车。

Vite 会自动生成项目模板。

当你运行 npm run dev 或类似命令启动 Vite 项目时，通常会看到这段提示。

它代表的意思如下：

➜ Local: http://localhost:5173/

含义：本地访问地址。
说明：服务器已经在你的电脑上成功运行。你可以在本机的浏览器地址栏输入 http://localhost:5173 或者 http：//127.0.0.1：5173 来打开并查看你的项目网页。
5173：这是 Vite 默认的端口号。如果 5173 被占用，它可能会自动切换到 5174，以此类推。

➜ Network： use --host to expose

含义：网络访问地址（当前不可用）。
说明：这表示当前只能在本机访问 这个项目。如果你想在同一个局域网内的其他设备上访问（比如用手机访问测试，或者让同事在你的电脑上看效果），你需要停止服务器，然后加上 --host 参数重新启动。
- 启动命令示例：npm run dev -- --host 或者 vite --host
- 启动成功后，这个地方会变成一个 IP 地址（例如：http：//192.168.1.5：5173），局域网内的其他人就可以用这个地址访问你的项目了。

➜ press h + enter to show help

含义：按下 h 键然后按回车（Enter），可以显示帮助菜单。
说明：这是 Vite 提供的一个交互式快捷键。在运行着该服务器的终端窗口里，输入 h 并回车，终端会列出其他可用的快捷键，比如：
- r + 回车：重启服务器
- u + 回车：显示服务器地址
- o + 回车：在浏览器中打开项目
- q + 回车：停止服务器

这段提示的意思是：你的前端项目已经启动成功了！ 直接打开浏览器访问 http：//localhost：5173 就可以看到页面了。

3. 安装项目依赖-生成node_modules文件夹+package-lock.json+下载代码包

进入项目文件夹：

bash 复制代码

cd my-vue-app

安装基础依赖：

bash 复制代码

npm install

📍可以在cmd中或vs code中安装依赖：

1.VS Code 终端（推荐）

位置：VS Code 底部或顶部的视图 → 终端
快捷键 ：Ctrl + `（反引号）
优点：边写代码边操作，不用切换窗口
使用方式：直接输入 `npm install` 然后回车

如果在输入后报错

这是因为Windows 系统为了安全考虑，默认禁止了 PowerShell 运行脚本。一劳永逸的办法修改PowerShell的执行策略

以管理员身份打开 PowerShell
- 点击电脑左下角的"开始"菜单（或按 Windows 键）。
- 直接输入 PowerShell。
- 在搜索结果中，会看到 "Windows PowerShell" 。右键点击它，选择 "以管理员身份运行"。
- （如果弹出用户账户控制提示，点击"是"即可）。
输入设置命令
- 在跳出的蓝色命令行窗口里，复制下面的命令，然后右键点击窗口空白处 （或者按 Ctrl+V）粘贴进去，最后按回车键执行：

bash 复制代码

Set-ExecutionPolicy RemoteSigned -Scope CurrentUser

2. **命令提示符（CMD）

打开方式 ：Win + R → 输入 `cmd` → 回车
注意：需要先切换到你的项目文件夹
切换命令：cd 你的项目路径

bash 复制代码

 cd C：\Users\你的用户名\Desktop\my-project

📦 npm install 的主要作用

`npm install`（简写：`npm i`）是 Node.js 包管理器的安装命令，它的核心作用是：

1. 安装项目依赖

当你从 GitHub 或其他地方下载一个前端项目后，通常**没有** `node_modules` 文件夹（这个文件夹很大，一般不会上传）。运行 `npm install` 会根据项目中的 `package.json` 文件，自动下载该项目需要的所有依赖包。

2. 具体会安装什么？

生产依赖 （dependencies）：项目运行必需的包，比如 Vue、React、Axios 等
开发依赖（devDependencies）：开发阶段用的工具，比如 Vite、Webpack、ESLint 等

3. 什么时候需要运行？

✅ 必须运行的情况 ：

刚克隆（clone）或下载了一个新项目
项目提示 `Cannot find module 'xxx'`（找不到模块）
更新了 `package.json` 中的依赖版本

❌ 不需要运行的情况 ：

项目已经有 `node_modules` 文件夹（通常不会，因为太大）
你只是修改了自己的代码，没有添加新依赖

💡 新手常见问题

Q：为什么不能直接在桌面或 C 盘根目录运行？

A：必须在项目根目录 运行，也就是包含 `package.json ` 文件的文件夹里。否则会报错：`No package.json found`。

如何确认是否正确：

在终端输入 `dir` （Windows）或 `ls `（Mac），能看到 `package.json` 这个文件，就说明位置对了。

Q：运行后发生了什么？

创建一个 `node_modules` 文件夹（存放所有依赖）
创建一个 `package-lock.json ` 文件（锁定版本，保证团队环境一致）
下载所有项目需要的代码包

Q：安装很慢怎么办？

可以换成淘宝镜像源：

bash 复制代码

npm config set registry https：//registry.npmmirror.com

4. 安装 Element Plus

Element Plus 是 Vue 3 的 UI 组件库。在项目目录下执行：

bash 复制代码

npm install element-plus

如果需要使用 Element Plus 的图标，可以一并安装：

bash 复制代码

npm install @element-plus/icons-vue

5.安装vs code

在官网下载vs code

code.visualstudio.com

VS Code 的终端支持多种 shell（如 PowerShell、CMD、Git Bash 等），你可以通过终端右上角的下拉菜单切换。

当电脑安装vs code和node.js后，可在vs code的终端中直接键入执行命令

二、打开工程

安装完毕后，点击打开刚才创建的项目文件夹，文件目录即创建完毕

1.开始编程

修改 src/App.vue，保存更改，右侧可实时看到页面变化

2.引入 Element Plus

编辑项目中的 src/main.ts 文件，完整引入 Element Plus 和样式：

TypeScript 复制代码

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

// 引入 Element Plus 和样式
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

如果安装了图标库，还可以全局注册图标（可选）

TypeScript 复制代码

import * as ElementPlusIconsVue from '@element-plus/icons-vue'

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

3. 使用 Element Plus 组件测试

修改 src/App.vue，替换为以下简单示例：

TypeScript 复制代码

<template>
  <el-button type="primary">Hello Element Plus</el-button>
</template>

<script setup lang="ts">
// 无需额外代码
</script>

<style scoped>
/* 可选样式 */
</style>

4. 运行项目

在vs code 终端输入:

bash 复制代码

npm run dev

看到输出 Local: http://localhost:****/ 后，vs code可直接查看或打开浏览器访问该地址，就能看到带 Element Plus 按钮的页面了。

接下来就可以开始编程练习尝试了！