快速搭建Vue框架的步骤

本文目录导读：

1. 环境准备
2. 安装 Vue CLI
3. 创建新项目
4. 项目结构
5. 编写代码

Vue.js 是一个流行的 JavaScript 框架，用于构建用户界面，它以易于使用和高效而闻名，特别适合构建单页应用程序，下面将介绍如何快速搭建 Vue.js 框架，从环境准备到项目结构搭建，再到代码编写，让你轻松入门 Vue.js。

环境准备

在开始之前，你需要确保你的开发环境中安装了 Node.js 和 npm（Node 包管理器），你可以从 Node.js 官网下载并安装最新版本的 Node.js，npm 会随同 Node.js 一起安装。

安装 Vue CLI

Vue CLI 是 Vue.js 的官方命令行工具，它可以帮助你快速搭建 Vue 项目，你可以通过以下命令全局安装 Vue CLI：

npm install -g @vue/cli

安装完成后，你可以通过运行 vue --version 来验证是否成功安装了 Vue CLI。

创建新项目

使用 Vue CLI 创建新项目的命令如下：

vue create my-project

my-project 是你的项目名称，运行此命令后，Vue CLI 会提示你选择一个预设选项，如果你想要一个全面配置的项目，可以选择默认预设，你也可以根据需要手动选择特定的功能。

项目结构

创建项目后，你将看到如下的项目结构：

my-project/
├── public/                  // 公共文件夹，用于存放静态资源
│   ├── index.html            // 入口 HTML 文件
│   └── favicon.ico           // 图标文件
├── src/                      // 源代码文件夹，存放所有 Vue 组件和脚本文件
│   ├── App.vue               // 根组件文件
│   ├── components/            // 存放所有自定义组件的文件夹
│   ├── views/                // 存放所有页面组件的文件夹
│   ├── router.js             // 路由配置文件
│   ├── main.js               // 入口文件，配置全局变量和启动 Vue 实例
└── package.json              // 项目配置文件，记录项目的依赖和运行脚本等配置信息

编写代码

现在你可以开始编写 Vue.js 代码了，在 src/components 文件夹下创建一个新的 Vue 组件，HelloWorld.vue：

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello, World!'
    }
  }
}
</script>

这个组件包含一个标题，通过插值表达式 {{ message }} 来显示文本 "Hello, World!"，接下来，你可以在 App.vue 中引入并使用这个组件：

<template>
  <div id="app">
    <HelloWorld />
  </div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  components: { HelloWorld }
}
</script>