Vue-cli 是 Vue.js 的官方脚手架工具，它能够帮助我们快速搭建一个基于 Vue.js 的项目，包括构建、测试、打包等一系列流程。在 Vue.js 的生态系统中，Vue-cli 工具是非常重要的一部分，它能够大大提高我们的开发效率，减少我们的工作量，让我们更专注于业务逻辑的实现。
安装 Vue-cli
在使用 Vue-cli 之前，我们需要先安装它。在命令行中输入以下命令即可安装：
npm install -g @vue/cli
创建一个新项目
安装好 Vue-cli 之后，我们可以使用它来创建一个新项目。在命令行中输入以下命令：
vue create my-project
其中 my-project 是项目的名称，你可以根据自己的需要来命名。
在创建项目的过程中，Vue-cli 会询问我们一些问题，比如选择需要安装的插件、是否使用 ESLint 等等。我们可以根据自己的需要来进行选择，也可以使用默认选项。
创建项目完成后，我们可以进入项目的目录，使用以下命令启动项目：
cd my-project npm run serve
启动项目后，我们可以在浏览器中访问 http://localhost:8080 来查看项目的运行效果。
Vue-cli 的插件
Vue-cli 工具提供了很多插件，这些插件可以帮助我们快速搭建一个符合我们需求的项目。以下是一些常用的插件：
Babel
Babel 是一个 JavaScript 编译器，它可以将 ES6+ 的代码编译成 ES5 的代码，从而让我们可以在现代浏览器中使用最新的 JavaScript 特性。在 Vue-cli 中，Babel 插件是默认启用的，我们可以在 .babelrc 文件中对 Babel 进行配置。
Vuex
Vuex 是 Vue.js 的状态管理库，它能够帮助我们管理应用程序中的状态。在 Vue-cli 中，我们可以使用 Vuex 插件来快速集成 Vuex 到我们的项目中。
Vue Router
Vue Router 是 Vue.js 的官方路由管理器，它能够帮助我们在单页应用程序中管理路由。在 Vue-cli 中，我们可以使用 Vue Router 插件来快速集成 Vue Router 到我们的项目中。
ESLint
ESLint 是一个 JavaScript 代码检查工具，它能够帮助我们在编写代码时遵循一定的规范和风格。在 Vue-cli 中，我们可以使用 ESLint 插件来快速集成 ESLint 到我们的项目中。
Vue-cli 的配置
除了插件之外，Vue-cli 还提供了一些配置选项，让我们可以对项目进行更加细致的配置。以下是一些常用的配置选项：
publicPath
publicPath 是我们在打包项目时，生成的静态资源的 URL 前缀。默认情况下，它是 /，也就是相对于根目录。如果我们需要将静态资源部署到一个子路径下，比如 /my-app/，我们可以将 publicPath 设置为 /my-app/。
outputDir
outputDir 是我们打包生成的文件的输出目录。默认情况下，它是 dist 目录。如果我们希望将打包生成的文件输出到其他目录，比如 build 目录，我们可以将 outputDir 设置为 build。
devServer
devServer 是我们在开发环境中使用的服务器配置。在 Vue-cli 中，我们可以通过 devServer 选项来配置服务器。比如，我们可以将 devServer 设置为：
// javascriptcn.com 代码示例
devServer: {
port: 8080,
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true
}
}
}这样，我们就可以在开发环境中通过 http://localhost:8080/api 来访问后端接口了。
总结
Vue-cli 工具是 Vue.js 生态系统中非常重要的一部分，它能够帮助我们快速搭建一个基于 Vue.js 的项目。在使用 Vue-cli 之前，我们需要先安装它，然后使用 vue create 命令来创建一个新项目。除了插件之外，Vue-cli 还提供了一些配置选项，让我们可以对项目进行更加细致的配置。在实际开发中，我们可以根据自己的需求来选择和配置插件和选项，从而让我们更加高效地开发 Vue.js 应用程序。
示例代码：
// javascriptcn.com 代码示例
// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')// javascriptcn.com 代码示例
<!-- App.vue -->
<template>
<div>
<h1>Hello, {{ name }}!</h1>
</div>
</template>
<script>
export default {
data() {
return {
name: 'Vue.js'
}
}
}
</script>来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/655c8c92d2f5e1655d6b8c2b