手把手打造您的第一个Vue3项目：Vue CLI指南

2023-12-30 12:02:31

Vue3 和 Vue CLI：开发卓越 Web 应用程序的终极指南

什么是 Vue3？

Vue3 是当今 JavaScript 框架领域一颗冉冉升起的新星，以其轻量级、高性能和易用性迅速赢得了开发人员的青睐。它采用了全新的体系结构，使代码更加模块化、易于维护，同时还引入了 Composition API 等新特性，显著提升了开发效率。

为什么使用 Vue CLI？

Vue CLI 是 Vue 官方推荐的脚手架工具，可助您快速创建新的 Vue 项目，并提供各种开箱即用的功能，例如热重载、构建工具和单元测试。使用 Vue CLI 可以节省大量时间和精力，让您专注于编写业务逻辑。

安装 Vue CLI

安装 Vue CLI 非常简单，只需在终端中运行以下命令：

npm install -g @vue/cli

创建 Vue3 项目

安装 Vue CLI 后，即可开始创建第一个 Vue3 项目了。在终端中输入以下命令：

vue create my-project

其中，my-project 为您要创建的项目名称。

在创建项目时，Vue CLI 会询问您是否要使用默认项目模板。默认模板包含了 Vue3 的基本配置，以及一些常用的组件和页面。如果您不熟悉 Vue3，建议使用默认模板。

运行项目

创建项目后，可以通过以下命令运行项目：

cd my-project
npm run serve

此时，项目将在本地服务器上启动。您可以在浏览器中输入 http://localhost:8080 访问项目。

构建项目

开发完成后，需要将项目构建成生产版本。可以通过以下命令进行构建：

npm run build

构建完成后，将在 dist 目录中生成生产版本的文件。您可以将这些文件部署到服务器上，让您的项目上线。

代码示例：

创建一个简单的 Vue3 组件，例如 MyComponent.vue：

<template>
  <h1>{{ message }}</h1>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue3!'
    }
  }
}
</script>

在 Vue3 项目中使用 Composition API，例如 useCounter.js：

import { ref } from 'vue'

export default function useCounter() {
  const count = ref(0)

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

  return {
    count,
    increment
  }
}