5 环境搭建之使用 Vue CLI 初始化项目

在上一节中，我们已经完成了 Node.js 的安装，这为我们后续的 Vue 开发做好了准备。接下来，我们将学习如何使用 Vue CLI 来初始化一个 Vue.js 项目。Vue CLI 是一个强大的工具，它为我们提供了快速启动 Vue 项目的能力，也支持丰富的功能和插件。

什么是 Vue CLI？

Vue CLI 是 Vue.js 官方提供的脚手架工具，它可以帮助我们快速搭建 Vue.js 项目。通过 Vue CLI，我们可以方便地创建项目、管理依赖、添加插件，并进行开发和构建操作。

安装 Vue CLI

首先，确保你已经安装了 Node.js。我们可以使用 npm（Node 包管理器）来全局安装 Vue CLI。在终端中运行以下命令：

npm install -g @vue/cli

安装完成后，你可以通过以下命令检查 Vue CLI 是否安装成功：

vue --version

如果成功安装，你将会看到 Vue CLI 的版本号。

使用 Vue CLI 创建项目

接下来，我们将创建一个新的 Vue 项目。使用以下命令来初始化项目：

vue create my-vue-app

在上述命令中，my-vue-app 是项目的名称，你可以根据自己的需求来命名。当你运行该命令后，CLI 会提示你选择一些配置选项：

1. 预设：你可以选择默认预设（即 Babel 和 ESLint），或者手动选择要安装的功能。

2. 手动选择功能：如果选择手动，你可以选择以下功能：

   • Babel
   • TypeScript
   • Progressive Web App (PWA) 支持
   • Router
   • Vuex
   • CSS Pre-processors
   • Linter / Formatter

   选择好之后，CLI 会根据你的选择去创建项目。

以下是一个示例，假设我们选择了 Vue Router 和 Vuex：

? Please pick a preset: Default ([Vue 3] babel, eslint)
? Check the features needed for your project: Babel, Router, Vuex

接着，CLI 会提示你是否要使用 history 模式的路由，是否使用 ESLint 等。

项目结构说明

项目创建完成之后，你将会看到以下的项目结构：

my-vue-app
├── node_modules
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── assets
│   ├── components
│   ├── App.vue
│   └── main.js
├── package.json
└── vue.config.js

• node_modules：依赖包所在文件夹。
• public：静态文件，index.html 文件是项目的入口文件。
• src：项目源代码，主要的组件及逻辑都在这里。
• App.vue：根组件。
• main.js：入口 JS 文件，用于初始化 Vue 实例。
• package.json：项目的配置信息，包括项目名称、版本、依赖等。
• vue.config.js：Vue CLI 的配置文件，可以在这里自定义构建选项。

启动开发服务器

我们可以通过以下命令来启动项目的开发服务器：

cd my-vue-app
npm run serve

打开浏览器访问 http://localhost:8080，你将看到 Vue.js 默认渲染的页面。

小结

通过本节的学习，我们成功使用 Vue CLI 初始化了一个新的 Vue 项目，从安装 Vue CLI 到创建项目及启动开发服务器，我们都进行了实操。接下来，我们将在下一节中讨论一些推荐的开发工具，以便于提高我们的开发效率。

希望这节内容能让你对 Vue 项目初始化有更深入的理解！如果你对 Vue 開發感到激动，那就继续往下看吧！