Vue CLI 教程：快速上手构建现代化 Web 应用-原创手记-慕课网

概述

Vue CLI 引领你快速搭建和管理 Vue.js 项目，简化开发流程。通过命令行界面，轻松创建项目、配置环境，并利用丰富插件加速开发。从零开始，快速构建现代化 Web 应用，掌握 Vue CLI 关键技能，高效实现项目从创建到部署的全过程。

安装 Vue CLI

为了使用 Vue CLI，确保你的系统上已经安装了 Node.js，因为 Vue CLI 依赖于 Node.js 环境。接下来，使用以下命令之一安装 Vue CLI：

使用 npm 安装 Vue CLI

npm install -g @vue/cli

使用 yarn 安装 Vue CLI

yarn global add @vue/cli

创建 Vue 项目

安装 Vue CLI 后，创建新的 Vue 项目变得简单快捷。运行以下命令并指定项目名称：

vue create my-project

在 <template> 部分选择你想要的模板，如基础、插件或特定功能的模板。生成的项目结构通过 Vue CLI 完成，包含源代码、静态资源、依赖管理等。

项目结构与组件

Vue 项目结构遵循标准目录布局，提供清晰的组织方式。在生成的新项目中，你将看到关键目录：

src：存放组件、路由、样式等文件的源代码目录。
assets：存放如图片、字体等静态资源。
node_modules：存放项目依赖的第三方模块。
public：静态文件目录，包含 HTML 模板、favicon 等。

组件作为 Vue 应用的核心构建块，遵循“组件化”原则，封装 UI 逻辑，实现可重用性。

开发与构建

Vue CLI 提供了方便的开发环境设置。使用以下命令启动项目：

cd my-project
npm run serve

在开发模式下预览应用，实时查看和调试代码。构建生产环境版本时，运行：

npm run build

构建生成的文件位于 dist 目录，适合部署到生产环境。

实战案例

创建一个简单单页面应用（SPA），展示用户个人资料，并包含一个表单来修改信息。

步骤概述

创建项目：使用 vue create 命令并选择模板。
开发与布局：编辑 App.vue 文件，添加组件结构与逻辑。
运行与调试：执行 npm run serve 并使用浏览器预览应用。
构建应用：运行 npm run build 生成构建文件。

实践代码

以下是实现案例所需的部分代码示例：

<template>
  <div id="app">
    <h1>{{ user.name }}</h1>
    <input v-model="user.name" placeholder="Name">
    <input v-model="user.email" placeholder="Email">
    <button @click="saveChanges">Save</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: '',
        email: ''
      }
    };
  },
  methods: {
    saveChanges() {
      console.log('Changes saved:', this.user);
    }
  }
};
</script>

通过实践这些步骤和代码示例，将有效地帮助您掌握 Vue CLI 的核心技能，快速实现从项目创建到部署的全过程。