Vue3.0学习笔记

Posted on Edited on In ,

安装/更新新版cli

npm uninstall vue/cli -g
npm install @vue/cli -g
vue -V //@vue/cli 5.0.8

创建 Vue 3.0 项目

//被问及一些配置选项。你可以选择默认配置，也可以手动选择特性。确保选择 Vue 3.x 版本。
vue create travelnew

//进入项目目录并启动开发服务器
npm run serve

项目结构概览

travelnew/
├── node_modules/ # 项目依赖
├── public/ # 静态资源
│ └── index.html # 入口 HTML 文件
├── src/ # 源码目录
│ ├── assets/ # 资源文件（图片、CSS等）
│ ├── components/ # Vue 组件
│ ├── App.vue # 根组件
│ ├── main.js # 入口 JavaScript 文件
├── .gitignore # Git 忽略文件
├── babel.config.js # Babel 配置文件
├── package.json # 项目依赖和脚本
├── README.md # 项目说明
├── vue.config.js # Vue CLI 配置文件（可选）
└── yarn.lock # 依赖管理的锁定文件（如果使用 yarn）

了解 Composition API

Vue 3 引入了 Composition API，它提供了一种更灵活的方式来组合组件。以下是一个使用 Composition API 的基本示例：
在 src/components 目录下创建一个新的组件文件 Counter.vue：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  name: 'Counter',
  setup() {
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    return {
      count,
      increment,
    };
  },
};
</script>