Vue.js CLI 搭建项目：初学者指南

2024-02-12 00:19:28

前言

Vue.js 是一个流行的前端框架，用于构建交互式用户界面。它以其轻量级、易用性和强大的功能而著称。如果您想学习 Vue.js 或开始构建自己的项目，那么本指南将为您提供一个循序渐进的入门指导。

安装 Vue.js CLI

Vue.js CLI 是一个命令行工具，可以帮助您轻松地创建和管理 Vue.js 项目。它提供了各种开箱即用的功能，包括项目脚手架、构建工具和开发服务器。

要在您的系统上安装 Vue.js CLI，请打开终端或命令提示符并运行以下命令：

npm install -g @vue/cli

创建项目

安装 Vue.js CLI 后，您就可以开始创建项目了。在终端或命令提示符中，导航到您想要创建项目的位置，然后运行以下命令：

vue create vueapp

这将创建一个名为 "vueapp" 的新项目。您可以根据需要将 "vueapp" 替换为您的项目名称。

项目结构

创建项目后，您将看到一个名为 "vueapp" 的新文件夹。此文件夹包含您的项目文件。

vueapp
├── package.json
├── src
│   ├── App.vue
│   ├── main.js
│   └── router.js
├── vue.config.js
└── README.md

package.json ：此文件包含有关项目的信息，例如项目名称、版本和依赖项。
src ：此文件夹包含您的源代码。
App.vue ：此文件是您的根组件。它是应用程序的入口点。
main.js ：此文件是您的主 JavaScript 文件。它负责创建 Vue 实例和挂载根组件。
router.js ：此文件是您的路由器文件。它负责管理应用程序的路由。
vue.config.js ：此文件是您的 Vue 配置文件。它允许您自定义 Vue CLI 的行为。
README.md ：此文件是您的项目自述文件。它提供了有关项目的概述。

运行项目

要运行项目，请在终端或命令提示符中导航到项目目录，然后运行以下命令：

npm run serve

这将在您的计算机上启动一个开发服务器。您可以通过打开浏览器并导航到 http://localhost:8080 来访问您的项目。

添加组件

要向您的项目添加组件，请在 "src" 文件夹中创建一个新的 .vue 文件。例如，您可以创建一个名为 "HelloWorld.vue" 的组件：

src
├── App.vue
├── HelloWorld.vue
├── main.js
├── router.js
├── vue.config.js
└── README.md

在 "HelloWorld.vue" 文件中，添加以下代码：

<template>
  <div>
    <h1>Hello World!</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      msg: 'Hello World!'
    }
  }
}
</script>

然后，在 "App.vue" 文件中，将 "HelloWorld" 组件添加到模板中：

<template>
  <div>
    <HelloWorld />
  </div>
</template>

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

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