vue项目搭建流程

文档说明

本文档为使用vue脚手架工具创建vue项目基本步骤，相关步骤和解释为个人查阅相关资料后的整理，如果有问题和建议可以随时提出调整

工具

vue/cli脚手架工具版本：5.0.4

创建命令

vue create

配置选项

• 选择第三项，手动选择
  

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, <i> 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官网能找到文档）

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！