Vue CLI 3 快速搭建项目

Vue CLI 简介

Vue CLI是一个用于开发Vue.js项目的脚手架工具，人们在用Vue开发项目时往往要用到很多的插件以及打包工具，而Vue CLI的存在帮助开发者省去了手动配置开发工具的麻烦，以用户界面的方式让开发者能在几分钟内快速初始化项目，把重点放在开发上。

实际上，Vue CLI是基于webpack和webpack-dev-server的，官方文档也有说明，你也可以手动进行配置。不过，Vue CLI 3的初始化步骤已经非常简便，即使不了解webpack，也可以用Vue CLI进行开发和生产。本文针对想用Vue CLI快速初始化项目的开发者，对webpack具体的配置将略过。

安装Vue CLI 3

本文将使用npm作为包管理器，你也可以使用yarn，这里不做过多说明。

npm install -g @vue/cli

查看Vue CLI的版本

vue --version

本文写作时的版本为3.2.3

新建项目

vue create my-app

你可以将上面的my-app替换成你自己的项目的名称

配置项目

接下来你就要在命令行中进行配置了

首先你需要决定是否使用预设配置，这里本来应该只有后两个选项，由于我之前已经用Vue CLI初始化过项目并保存了配置，我现在可以直接使用我此前保存过的配置选项来初始化。你也可以选择官方的默认配置，只用babel和eslint。我们这里选择最后一个选项，手动配置。

---

在这里你就可以选择你的项目需要的功能了，简单说明一下这几个功能。

• Babel：用Babel来转译JavaScript
• TypeScript：TypeScript支持
• Progressive Web App (PWA) Support：渐进式网页应用支持
• Router：是否使用Vue Router
• Vuex：是否使用Vuex
• CSS Pre