vue搭建项目详细介绍

文档说明
本文档为使用vue脚手架工具创建vue项目基本步骤，相关步骤和解释为个人查阅相关资料后的整理，如果有问题和建议可以随时提出调整
工具
vue/cli脚手架工具
版本：5.0.4
创建命令
vue create <project_name>
配置选项

选择第三项，手动选择
Default([Vue 3] babel, eslint)
Default([Vue 2] babel, eslint)
Manually select features // 手动选择
相关插件选择
() Babel // 使用babel编译代码（肯定要用）
() TypeScript // 使用typeScript（建议使用，ts的类型校验能避免很多错误）
( ) Progressive Web App (PWA) Support // 渐进式网页应用程序（新技术，一般还用不到）
() Router // 使用路由管理（肯定要用）
() Vuex // 全局状态管理（一般建议都加上，注意处理刷新页面问题）
() Css Pre-processors // css预处理（肯定要用，sass或less的使用能让css更简单）
() Linter / Formatter // 代码风格、格式校验（建议使用，有利于团队配合）
( ) Unit Testing // 单元测试（无所谓，前端习惯所见即所得的页面预览方式）
( ) E2E Testing // 端对端测试 （同上）
选择版本

根据项目实际情况选择，如果要兼容ie，就选vue2，如果不兼容ie，尽量用vue3，比2好用很多，而且现在ie已经停止服务了，应该都不用考虑ie了
组件风格选择
Use class-style component syntax? (y/n)
// 使用类格式的组件风格（建议选n，支持情况和使用习惯上都不太友好）
babel使用
Use Babel alongside TypeScript（required for modern mode, auto-detected polyfills, transpiling JSX）
// 和typeScript一起使用babel（建议使用，在ts编译后再使用babel进行编译）
// ts的转换结果不能满足vue的要求，依然需要babel进行二次转换
历史模式路由
Use history mode for router? (Requires proper server setup for index fallback in production)
// 是否使用历史路由模式 （看项目实际情况，不介意路径好不好看和不做seo的话，可以不用，用的话注意后台也要配置一下）
css预处理器
Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default)
Sass/SCSS (with dart-sass) // sass（建议选择这个，比较完善，学习成本也低）
Less // less （习惯用这个也可以，一般页面来说less和sass都能满足，只是sass生态好一些）
Stylus // （不知道是什么，没关心过，建议sass/less二选一）
代码风格、格式校验
Pick a linter / formatter config: (Use arrow keys)
ESLint with error prevention only // eslint的错误警告（只有eslint的错误警告，低校验情况可以考虑这个）
ESLint + Airbnb config // eslint+爱彼迎 （不推荐，应该很少用这个）
ESLint + Standard config // 普通校验模式 （standard介绍为中文介绍，比较友好）
ESLint + Prettier // 错误+格式，严格模式（推荐这个，听说刘雨溪用的就是这个）
// 统一的代码风格能增加代码的可读性，减少多人协作开发相互配合上的难度
格式校验触发时机
Pick additional lint features: (Press to select, to toggle all, to invert selection, and to proceed)
() Lint on save // 只在保存文件的时候
() Lint and fix on commit // 保存和提交的时候 （建议也选上这个，要不用格式校验干吗）
配置文件方式
Where do you prefer placing config for Babel, ESLint, etc.?
In dedicated config files // 在专门配置文件中（看项目情况选择是否需要，不过现在一般用不到）
In package.json // 使用package文件（建议使用，项目一些基本调整此处基本都能满足，配置项在vue官网能找到文档）