简介 | Vue.js (opens new window)

创建 Vue 项目

# node版本要求：20.19.0 || >=22.12.0
npm create vue@latest

目录说明

node_modules         # 项目依赖包（npm install 自动生成，不要手动修改）
public               # 静态资源目录（不会被打包处理，直接复制到最终产物）
src                  # 源代码目录（主要开发代码）

.gitignore           # Git 忽略规则（哪些文件不提交到仓库）
env.d.ts             # 环境变量类型声明（给 TypeScript 提示 import.meta.env 等）；vite已配置好常见的资源文件扩展名，通过此文件引入（vite/client）。

index.html           # 项目入口 HTML（Vite 会以此为入口）
package-lock.json    # 依赖版本锁定文件（保证团队安装一致）
package.json         # 项目配置文件（依赖、脚本、项目信息）

README.md            # 项目说明文档（使用说明、开发指南等）

tsconfig.app.json    # 应用代码的 TypeScript 配置
tsconfig.json        # TypeScript 主配置（基础配置/继承入口）
tsconfig.node.json   # Node 环境的 TS 配置（用于构建工具等）

vite.config.ts       # Vite 构建工具配置（插件、别名、打包规则等）

项目运行逻辑

index.html -> src/main.ts

import './assets/main.css'  // 引入静态资源
  
import { createApp } from 'vue'  // 引入 Vue
import App from './App.vue'  // 引入 App.vue 组件
  
createApp(App).mount('#app') // 将App.vue组件挂载到index.html的#app元素

Vue 根页面 - App.vue

vite 通过 index.html + src/main.ts 引入 src/App.vue 作为 vue 的根页面

vue 页面一共有三个标签：

<script lang="ts">
// js or ts代码；注：ts兼容js，声明ts，但写js也是可以的。
</script>  
  
<template>
<!-- html -->
</template>  
  
<style>
/* 样式 */
</style>

Vue2 过渡 Vue3 语法

Vue2（Options API）风格

<script>
export default {
  // data() 返回的属性将会成为响应式的状态
  // 并且暴露在 `this` 上
  data() {
    return {
      count: 0
    }
  },

  // methods 是一些用来更改状态与触发更新的函数
  // 它们可以在模板中作为事件处理器绑定
  methods: {
    increment() {
      this.count++
    }
  },

  // 生命周期钩子会在组件生命周期的各个不同阶段被调用
  // 例如这个函数就会在组件挂载完成后被调用
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

Vue3（Composition API）风格兼容 Vue2

<script>
export default {
  data() {
    return {
      // count: 0
    }
  },
  methods: {
    // increment() {
    //   this.count++
    // }
  },
  mounted() {
    // console.log(`The initial count is ${this.count}.`)
  },
  setup(){
    let count = 0;
    function increment() {
      count++;
    }
    return {
      count,
      increment
    }
  }
}
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

Vue3（Composition API）风格

组合式 API 通常会与 <script setup> 搭配使用。这个 setup attribute 是一个标识，告诉 Vue 需要在编译时进行一些处理，让我们可以更简洁地使用组合式 API。比如， <script setup> 中的导入和顶层变量 / 函数都能够在模板中直接使用。

<script setup>
import { ref, onMounted } from 'vue'

// 响应式状态
const count = ref(0)

// 用来修改状态、触发更新的函数
function increment() {
  count.value++
}

// 生命周期钩子
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

模板语法

模板语法 | Vue.js (opens new window)

响应式数据

响应式基础 | Vue.js (opens new window)

基本、对象类型 - ref ()

需要响应式的数据（基本类型），使用 ref() 定义；

import { ref } from 'vue'

const count = ref(0)

console.log(count) // { value: 0 }
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

• 模板读值时 { count } ，无需 count.value ；
• 方法改值时需要 count.value++ ；

对象类型 - reactive ()

Tip

只能定义对象类型

import { reactive } from 'vue'

const state = reactive({ count: 0 })

模板使用：

<button @click="state.count++">
  {{ state.count }}
</button>

生命周期