17.3 创建项目

在Vue.js的学习旅程中，掌握如何快速而高效地创建一个新的Vue项目是至关重要的一步。这不仅能帮助你快速启动开发过程，还能确保你的项目结构清晰、易于维护。随着Vue.js生态的不断发展，官方提供了Vue CLI（Vue命令行工具）这一强大工具，极大地简化了Vue项目的创建、开发和构建流程。本章节将详细介绍如何使用Vue CLI来创建一个新的Vue.js项目，并简要探讨项目创建后的基本结构和一些初始配置。

17.3.1 安装Node.js与npm

在开始之前，请确保你的开发环境中已安装了Node.js。Node.js是一个基于Chrome V8引擎的JavaScript运行环境，它允许你在服务器端运行JavaScript代码。npm（Node Package Manager）是随Node.js一起安装的包管理工具，用于安装和管理项目依赖。

• 访问Node.js官网下载并安装适合你操作系统的Node.js版本。
• 安装完成后，在命令行或终端中运行node -v和npm -v来检查Node.js和npm是否成功安装及其版本号。

17.3.2 安装Vue CLI

Vue CLI是一个基于Vue.js进行快速开发的完整系统，提供了零配置原型开发、项目脚手架、图形化项目管理等功能。

• 打开命令行或终端，运行以下命令来全局安装Vue CLI：

  npm install -g @vue/cli
  # 或者使用yarn（如果你已安装yarn）
  yarn global add @vue/cli

• 安装完成后，通过运行vue --version或vue -V来检查Vue CLI是否安装成功及其版本号。

17.3.3 创建Vue项目

现在，你已经准备好使用Vue CLI来创建一个新的Vue项目了。

• 在命令行或终端中，导航到你希望存放Vue项目的目录。
• 运行以下命令来创建一个新的Vue项目。这里，my-vue-project是你的项目名称，你可以根据需要替换成任何你喜欢的名字：

  vue create my-vue-project

• 执行上述命令后，Vue CLI会启动一个交互式会话，询问你一些配置选项。对于初学者来说，可以选择默认的预设（Default Preset）来快速开始。但Vue CLI也提供了手动选择特性（Manually select features）的选项，允许你根据项目需求定制项目配置，如添加Vue Router、Vuex等。
• 选择完配置后，Vue CLI会自动下载并安装项目依赖，并设置项目结构。这个过程可能需要一些时间，具体取决于你的网络速度和选择的特性数量。

17.3.4 项目结构概览

项目创建完成后，你可以使用文本编辑器或IDE（如VS Code、WebStorm等）打开项目文件夹。Vue CLI生成的项目结构通常包含以下文件和文件夹：

• node_modules/：存放项目依赖的npm包。
• public/：存放静态资源，如index.html入口文件。
• src/：存放项目的源代码。
  • assets/：存放静态资源，如图片、字体等。
  • components/：存放Vue组件。
  • App.vue：主组件文件，所有页面都会在这个组件的<template>中渲染。
  • main.js：入口文件，用于创建Vue实例并挂载到DOM上。
• .gitignore：指定Git版本控制忽略的文件和文件夹。
• babel.config.js：Babel配置文件，用于将ES6+代码转换为向后兼容的JavaScript代码。
• package.json：项目的npm配置文件，包含项目依赖、脚本等信息。
• README.md：项目的说明文件。
• vue.config.js（可选）：Vue CLI的配置文件，用于覆盖默认配置。

17.3.5 运行和测试项目

在项目根目录下，运行以下命令来启动开发服务器：

npm run serve
# 或者使用yarn
yarn serve

Vue CLI会启动一个热重载的开发服务器，并自动打开默认浏览器访问你的应用。开发服务器会监听文件变化，并在文件修改后自动重新编译项目，无需手动刷新浏览器即可看到更新后的效果。

17.3.6 自定义项目配置

虽然Vue CLI提供了丰富的默认配置，但你可能需要根据项目需求进行自定义。这可以通过编辑vue.config.js文件来实现。例如，你可以修改webpack配置、设置代理服务器、配置环境变量等。

• 在项目根目录下创建或编辑vue.config.js文件。
• 根据Vue CLI的官方文档或社区资源，添加或修改配置以满足你的需求。

17.3.7 小结

通过本章节的学习，你应该已经掌握了如何使用Vue CLI来创建一个新的Vue.js项目，并了解了项目的基本结构和一些初始配置。Vue CLI不仅简化了项目创建的过程，还提供了丰富的配置选项和插件系统，帮助你构建高效、可维护的Vue应用。随着你对Vue.js的深入学习，你将能够更加灵活地运用Vue CLI及其生态系统中的工具来加速你的开发流程。

记住，Vue.js的学习是一个持续的过程，不断实践和探索将帮助你更好地掌握这门技术。在接下来的章节中，我们将继续深入Vue.js的各个方面，包括组件化开发、路由管理、状态管理等，帮助你从入门走向精通。