【项目实战】基于Web创建系统管理平台（1）：环境准备与部署

【项目实战】基于Web创建系统管理平台（1）：环境准备与部署

目标：在该项目实战中，我们的目标的是创建属于自己的后台管理系统，主要是通过该项目熟悉HTML、CSS、JavaScript、Vue等前端需要的技术。本讲主要是学会配置环境，做好前期准备工作。

1.运行环境：VScode 点此处跳转官网下载，下载流程比较简单，这里不做赘述。下载完成后得到下图所示的环境界面：

2.安装node环境和npm（包管理器）。点此处跳转官网下载.一般地安装好node环境后会自动安装npm。这里安装步骤也比较简单，安装成功过后打开终端输入以下两条指令，已查看是否安装成功（没安装成功则注意环境变量的配置）。

node -v
npm -v

3.创建项目

在任意路径下新建文件夹，随后在终端中跳转到该文件夹（一定要跳转到在读者刚刚新建的文件夹中）所在的位置，输入

npm creat -v

(1)输入完成后首先是要输入项目名称，这个根据实际项目名称进行输入，输入完成后回车。
(2)随后是选择项目框架，这里我们选择Vue框架（键盘↑ ↓键选择），输入完成后回车。
(3)随后选择使用的语法，这里选择TypeScript（键盘↑ ↓键选择），输入完成后回车。
配置完成后，在读者刚刚建立的项目文件下会自动生成一些文件，如下图：

(4)通过终端进入上图文件夹的路径，下面我们安装一些依赖文件。输入

npm i

(5)运行刚刚建好的项目，还是刚刚那个路径下的终端，输入

npm run dev

得到下图所示结果

在浏览器中输入上图蓝色的网址（可以看到它运行在5173这个端口），得到一个初始化后的项目网页，如下图，则整个初始化工程配置成功。

4. 项目结构分析

将整个文件夹拖入到VSCode中打开，得到下图：

可以看到刚刚初始化的整个文件结构就在界面的左侧栏中显示，这里大致简介几个部分
(1)package.json:查看依赖版本及信息
(2)node_modules:存放项目需要的包依赖
(3)public:存放静态页面
(4)src:程序员写代码的核心区域，里面可以放各种组件