设置您的第一个 Vue.js 项目

Vue.js 是一个用于构建用户界面和单页应用程序的渐进式 JavaScript 框架。它非常灵活，易于与其他库或现有项目集成。本指南将引导您完成使用 Vue CLI（一种用于搭建和管理 Vue 应用程序的强大工具）设置您的第一个 Vue.js 项目的步骤。

先决条件

在设置 Vue.js 项目之前，请确保您的系统上安装了以下内容：

Node.js 和 npm：Vue.js 需要安装 Node.js 和 npm（Node 包管理器）。您可以从 Node.js 官方网站下载它们。

步骤 1：安装 Vue CLI

Vue CLI（命令行界面）是一种可帮助您轻松创建和管理 Vue.js 项目的工具。要在系统上全局安装 Vue CLI，请打开终端或命令提示符并运行以下命令：

npm install -g @vue/cli

此命令全局安装 Vue CLI，允许您从终端的任何位置访问 vue 命令。

第 2 步：创建一个新的 Vue 项目

安装 Vue CLI 后，您可以通过运行以下命令创建一个新的 Vue.js 项目：

vue create my-vue-app

系统将提示您为项目选择一个预设。您可以选择默认预设（包括 Babel 和 ESLint），也可以手动选择 Vue Router、Vuex、TypeScript 等功能。对于初学者，建议按 Enter 选择默认预设。

然后，Vue CLI 将创建一个名为 my-vue-app 的新文件夹，并使用所有必要的文件和配置设置项目结构。

步骤 3：导航到项目文件夹

创建项目后，使用以下命令导航到项目文件夹：

cd my-vue-app

这会将终端的工作目录更改为新创建的 Vue.js 项目文件夹。

步骤 4：运行开发服务器

要查看新的 Vue.js 应用程序的运行情况，请运行以下命令启动本地开发服务器：

npm run serve

此命令将在 http://localhost:8080（或其他可用端口）启动开发服务器。打开您的 Web 浏览器并导航到此 URL 以查看您的新 Vue.js 应用程序。

了解项目结构

创建新的 Vue.js 项目后，您将看到一个组织良好的项目结构。以下是关键文件和文件夹：

src: 此文件夹包含 Vue.js 应用程序的源代码。所有组件、视图和样式都位于此处。
public: 此文件夹包含静态资产，例如图像、字体和 index.html 文件，该文件可作为应用程序的入口点。
src/main.js： Vue.js 应用程序的主入口点。此文件初始化 Vue 实例并将其挂载到 DOM。
src/App.vue： 应用程序的根组件。您可以修改此文件以更改应用程序的主布局。
src/components: 此文件夹包含示例 Vue 组件，如 HelloWorld.vue。您可以在此处添加新组件并将其导入到您的应用程序中。

步骤 5：自定义您的应用程序

您可以通过编辑 App.vue 文件并创建新组件来开始自定义 Vue.js 应用程序。以下是一个简单的 Vue 组件的示例：

<template>
  <div>
    <h1>Welcome to My First Vue.js Project!</h1>
    <p>This is a simple Vue component.</p>
  </div>
</template>

<script>
export default {
  name: 'WelcomeComponent'
};
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

借助 Vue 的热加载功能，您可以保存更改并立即在浏览器中查看结果。

结论

恭喜！您已成功设置了第一个 Vue.js 项目，并了解了创建和运行 Vue 应用程序的基础知识。借助 Vue CLI，您将拥有一个强大的工具来帮助您搭建、开发和管理 Vue.js 项目。从这里，您可以探索更多高级功能，例如用于路由的 Vue Router、用于状态管理的 Vuex 以及用于更强大和更灵活开发的 Composition API。

vuejs cli 设置项目 nodejs npm 组件模板脚本样式 webpack typescript 路由器 vuex