Vue CLI 是一个官方提供的前端项目脚手架工具，用于快速搭建 Vue.js 项目。本文将为你介绍如何进行 Vue CLI 的基本配置。

快速开始

  1. 安装 Vue CLI：
npm install -g @vue/cli

或者

yarn global add @vue/cli
  1. 创建一个新项目：
vue create my-project
  1. 进入项目目录：
cd my-project

项目结构

Vue CLI 创建的项目通常包含以下目录和文件：

  • src/: 源代码目录
    • assets/: 静态资源目录
    • components/: 组件目录
    • views/: 视图目录
    • App.vue: 根组件
    • main.js: 入口文件
  • public/: 公共目录
    • index.html: 入口 HTML 文件
  • package.json: 项目配置文件
  • README.md: 项目说明文件

环境变量

Vue CLI 允许你使用环境变量来配置项目。你可以在 .env 文件中定义环境变量，例如：

VUE_APP_TITLE=My Project

然后在代码中使用：

console.log(process.env.VUE_APP_TITLE);

脚本

Vue CLI 允许你添加自定义脚本到 package.json 文件中。例如：

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint"
}

你可以使用以下命令来运行这些脚本：

npm run serve
npm run build
npm run lint

扩展阅读

想要了解更多关于 Vue CLI 的配置和使用，可以阅读官方文档：Vue CLI 官方文档

[center]Vue CLI