Vue CLI

Vue CLI 文档

一、简介

Vue CLI 是 Vue.js 的官方标准工具，用于快速构建基于 Vue.js 的项目。它提供了一个交互式命令行界面，可以帮助开发者创建和管理 Vue.js 项目，集成了 Webpack、Babel、ESLint 等工具，使得项目构建、代码压缩、热重载、linting 等任务变得简单高效。

二、安装

全局安装 Vue CLI 可以通过 npm 或 yarn：

bash复制代码
	npm install -g @vue/cli  

	# 或者  

	yarn global add @vue/cli

三、创建项目

使用 Vue CLI 创建新项目的命令是 vue create，后面跟项目名称：

bash复制代码
	vue create my-project

执行这个命令后，CLI 会询问你一些问题，比如你想要使用哪种 preset（预设配置），是否要安装 Babel、ESLint 等。你可以根据自己的需求进行选择。

四、项目结构

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

• public：静态资源目录，比如 index.html、favicon 等。

• src：项目源代码目录。

  • assets：存放静态资源，如图片、字体等。
  • components：存放 Vue 组件。
  • views：存放 Vue 页面。
  • router：定义路由。
  • store：定义 Vuex 状态管理。
  • App.vue：根组件。
  • main.js：入口文件。

• .env：环境变量配置文件。

• vue.config.js：Webpack 配置文件。

五、运行与构建

• 运行项目：

bash复制代码
	npm run serve  

	# 或者  

	yarn serve

• 构建项目：

bash复制代码
	npm run build  

	# 或者  

	yarn build

六、配置

Vue CLI 允许你通过 vue.config.js 文件来修改默认配置。例如，你可以配置代理、修改输出目录、添加插件等。

七、插件

Vue CLI 支持通过插件来扩展功能。你可以通过 npm 或 yarn 安装插件，并在 vue.config.js 中使用它们。

八、总结

Vue CLI 是一个强大的工具，它提供了许多内置的功能和插件，可以帮助你快速构建和管理 Vue.js 项目。通过掌握其基本用法和配置，你可以更加高效地进行 Vue.js 开发。同时，随着 Vue CLI 的不断更新，我们也应该关注其新的特性和用法，以便更好地利用这个工具。