vue3 demo教程（Vue Devtools）

文章目录

[浏览器 = 地址解析 + 请求发送 + 内容解释器](#浏览器 = 地址解析 + 请求发送 + 内容解释器)
- 浏览器能理解和执行的东西
安装volta管理node.js版本
- [1、安装node,会自动安装npm, volta install node@20](#1、安装node,会自动安装npm, volta install node@20)
- 2、新建项目
- - vite形式
  - - [vite 形式 npm create vite 不是启动项目，而是"生成项目模板"的命令](#vite 形式 npm create vite 不是启动项目，而是“生成项目模板”的命令)
    - - [npm create vite@latest vue3-demo](#npm create vite@latest vue3-demo)
        
        [npm create vite@latest vue3-demo --template vue](#npm create vite@latest vue3-demo --template vue)
        
        总结
    - 进入项目目录,安装依赖
    - [npm run dev](#npm run dev)
  - [vue cli形式](#vue cli形式)
  - - [vue create vue-cli-demo](#vue create vue-cli-demo)
    - [npm run serve](#npm run serve)
    - - [Node.js 启动 HTTP 服务（8080](#Node.js 启动 HTTP 服务（8080)
      - 项目里所有"浏览器不能直接执行的东西"，都会被转换
      - [浏览器输入 http://localhost:8080](#浏览器输入 http://localhost:8080)
      - vue启动的服务器只在页面加载阶段提供代码，之后浏览器独立工作
      - [Vue CLI dev server 返回前端资源](#Vue CLI dev server 返回前端资源)
      - 浏览器解析内容
vue
- 数据流
- - [用户 → 浏览器 → 本地 Vue 开发服务器 → 浏览器 → 页面显示](#用户 → 浏览器 → 本地 Vue 开发服务器 → 浏览器 → 页面显示)
  - [用户点击按钮 → 浏览器中的 Vue → 后端 API → Vue → 浏览器 → 用户看到数据](#用户点击按钮 → 浏览器中的 Vue → 后端 API → Vue → 浏览器 → 用户看到数据)
  - - [Vue 服务器只负责"把 Vue 应用的代码送给浏览器"，后续浏览器独立执行](#Vue 服务器只负责“把 Vue 应用的代码送给浏览器”，后续浏览器独立执行)
[Vue Devtools](#Vue Devtools)

浏览器 = 地址解析 + 请求发送 + 内容解释器

网址只是告诉浏览器："你要去哪里、怎么问"。浏览器的职责是：解析网址，知道去哪里要东西。按规则把要来的内容解析并呈现出来

浏览器能理解和执行的东西

安装volta管理node.js版本

https://blog.csdn.net/qq_37891604/article/details/156774200

1、安装node,会自动安装npm, volta install node@20

2、新建项目

vite形式

vite 形式 npm create vite 不是启动项目，而是"生成项目模板"的命令

npm create vite@latest vue3-demo

npm create vite@latest vue3-demo --template vue

总结

进入项目目录,安装依赖

npm run dev

vue cli形式

vue create vue-cli-demo

修改app.vue

vue 复制代码

<template>
  <div>
    <h1>Vue CLI Demo</h1>

    <!-- 用户操作 -->
    <button @click="loadMessage">点我加载一句话</button>

    /*
      绑定到页面
      {{ message }} 就是把储藏室里的 message 放到网页上显示。
      当你更新 message，网页上显示的内容会自动跟着变化
    */
    <!-- 页面展示 -->
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  /*
  data

  就是你网页里可以变化的"数据储藏室"。

  你定义 message: '还没加载'，就是在储藏室里放了一个初始值
  */
  data() {
    return {
      message: '还没加载'
    }
  },
  methods: {
    async loadMessage() {
      // 向"后端"发请求
      // fetch() 是浏览器提供的"网络请求工具
      // await 的意思是：等服务器回应再继续下面的操作
      const res = await fetch('https://api.chucknorris.io/jokes/random')
      const data = await res.json()

      // 更新数据
      this.message = data.value
    }
  }
}
</script>