引言

Vue CLI 是一个官方提供的 Vue.js 脚手架工具，它可以帮助开发者快速搭建和管理 Vue.js 项目。本文将详细介绍 Vue CLI 的使用方法，包括安装、创建项目、配置及构建等。

安装 Vue CLI

首先，你需要全局安装 Vue CLI。你可以使用 npm 或 yarn 来安装：

npm install -g @vue/cli
# 或者
yarn global add @vue/cli

创建新项目

安装完成后，你可以使用以下命令创建一个新的 Vue 项目：

vue create my-project

运行上述命令后，Vue CLI 会提示你选择预设或手动选择特性。选择手动选择特性后，你可以根据需要选择 Babel、TypeScript、Router、Vuex 等。

项目结构

创建完成后，项目结构大致如下：

• node_modules/ – 依赖包
• public/ – 静态资源
• src/ – 源代码
• assets/ – 静态资源
• components/ – Vue 组件
• views/ – 页面视图
• App.vue – 根组件
• main.js – 入口文件
• .gitignore – git 忽略文件
• babel.config.js – Babel 配置
• package.json – 项目依赖及脚本
• README.md – 项目说明文档
• vue.config.js – Vue CLI 配置

配置 Vue CLI

你可以通过编辑 `vue.config.js` 文件来配置 Vue CLI。例如，你可以配置代理、PWA、CSS 相关选项等：

module.exports = {
  devServer: {
    proxy: 'http://localhost:4000'
  },
  pwa: {
    name: 'My Project'
  },
  css: {
    loaderOptions: {
      sass: {
        // 这里是全局的 sass 变量文件
        additionalData: `@import "@/styles/variables.scss";`
      }
    }
  }
}

构建项目

开发完成后，你可以使用以下命令构建项目：

npm run build

构建完成后，你会在 `dist/` 目录下看到生成的静态文件。

总结

本文详细介绍了 Vue CLI 的使用方法，包括安装、创建项目、配置及构建等。通过 Vue CLI，你可以快速搭建和管理 Vue.js 项目，提高开发效率。