Vue CLI 资料大全：初学者快速入门指南

快速上手 Vue CLI，本文提供从安装到项目创建的全程指南，包括创建第一个 Vue 项目、解析项目结构，以及常用的 Vue CLI 命令。通过实践案例，轻松构建基本博客系统，助力开发者高效开发 Vue 应用。

快速上手 Vue CLI

安装 Vue CLI

要开始使用 Vue CLI，首先确保你的计算机上已安装 Node.js。Vue CLI 是基于 Node.js 的，因此安装 Node.js 是第一步。从官方网站下载并安装最新版本的 Node.js。

完成 Node.js 的安装后，在命令行工具（如命令提示符、终端或 PowerShell）中运行以下命令以全局安装 Vue CLI：

npm install -g @vue/cli

安装过程中，系统会提示你输入密码以完成安装。安装完成后，输入vue --version查看是否成功安装并显示版本信息。

创建第一个 Vue 项目

创建 Vue 项目的命令为：

vue create my-project

启动交互式向导，配置项目的基本信息。根据提示输入项目名称、描述、选择应用程序模板（如 single-file 或 vue-cli-service）。完成向导后，Vue CLI 会为你生成并设置好项目的所有文件和配置。

项目结构解析

创建项目后，会生成一个项目目录结构：

my-project/
|-- node_modules/
|-- public/
|-- src/
|   |-- assets/
|   |-- components/
|   |   |-- BlogList.vue
|   |-- main.js
|   |   |-- main.ts
|   |-- router/
|   |   |-- index.js
|   |-- store/
|   |   |-- index.js
|   |-- App.vue
|   |-- App.css
|-- .gitignore
|-- package-lock.json
|-- package.json
|-- README.md
|-- vue.config.js

这里简要介绍几个关键目录：

• public：存放静态资源，如 HTML 文件、图片、字体等。
• src：源代码目录，包含所有开发逻辑。
  • assets：存放用于共享的资源文件（如图片、字体、CSS 样式等）。
  • components：组件目录，组织和管理不同的 UI 组件。
  • main.js 或 main.ts：主入口文件，初始化应用。
  • router：配置应用的路由系统。
  • store：用于实现状态管理（如 Vuex）。
  • App.vue 或 App.ts：应用的入口组件。
  • main.ts：处理应用的初始化逻辑和全局配置。

Vue CLI 常用命令

Vue CLI 提供了一系列命令来简化开发流程：

• vue add：用于添加新插件或功能，例如添加 vue-router 或 vuex。

vue add <name>

• vue create：用于创建新的 Vue 项目。

vue create <project-name>

实践案例：创建简单应用

从零开始创建一个简单博客系统

使用 Vue CLI 创建项目并初始化：

vue create simple-blog
cd simple-blog

在 src/components 目录下创建 BlogList.vue：

<template>
  <div>
    <h2>我的博客文章</h2>
    <ul>
      <li v-for="post in posts" :key="post.id">
        {{ post.title }} - {{ post.date }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      posts: [
        {
          id: 1,
          title: 'Vue.js 入门指南',
          date: '2023-01-01'
        },
        {
          id: 2,
          title: 'Vue CLI 快速实践',
          date: '2023-01-02'
        }
      ]
    };
  }
};
</script>

在 src/App.vue 中引入 BlogList.vue 组件：

<template>
  <div id="app">
    <BlogList />
  </div>
</template>

<script>
import BlogList from './components/BlogList.vue';

export default {
  components: {
    BlogList,
  },
};
</script>

预览项目：

npm run serve

通过浏览器访问 http://localhost:8080/ 查看效果。

资源与社区支持

• 官方文档：Vue CLI 官方文档 提供详尽的指导和教程，是学习 Vue CLI 的最佳资源。
• 社区支持：Vue.js 官方论坛 和 Stack Overflow 是解决遇到的问题和获取社区支持的好地方。

利用 Vue CLI，你已能从零开始创建和管理 Vue.js 项目，随着经验的丰富，你会更深入地理解 Vue CLI 的强大功能和 Vue.js 的核心概念。