17.3 创建项目-Vue.js从入门到精通(四)

当前位置:　首页>> 技术小册>> Vue.js从入门到精通(四)

### 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官网](https://nodejs.org/)下载并安装适合你操作系统的Node.js版本。
- 安装完成后，在命令行或终端中运行`node -v`和`npm -v`来检查Node.js和npm是否成功安装及其版本号。

#### 17.3.2 安装Vue CLI

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

- 打开命令行或终端，运行以下命令来全局安装Vue CLI：
  ```bash
  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`是你的项目名称，你可以根据需要替换成任何你喜欢的名字：
  ```bash
  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 运行和测试项目

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

```bash
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的各个方面，包括组件化开发、路由管理、状态管理等，帮助你从入门走向精通。

该分类下的相关小册推荐：

Vue源码完全解析

TypeScript和Vue从入门到精通(三)

vue项目构建基础入门与实战

TypeScript和Vue从入门到精通(五)

VUE组件基础与实战

Vue.js从入门到精通(二)

Vue.js从入门到精通(三)

Vue原理与源码解析

vuejs组件实例与底层原理精讲

TypeScript和Vue从入门到精通(二)

移动端开发指南

Vue.js从入门到精通(一)