什么是 vue-preset
vue-preset 是一个 Vue.js 的预设，可以帮助开发者快速创建一个 Vue.js 项目。它包含了一系列的配置选项，方便开发者配置自己所需要的开发环境。
为什么使用 vue-preset
使用 vue-preset 可以让开发者快速创建一个基于 Vue.js 的开发环境，节省了开发者在配置开发环境上所需要的时间。同时，vue-preset 也提供了常用的配置选项，方便开发者根据自己的需求进行配置，提升开发效率和开发体验。
如何使用 vue-preset
使用 vue-preset 非常简单，只需要通过 npm 安装就可以使用。以下是安装和使用的步骤：
安装 vue-cli
首先需要安装 vue-cli，命令如下：
npm install -g @vue/cli
创建项目
在安装 vue-cli 后，可以使用如下命令创建一个新的项目：
vue create my-project
其中 my-project 是你要创建的项目名称。
创建项目时，会提示你选择预设，输入如下命令选择要使用的预设：
Manually select features
接着会提示你选择要使用的预设，如下：
Check the features needed for your project:
选择上下键进行选择，在需要选择的选项前打×，选择完毕后按回车键进行下一步。
在选择完毕后，会提示你是否将你的配置保存为一个预设。如果你想保存你的配置，可以选择 Yes 并输入一个预设名称；如果你不需要保存你的配置，可以选择 No。
使用预设
如果你已经保存了自己的配置为一个预设，可以使用如下命令来使用保存的预设：
vue create --preset <username>/<repo> my-project
其中 username 是预设所在的 GitHub 用户名，repo 是预设所在的仓库名称。
如果你没有保存自己的配置为一个预设，但是想使用已经存在的一个预设，可以使用如下命令：
vue create --preset <username>/<repo> my-project
以上就是使用 vue-preset 的全部步骤，简单而容易上手。
示例代码
以下是一个简单的使用 vue-preset 命令创建项目的示例代码：
npm install -g @vue/cli vue create my-project Manually select features Check the features needed for your project: (*) Babel ( ) TypeScript ( ) Progressive Web App (PWA) Support ( ) Router ( ) Vuex (*) CSS Pre-processors (*) Linter / Formatter ( ) Unit Testing ( ) E2E Testing Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (*) Sass/SCSS (with dart-sass) ( ) Sass/SCSS (with node-sass) ( ) Less ( ) Stylus Pick a linter / formatter config: (*) ESLint with error prevention only ( ) ESLint + Airbnb config ( ) ESLint + Standard config ( ) ESLint + Prettier Would you like to install additional linting plugins? (Y/n) Y Which plugins would you like to install? (*) lint-on-save (*) stylelint
在选择完以上选项后，按回车键等待项目生成完毕即可。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/600673defb81d47349e53be4