Vue3从入门到入土（2）创建Vue3工程

Vue.js 是一种用于构建用户界面的渐进式 JavaScript 框架，以其简单易用和强大的功能受到开发者的青睐。Vue 3 作为 Vue.js 的最新版本，带来了许多令人兴奋的新特性和改进。在这篇博客中，我们将介绍如何创建一个 Vue 3 工程，从安装工具到运行第一个 Vue 3 应用，帮助你快速上手。

一、安装 Node.js 和 npm

在开始之前，请确保你的电脑上已经安装了 Node.js 和 npm（Node 包管理器）。如果还没有安装，可以按照以下步骤进行安装：

1. 访问 Node.js 官方网站。

2. 下载适合你操作系统的安装包，并按照提示进行安装。

3. 安装完成后，可以通过终端或命令提示符输入以下命令，检查是否安装成功：

   node -v
   npm -v
   

二、安装 Vue CLI

Vue CLI 是 Vue.js 官方提供的脚手架工具，用于快速搭建 Vue.js 项目。安装 Vue CLI 非常简单，只需在终端或命令提示符中运行以下命令：

npm install -g @vue/cli

安装完成后，可以通过以下命令检查版本：

vue --version

三、创建 Vue 3 项目

使用 Vue CLI 创建一个 Vue 3 项目非常简单。只需运行以下命令，并按照提示进行操作：

vue create my-vue3-project

在命令执行过程中，Vue CLI 会询问你一些项目配置选项。你可以选择默认配置，也可以根据自己的需求进行自定义配置。以下是一些常见的配置选项：

• Babel
• TypeScript
• Progressive Web App (PWA) Support
• Router
• Vuex
• CSS Pre-processors
• Linter / Formatter
• Unit Testing
• E2E Testing

选择完配置选项后，Vue CLI 会自动生成项目文件，并安装依赖包。创建完成后，你可以进入项目目录：

cd my-vue3-project

四、运行 Vue 3 项目

进入项目目录后，可以通过以下命令启动开发服务器：

npm run serve

运行该命令后，开发服务器将启动，你可以在浏览器中打开 http://localhost:8080，看到默认的 Vue 3 应用界面。

五、项目结构介绍

新创建的 Vue 3 项目包含以下基本文件和目录：

• public/：用于存放静态资源，如 index.html。
• src/：用于存放源代码，包括组件、路由、状态管理等。
  • assets/：存放静态资源，如图片、样式等。
  • components/：存放 Vue 组件。
  • App.vue：根组件。
  • main.js：项目入口文件。
• package.json：项目配置文件，包含项目依赖和脚本命令。

六、编写第一个 Vue 3 组件

在 src/components/ 目录下创建一个新的 Vue 组件，例如 HelloWorld.vue：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<style scoped>
.hello {
  text-align: center;
  margin-top: 40px;
}
</style>

在 App.vue 中引入并使用这个组件：

<template>
  <div id="app">
    <HelloWorld msg="Welcome to Your Vue 3 App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

保存文件后，浏览器中将显示新的组件内容。

结语

通过以上步骤，你已经成功创建了一个 Vue 3 工程，并编写了第一个 Vue 组件。Vue 3 提供了强大的功能和灵活的 API，可以帮助你构建复杂的 Web 应用程序。希望这篇博客能够帮助你快速上手 Vue 3，开启你的前端开发之旅。