2.从0开始搭建vue项目(node.js,vue3,Ts,ES6)

从"0到跑起来一个 Vue 项目",重点是各个工具之间的关联关系、职责边界和技术演化脉络。

从你写代码 → 到代码能跑起来 → 再到代码可以部署上线,每一步都有不同的工具参与。

😺😺1. 安装 Node.js ------ 万事的根基

Node.js 是 JS 的运行环境,它让 JS 能在浏览器之外运行,等于一个"JS版的JVM"。

💡 它的作用:

• 内置 V8 引擎(谷歌开发),能把 JS/TS 编译成机器码执行。

• 内置 npm(包管理器),让你方便安装和管理各种依赖(例如 axios、vue)。

• 是很多前端工具(如 Vite、Webpack、ESLint、TS 编译器)的"运行底座"。

为什么不是浏览器来跑?

因为开发阶段你写的很多东西(比如 TypeScript、Vue 组件)浏览器不认识,得先通过 Node.js 环境来"预处理"、打包、转译。

😺😺 2. 使用 npm/yarn/pnpm ------ 下载各种依赖库

你需要别人写好的工具,npm 就是你下载这些工具的"快递小哥"。

比如你需要:

• vue:前端框架

• axios:发请求

• vite:构建工具

• typescript:编译 TS

你可以一行命令:

npm install vue axios vite typescript

npm 会帮你从网上(npm registry)拉取这些库及其依赖,统一放到 node_modules 目录中,并更新 package.json 文件。

😺😺 3. 初始化项目结构(通常使用 Vite 脚手架)

npm create vite@latest my-app

cd my-app

npm install

Vite 会给你搭好一个包含:

• 项目结构(src、public、vite.config.ts)

• Vue 支持(通过插件)

• TypeScript 支持

• 热更新配置

• ESM 模块支持

👉 这一步相当于"让项目有个基本形态"。

😺😺 4. 使用 Vite 运行开发环境

npm run dev

你会看到:

vite v5.0 dev server running at http://localhost:5173

这是 Vite 的"开发服务器"。但它背后做了很多事:

Vite 的作用(核心):

• 用 Node.js 启动自己(Vite 是 Node 工具)

• 在后台用 ESBuild 和 Rollup 编译项目代码(把 TS 编译成 JS、把 Vue 编译成普通模块)

• 实现浏览器原生支持的 ES Module 动态加载

• 实现 热更新(改一行代码自动刷新)

😺😺 5. Vue 框架登场:帮你写页面 + 构建交互

你最终写的,是 .vue 文件。

这里你用到了 Vue 的核心能力:

• ref() 和 reactive() 是 Vue 响应式系统(Proxy)创建的响应对象

• 会被 Vue 编译器转换为 h() 函数(虚拟 DOM)

Vue 的职责是:

• 帮你封装组件、渲染视图、处理状态更新

• 用响应式让 UI 和数据双向绑定

• 在构建阶段(由 Vite 驱动)把 .vue 文件变成纯 JS 模块供浏览器运行

😺😺6.TS和Es6语法

ES6

• 由 ECMAScript 标准组织提出。

• 提供了 let/const、箭头函数、解构、import/export 等写法。

• 需要 浏览器或 Node.js 支持 ES6,或者通过构建工具(如 Vite)转译成老版本 JS(比如 ES5)才能运行。

所以,ES6 本身不能"运行"代码,只是你写代码时用的一套规则。

TypeScript 是 JavaScript 的超集

• 加了类型系统,写起来更安全。

• 不能被浏览器或 Node.js 直接运行,必须先"编译成 JS"。

• 常和 Vite/Webpack/Babel 配合使用,最终输出纯 JS 文件。

TS 就像你写作文时加了一些注释,交稿前要删掉注释再打印出来。运行的永远是 JS。

😺😺7. 构建生产环境代码

开发完毕后,你执行:

npm run build

这时:

• Vite 会用 Rollup 把所有模块打包成一堆 JS 文件(按需拆分)

• 把 TS 编译成 JS

• 把 Vue 模板编译为 DOM 操作

• 压缩、混淆、优化体积

生成 /dist 目录,浏览器就能直接部署这些文件上线了。

🎯 整体技术链图谱总结(关系+流向)


😺😺😺小总结

Node.js 提供运行环境,npm 负责安装依赖。

Vite 是中间桥梁,把 Vue + TS + ES6 编译打包好。vue是一个框架,帮你封装组件,渲染视图,处理状态,用响应式让ui和数据双向绑定。在构建阶段 由vite驱动,把.vue变成.js在浏览器运行。开发中还会用到很多工具库,axios、vue-router、vant 等依赖,都是运行时需要的工具库,由 npm 统一管理。

下一篇 3.详细学习一下node.js的特性和底层原理

下一篇 4.vue.js的特性和底层原理,vue2 vue3的对比。

相关推荐
影子信息31 分钟前
vue 前端动态导入文件 import.meta.glob
前端·javascript·vue.js
青阳流月32 分钟前
1.vue权衡的艺术
前端·vue.js·开源
RunsenLIu34 分钟前
基于Vue.js + Node.js + MySQL实现的图书销售管理系统
vue.js·mysql·node.js
样子201836 分钟前
Vue3 之dialog弹框简单制作
前端·javascript·vue.js·前端框架·ecmascript
kevin_水滴石穿37 分钟前
Vue 中报错 TypeError: crypto$2.getRandomValues is not a function
前端·javascript·vue.js
翻滚吧键盘38 分钟前
vue文本插值
javascript·vue.js·ecmascript
华子w90892585939 分钟前
基于 SpringBoot+Vue.js+ElementUI 的 “花开富贵“ 花园管理系统设计与实现7000字论文
vue.js·spring boot·elementui
Allen_zx3 小时前
Elpis - 基于 Koa + Vue3 的企业级全栈应用框架
node.js
老家的回忆3 小时前
jsPDF和html2canvas生成pdf,组件用的elementplus,亲测30多页,20s实现
前端·vue.js·pdf·html2canvas·jspdf
鹏程3 小时前
局域网下五子棋,html+node.js实现
node.js·html