引言

Vue.js 是一款流行的前端JavaScript框架，它可以帮助开发者构建用户界面和单页应用。本篇文章将带您从零开始，使用 Visual Studio Code（VSCode）搭建一个简单的 Vue 项目，并创建一个 “Hello World” 应用程序。

准备工作

在开始之前，请确保您已经安装了以下软件：

  • Node.js：Vue.js 的构建工具需要 Node.js 环境。
  • npm：Node.js 的包管理器。
  • Visual Studio Code：一个轻量级的代码编辑器，非常适合前端开发。

安装 Vue CLI

Vue CLI 是一个官方命令行工具，用于快速搭建 Vue.js 项目。以下是如何安装 Vue CLI 的步骤：

  1. 打开终端（在 macOS 或 Linux 上）或命令提示符（在 Windows 上）。
  2. 输入以下命令安装 Vue CLI：
npm install -g @vue/cli
  1. 确认安装成功：
vue --version

创建 Vue 项目

  1. 打开 VSCode。
  2. 打开终端。
  3. 输入以下命令创建一个新的 Vue 项目：
vue create my-first-vue-app
  1. 等待项目创建完成。在创建过程中，Vue CLI 会询问您一些配置选项。以下是推荐的配置：
  • Manually select features：选择手动选择功能。
  • Babel：使用 Babel。
  • TypeScript：否。
  • Progressive Web App (PWA)：否。
  • Router：否。
  • Vuex：否。
  • CSS Pre-processors：选择 Sass。
  • Linter / Formatter：选择 ESLint。
  • Unit Testing：选择 Jest。
  • E2E Testing：否。
  1. 安装项目依赖：
cd my-first-vue-app
npm install

配置 VSCode

  1. 打开 my-first-vue-app 文件夹。
  2. 在 VSCode 中打开项目。

现在，您应该已经有一个基本的 Vue 项目环境了。

创建 Hello World 应用

  1. 在 VSCode 中，打开 src/App.vue 文件。
  2. 替换文件内容为以下代码：
<template>
  <div id="app">
    <h1>Hello World!</h1>
  </div>
</template>

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

<style>
#app {
  text-align: center;
  margin-top: 60px;
}
</style>
  1. 保存文件。

运行项目

  1. 在终端中，运行以下命令启动开发服务器：
npm run serve
  1. 在浏览器中打开 http://localhost:8080/，您应该能看到 “Hello World!” 文字。

总结

通过以上步骤，您已经成功搭建了一个 Vue 项目，并创建了一个简单的 “Hello World” 应用。这只是 Vue 项目实战入门的第一步，接下来您可以继续学习 Vue 的更多功能和最佳实践。祝您学习愉快！