Vue.js 3.x+Express全栈开发：从0到1打造商城项目最新章节_张益珲著

1.4　小结与上机练习

本章是准备章节，首先，介绍了一个完整的电商项目需要包含的功能模块，也介绍了完成这样一个完整项目所需要的技术栈。其次，在编程语言方面，我们首选TypeScript，TypeScript的诸多优势也非常适合大型项目的开发。Vue.js和Express是我们将选用的两个开发框架，电商项目的用户端和后台管理端将使用Vue.js来开发，服务后端将采用Express来开发，我们也对Vue.js和Express这两个框架进行了简单的介绍，并使用一些编辑器和脚手架工具来创建了基础的HelloWorld工程。最后，对前端和后端的HelloWorld工程做了拆解介绍，帮助读者更好地理解项目开发的流程。

现在，我们的准备工作已经完成，相信读者已经迫不及待地想要上手开发项目了。在开始前，请再回顾一下本章所介绍的核心内容，下面的问题或许可以帮助读者回忆。

思考1： Vue.js框架有怎样的特点？

提示： 可以从渐进式、小巧、迅捷等方面进行思考。

思考2： 使用单文件组件有什么优势，需要编译吗？

提示： 单文件组件是以vue为后缀的文件，需要编译成JavaScript代码才能最终使用。单文件组件有很多优势，例如可以更好地解耦逻辑、支持局部的CSS样式等。

思考3： 一个Express应用的架构是怎样的？

提示： Express应用通过中间件来构建逻辑管道，中间件的注册是有顺序的，我们可以将中间件分为逻辑处理中间件、路由中间件和异常捕获中间件等。

思考4： 开发Vue.js应用，我们通常可以使用什么脚手架？

提示： Vue CLI和Vite是两个流行的Vue脚手架工具，Vue CLI功能全，除了提供流程化的编译链工具外，还提供了插件管理、可视化的Web管理工具等。而Vite最大的特点是快——编译快，动态更新也快，更适合开发大型项目。

练习：请按以下步骤构建Vue.js+Express开发环境。

首先，确保已经安装了Node.js（版本12.0.0以上）。然后，可以使用npm（Node包管理器）来安装vite。

在命令行中运行以下命令：

     // 新建Vite工程
     npm create vite@latest

接着，根据终端的提示进行参数配置，这将创建一个包含Vue 3和Vite的新的前端项目。

对于后端，可使用Express框架。首先，需要在项目根目录下创建一个新的文件夹，例如“server”，然后在该文件夹下创建一个新的Node.js项目：

     cd server
     npm init -y

接着，安装Express：

     npm install express

现在，可以在server/index.js文件中编写服务器代码，例如：

     const express = require('express')
     const app = express()
     const port = 3000
     app.get('/', (req, res) => {
       res.send('Hello World!')
     })

     app.listen(port, () => {
       console.log(`Server listening at http://localhost:${port}`)
     })

最后，可以通过运行node server/index.js来启动服务器。

1.4 小结与上机练习

1.4　小结与上机练习