2024从零开始使用VSCode编程（动态页面技术栈简易版）技术介绍以及体验安装使用

npc码农

已于 2024-08-08 20:08:18 修改

阅读量882

点赞数 18

分类专栏： VSCode 前端开发文章标签： vscode html css node.js npm vue.js

于 2024-07-28 13:19:46 首次发布

本文链接：https://blog.csdn.net/ssrsrrn/article/details/140696528

版权

前端开发同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

VSCode

6 篇文章 0 订阅

订阅专栏

本文只为记录并帮助有需要的小伙伴学习使用VScode

注意：本教程发布于2024年7月，软件为win1.91，后续版本使用时也可参考

重点注意：此教程相较于上个教程跨度较大，涵盖技术栈相较于静态页面（HTML+CSS+JS）有所增加，请确保静态页面制作流程熟悉后再了解

⚠❗⚠❗⚠❗！！！！！！教程信息量较大！！！！！！！⚠❗⚠❗⚠❗

教程前言

本篇文章将带你初步体验关于前端动态页面的开发所用技术栈以及知识点，后续会有更加详细的技术使用介绍

动态页面

实时更新：页面的内容可以根据用户的输入、搜索、系统时间、数据变化等因素进行动态更新。例如，社交媒体网站的新闻动态、电子商务网站的库存信息等。
交互性：用户可以通过填写表单、点击按钮、选择选项等方式与页面进行交互，页面会根据用户的操作进行数据或页面的更新。例如，搜索引擎的搜索结果页面、在线表单的即时验证等。
后台数据交互：页面可以从服务器获取数据或将数据发送到服务器，从而进行动态更新。例如，用户登录后显示个性化内容、从数据库中提取最新数据等。
客户端脚本：使用JavaScript等脚本语言在客户端进行处理和更新。例如，AJAX（异步JavaScript和XML）技术可以实现页面部分内容的更新而不重新加载整个页面。
服务器端脚本：使用PHP、Python、Ruby等服务器端语言生成页面内容。例如，使用PHP生成包含最新新闻的页面、使用Python处理用户提交的表单数据并返回结果。

简单来说：动态页面就是数据动态，具备前后端交互能力

一、涵盖新技术栈：

1、axios（获取后端传来的数据）：

实现异步请求，从服务器获取数据而不重新加载整个页面。

2、前端框架和库（简化编程操作）：

Vue.js：用于构建用户界面的渐进式框架，双向数据绑定、Vuex状态管理。
React：同类型，暂不讲解
Angular：同类型，暂不讲解

注意：类似做衣服的布料，三个都是为了做衣服用的，不过是做不同的衣服的，个人建议学习Vue.js，但如果你是要制作大型项目的开发者请选择后两者学习

3、前端工具和构建工具（快捷添加开发工具）：

包管理器：如npm、Yarn，用于管理项目依赖。
构建工具：如Webpack、Parcel，用于打包、编译前端资源。（暂不讲解）
vite：提高效率的，个人认为非必要（暂不讲解）
Babel：提高效率的，个人认为非必要（暂不讲解）

二、涵盖新知识点

1、API和后端交互（规范前后端交互）：

RESTful API：与服务器进行数据交互的常见方式，使用HTTP动词（GET、POST、PUT、DELETE）操作资源。

注意：本知识点是用于规范开发的接口（API）的

2、数据处理和可视化（规范数据格式，获取处理数据）：

JSON：JavaScript对象表示法，用于数据交换格式。

技术栈一、Node.js前端工具和构建工具（快捷添加开发工具）：

首先，我个人推荐先学习使用Node.js，因为后续的其他技术栈可以使用Node.js的包管理工具npm快捷添加到ide中,以及当需要使用框架时，VSCode没在新建文件夹中集成快捷创建方式，所以需要安装脚手架来实现项目创建

Node.js的技术点多且复杂，这里我只说一些必要的，后续出一篇专门讲

Node.js安装

掌握 Node.js 后，你可以开发服务器端应用和 API，实现前后端协作。这种全栈开发能力在现代Web开发中非常有价值

此次安装演示版本为16.2（旧版）

点击进入首页：Node.js — 在任何地方运行 JavaScript (nodejs.org)https://nodejs.org/zh-cn

①首页点击关于

②进入页面点击Node.js版本

③下滑页面选择需要版本点击“发行版”（这里演示16.20.2版本）

④下载node.js的msi包（msi为安装包）

④下载完成点击打开文件

⑤进入安装界面单击Next

⑥勾选同意并点击Next

⑥选择要安装的位置（个人推荐不改安装位置，因为Node.js占用的空间大约为 100 MB 左右。）

点击Next

⑦进入自定义安装选项界面，默认Next下一步

⑧不勾选直接Next（勾选后会下载其他工具，这些工具对于前端来说不需要）

⑨点击Install完成安装

⑩点击Finish完成

安装情况检查

①开始菜单搜索cmd打开

②命令界面输入node -v（如果回车弹出版本号则表示安装成功）

③输入npm -v（如果回车弹出版本号则表示安装成功）

npm配置（Node Package Manager）：Node.js 的默认包管理器。

npm 是世界上最大的包管理器之一，有数以百万计的开源包和库，极大地促进了代码共享和复用。因为是node的默认包管理器，所以在安装时也会自动安装

注意默认情况下win系统npm全局安装的包放在以下位置（可以不做更改，因为占用空间不大）：

C:\Users\<Your-Username>\AppData\Roaming\npm
npm缓存文件放在以下位置：

C:\Users\<Your-Username>\AppData\Roaming\npm-cache

①更改npm的源

cmd打开命令行窗口，使用npm config get registry可查看当前配置的源

使用npm config set registry https://registry.npmmirror.com/将源更改为淘宝镜像源

CLI脚手架

工具在前端开发中是用来快速创建项目结构、配置文件和必要的依赖项的工具

①全局安装脚手架

因为需要管理员权限，所以直接点击“以管理员身份运行”

②输入npm install -g @vue/cli安装Vue脚手架

③检查安装是否成功

输入vue --version如果输出为版本号则表示安装成功

技术栈二、Vue前端框架和库（简化编程操作）：

使用方法一：（直接引入，适用于快速了解学习vue）

核心步骤

1、准备容器

2、引入包

3、创建vue实例new Vue()

4、指定配置项→渲染数据

①el指定挂载点

②data提供数据

<!-- 容器 -->
<div id="app">
{{msg}}
</div>
<!-- 引入包 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>

<!-- 创建vue实例 -->
<script>
    const app = new Vue({
//指定配置项
        el:'#app',
        data:{
            msg:"第一个vue"
        }
    })

</script>

使用方法二：（下载使用，适用于后期开发制作，后续讲解）

①在想要创建项目的目录下新建一个文件夹

②点击进入文件夹，并在路径栏输入cmd回车

③最开始界面会出现Generate project in current directory? (Y/n)

意思是，创建羡慕时会覆盖文件，直接输入y回车来到下面这个界面

以下界面中看个人选择，这里后续细讲，使用上下键移动选项选择Default ([Vue 2] babel, eslint)：

④输出以下代码表示成功

⑤使用代码code .使用VSCode打开项目（！！！注意界面不要退出等会还要用）

⑥项目大概长这样

目录结构大致如下

├── node_modules
├── public
├── src
├── .gitignore
├── babel.config.js
├── package.json
├── README.md
├── yarn.lock (如果使用 yarn)

技术栈三、axios(获取后端传来的数据)

axios是基于AJAX（异步JavaScript和XML）进行构建的，但它对AJAX进行了封装和扩展，使其更易用和功能更强大

使用方法一：（适用于简单的项目，前期学习使用）

1、在html的页面中引入axios.js：https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js

2、使axios函数

数据网址：https://api.xygeng.cn/one

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        //使用axios函数
        axios({
            //数据来源
            url:'https://api.xygeng.cn/one'
        }).then(result => {
            //控制台输出
            console.log(result)
        })
    </script>
</body>
</html>

使用方法二（适用于复杂项目，大多数开发者的选择，简单讲解）

①上述没关闭的界面继续使用代码npm install axios安装axios到项目

②运行完成后检查项目的 package.json 文件

如果存在类似这行代码则表示安装成功"axios":"版本号"

知识点一、JSON数据

是一种轻量级的数据交换格式。它易于人类阅读和编写，同时也易于机器解析和生成。JSON采用完全独立于编程语言的文本格式，但也使用了与编程语言（特别是JavaScript）相同的约定，这使得JSON在各类语言中都能方便地进行数据交换。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 显示数据的容器 -->
    <div id="content"></div>

    <!-- 引入Axios的库 -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        // 使用axios函数发送一个HTTP请求
        axios({
            url: 'https://api.xygeng.cn/one'
        })
        // 处理请求成功的结果
        .then(result => {
            // 拿数据
            const responseData = result.data;
            if (responseData.code === 200) {
                const text = responseData.data.text;
                const author = responseData.data.author;
                
                // 将数据显示在页面上
                document.getElementById('content').innerHTML = `
                    <p>${text}</p>
                    <p>-- ${author}</p>
                `;
            } else {
                console.error('Error in response code:', responseData.code);
            }
        })
        // 请求失败
        .catch(error => {
            console.error('Error fetching data:', error);
        });
    </script>
</body>
</html>

JSON 主要用于在客户端和服务器之间交换数据。在 Web 开发中，JSON 常用于通过 AJAX 调用或 RESTful API 获取数据并更新网页内容。