脚手架工具的应用(前端和后端搭建)

前端

一、安装 Node.js 环境

使用npm下载镜像

查看镜像:npm config get registry

切换淘宝镜像:npm config set registry https://registry.npmmirror.com

还原镜像:npm config set registry https://registry.npmjs.org

二、使用 Vue.js 脚手架工具Vite

相比Vue CLI,Vite是一款更新的Vue.js脚手架工具。是下一代的前端工具链。

Vite本身并不像Vue CLI那样功能大而全,它只专注于提供基本构建的功能和开发服务器。因此Vite更加小巧迅捷,其开发服务器会比Vue CLI的开发服务器快10倍左右,这对开发者来说太重要了,开发服务器的响应速度直接会影响到开发者的编程体验和开发效率。对于非常大型的项目来说,可能会有成千上万个JavaScript模块,这时构建效率的速度差异就会非常明显。

创建Vite工程命令:npm create vite@latest

项目创建完之后,

cd到目标目录。然后npm install构建项目,最后npm run dev

这就是前端的目录结构。

后端

一、使用 Express 项目生成工具

基于 Node.js 平台,快速、开发、极简的 WEB 开发框架

首先需要安装一个脚手架工具来帮助创建Express项目。在终端执行如下指令来全局安装一个 Node.js 工具包:

npm install --g yo generator-express-no-stress-typescript

generator-express-no-stress-typescript是一款开源的适用于Express框架的脚手架工具,它会帮助我们生成一个集开发服务器、交互式文档、结构化日志等功能一体的Express项目。

创建一个Express下的 HelloWorld 项目:

yo express-no-stress-typescript 1-HelloWorld-backend

安装过程出现选项选默认,一路Enter过去就行

使用generator-express-no-stress-typescript脚手架会自动帮助我们生成API接口文档页面

接下来,cd到目标目录。然后npm install构建项目,最后npm run dev,后端就创建好了

相关推荐
2401_8784545326 分钟前
HTML和CSS的复习2
前端·css·html
We་ct34 分钟前
吃透现代CSS全技术体系
前端·css·css3·sass·postcss·预处理器
ZC跨境爬虫34 分钟前
跟着 MDN 学 HTML day_11:(语义化容器全站重构+独立CSS拆分+字体合规引入)
前端·css·ui·重构·html·edge浏览器
ZC跨境爬虫37 分钟前
跟着 MDN 学 HTML day_10:(超链接核心语法+路径规则)
前端·css·笔记·ui·html·edge浏览器
GISer_Jing40 分钟前
AI原生前端工程化进阶实践:从流式交互架构到端云协同全链路落地
前端·人工智能·后端·学习
被考核重击43 分钟前
Vue响应式原理(下)
前端·javascript·vue.js
ZC跨境爬虫9 小时前
跟着 MDN 学 HTML day_9:(信件语义标记)
前端·css·笔记·ui·html
前端老石人9 小时前
HTML 字符引用完全指南
开发语言·前端·html
幼儿园技术家10 小时前
前端如何设计权限系统(RBAC / ABAC)?
前端
前端摸鱼匠11 小时前
Vue 3 的v-bind合并行为:讲解v-bind与普通属性合并的规则
前端·javascript·vue.js·前端框架·ecmascript