Vue CLI 终极教程：从零到一打造 Vue 项目

Vue CLI 是用于创建和管理 vue.js 项目的官方工具。它提供了一系列命令，可以帮助你快速搭建项目结构、安装依赖项，以及自动执行各种任务。本教程将一步步指导你使用 Vue CLI 从头开始构建一个 Vue 项目。

步骤 1：安装 Vue CLI

• 使用 npm 安装 Vue CLI：npm install -g @vue/cli
• 验证安装是否成功：vue --version

步骤 2：创建新项目

• 创建一个新目录，并在其中运行：vue create my-project
• 选择项目模板（默认即可）
• 输入项目名称（my-project）
• 选择包管理器（默认即可）

步骤 3：项目结构

Vue CLI 会自动创建一个带有以下结构的项目：

• src/： 源码目录，包含 Vue 组件和代码
• public/： 静态资源目录，如 html、CSS 和图片
• node_modules/： 安装的依赖项
• package.JSON： 管理项目依赖项和配置
• README.md： 项目文档

步骤 4：安装依赖项

使用以下命令安装项目的依赖项：

• npm install（或 yarn install）

步骤 5：编写代码

在 src/main.js 文件中，配置 Vue 实例和根组件：

import Vue from "vue"
import App from "./App.vue"

new Vue({
  render: h => h(App),
}).$mount("#app")

在 src/App.vue 文件中，编写你的 Vue 根组件：

<template>
  <div>
    <h1>Hello, world!</h1>
  </div>
</template>

<script>
export default {
  name: "App",
}
</script>

步骤 6：运行项目

使用以下命令运行项目：

• npm run serve（或 yarn serve）

步骤 7：构建项目

一旦你完成了代码编写，你就可以使用以下命令构建项目：

• npm run build（或 yarn build）

这将创建一个 dist/ 目录，其中包含用于部署的生产版本。

步骤 8：部署项目

将 dist/ 目录部署到你的托管环境。你可以使用静态文件服务器或将代码提交到云平台。

进阶主题

路由： 使用 vue-router 管理应用程序的不同视图。 状态管理： 使用 Vuex 管理应用程序的状态。 单元测试： 使用 Jest 或 Vue Test Utils 测试你的 Vue 组件。 国际化： 使用 vue-i18n 将你的应用程序翻译成不同的语言。 CI/CD： 使用 Travis CI 或 jenkins 等工具自动化你的构建和部署流程。