实训集成开发环境

Hello world

掌握集成开发环境的安装和部署

掌握项目的创建、架构、开发和发布流程

熟悉服务器的基本工作原理

熟悉数据请求 Fetch/Axios 的基本过程*

熟悉使用 Node.js 和 Express.js 搭建静态资源服务器的基本过程*

了解代码仓库和代码托管的基本应用*

编辑器 Vs Code 的安装和配置

浏览器 Chrome 的安装和配置

Node.js 的安装和使用

Hello world

.创建 - 使用学号创建项目，查看项目文件结构

.调整 - 删除默认的组件、样式，只保留最基本的结构

.开发 - 在根组件 App.vue 中使用一级标题 h1，创建 hello world

.调试 - 增加样式，如颜色、布局等或者其他内容并调试

.发布 - 发布项目，查看 dist 文件结构

.预览 - 使用 preview 或修改路由模式查看项目效果

.访问/获取数据并渲染*

静态资源服务器的搭建*【可使用自己熟悉的服务器环境】

5.1 部署服务器

.资源准备：数据和图片

.安装依赖：Express.js

.创建服务器脚本

.开启服务

5.2 使用服务

.直接使用图片

.fetch直接请求数据

.fetch 接口请求数据

.axios 接口请求数据

代码仓库和代码托管*

.注册 Github 或 Gitee

.创建仓库

.下载并安装 Git

.配置 Git 和您的仓库关联

.代码仓库 - 将项目推送到自己的代码仓库

静态资源服务器

.服务器代理

server: {
  proxy: {
    "/api": {
      target: "http://localhost:3000",
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/api/, ""),
    },
  },
},

.使用原生 fetch 请求

fetch('/api/get')
  .then(res => res.json())
  .then(data => {
    console.log(data)
  }
)

.使用 axios 请求

axios.get('/api/get')
  .then(data => {
    console.log(data)
  })

代码托管 - 请使用自己的仓库地址

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin url
git push -u origin main

如何创建服务器主页？

如何定制服务器主机和端口？

安装并使用 nodemon 依赖动态检测并更新服务

网络请求模拟 Postman 的安装和基本使用

使用 json-server 创建数据服务器

现场验收、课后提交实验报告

使用浏览器访问静态资源，如图片、视频、音频等

在开发环境中获取数据，如 JSON 数据

集成开发环境

IDE