vue3+ts creates front-end blog project

vue3 creates blog project

cmd
create
Manually select features
Downloading configuration
Download completed
Open the project using ws
Load it first
- npm install
- npm run serve
The front-end project was launched successfully!

cmd

Insert image description here

create

vue create 项目名

Insert image description here
Note: My scaffolding is 4.5.9 at this time
If the scaffolding is too low npm uninstall vue-cli -g
npm install -g @ vue/cli

Manually select features

Select Manually select features Create manually
Insert image description here

Choose Vue version  选择vue脚手架的版本
Babel：				使用babel，便于将我们源代码进行转码（把es6=>es5）【推荐选择】
TypeScript：		使用TypeScript进行源码编写，使用ts可以编写强类型js，对我们的开发有很大的好处
Progressive Web App(PWA)：使用渐进式网页应用（PWA）可以让网站的体验变得更好，能够模拟一些原生功能
Router：			使用vue-router【推荐选择】
Vuex：				使用vuex状态管理器
CSS Pre-processors：使用CSS预处理器，比如：less，sass等
Linter/Formatter：使用代码风格检查和格式化（如：ESlint）【推荐选择】
	eslint:是一个代码检查工具,用来检查你的代码是否符合指定的规范(例如: = 的前后必须有一个空格)[但会出现过于严苛的情况]
Unit Testing：		使用单元测试
E2E Testing：		使用E2E测试, end to end（端到端）是黑盒测试的一种

Here are my choices:
Insert image description here

Choose Vue version

Insert image description here

Use class-style component syntax? (Y/n)

Whether to use Class (class) style decorator,
that is, create a Vue instance by export default class Home extends Vue{}
y[recommended choice 】

Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n)

Use Babel for escaping and use it with TypeScript for automatic detection
y【Recommended choice】

Use history mode for router?

Routing mode, whether to select history mode, enable history mode, after the project is built, the opening page may be blank
y [Recommended choice]

Pick a CSS pre-processor?

Choose a css preprocessor
Sass/SCSS (with dart-sass) [recommended choice]
node-sass is automatically compiled in real time Yes,
dart-sass needs to be saved before it will take effect.

Pick a linter / formatter config?

Choose a code formatting detection tool
TSLint: ts format checking tool
ESLint with error prevention only: ESLint will only provide error reminders【 Recommended choice】
ESLint + Airbnb config: ESLint Airbnb Standard
ESLint + Standard config: ESLint Standard Standard
ESLint + Prettier: ESLint (code quality detection) + Prettier (code formatting tool)

Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?

How to store Babel, PostCSS, ESLin and other configuration files? Should they be placed in separate configuration files?
Or in package.json?
Here To make the configuration clear and beautiful, I choose a separate file for each configuration.
are all placed in package.json. [Recommended choice]
[Personally, I think all configuration files are separate, and the project list is long and complicated]

Save this as a preset for future projects?

Do you need to save the current configuration so that it can be quickly built in future projects? After saving, you can directly select the configuration when creating a project later, without the need for separate configuration
[I hope This file style will be used in the future. Select y.
You need to write a separate name to find this configuration mode in the future.
]
Insert image description here