【项目实战】基于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:程序员写代码的核心区域,里面可以放各种组件