与您分享电脑世界

1、首先查看版本并安装个，这里的环境如下

vue：@vue/cli 5.0.8
npm：8.1.0
node：v16.13.0

2.开始创建项目

2.1创建命令：vue create test 并选择创建项目类型

Vue CLI v5.0.8
? Please pick a preset:
vue3 ([Vue 3] dart-sass, babel, router, eslint) // 保存过自定义默认选项
Default ([Vue 3] babel, eslint)//默认（安装bable、eslint）
Default ([Vue 2] babel, eslint)//默认（安装bable、eslint）
> Manually select features //自定义

2.2选择自定义配置：

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and
<enter> to proceed)
>(*) Babel //是一个 JavaScript 编译器ES6先后兼容ES5
( ) TypeScript // 微软开发的一个开源的编程语言，在JS的基础上构建而成超集
( ) Progressive Web App (PWA) Support //  渐进式Web应用
( ) Router // 路由
( ) Vuex // 状态管理库
( ) CSS Pre-processors // CSS预处理
(*) Linter / Formatter // 规范代码检查工具
( ) Unit Testing // 测试
( ) E2E Testing  // 测试

2.3选择组件相关参数

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter

2.3.1选择vue版本
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 3.x
2.x

2.3.2选择是否使用history历史模式的路由
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

2.3.3选择CSS预处理器
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> Sass/SCSS (with dart-sass)
Less
Stylus

2.3.4选择哪个自动化代码格式化检测
? Pick a linter / formatter config: (Use arrow keys)
ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
> ESLint + Prettier

2.3.5选择什么时候进行语法检查
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
>(*) Lint on save // 语法检查配置文件保存时检查
( ) Lint and fix on commit // 文件提交时检查

2.3.6配置文件的存放位置（推荐独立放置配置文件）
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files // 独立配置文件
In package.json // 放package.json里

2.3.6 是否保存以上设置(选择yes的话下次就可以直接使用刚才的配置了)
? Save this as a preset for future projects? (y/N)

3.最后回车等待组件下载创建成功

Vue CLI v5.0.8
✨ Creating project in D:\www\test\test.
🗃 Initializing git repository…
⚙️ Installing CLI plugins. This might take a while…

added 861 packages in 3m
🚀 Invoking generators…
📦 Installing additional dependencies…

added 113 packages in 2m
⚓ Running completion hooks…

📄 Generating README.md…

🎉 Successfully created project test.
👉 Get started with the following commands:

$ cd test
$ npm run serve