宁睿 发表于 2022-8-10 22:58:20

vue项目搭建流程

文档说明

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

vue/cli脚手架工具版本:5.0.4创建命令

vue create 配置选项


[*]选择第三项,手动选择
Default( babel, eslint)Default( 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: (Pressto select,to toggle all, <i> to invert selection, andto 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官网能找到文档)
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
页: [1]
查看完整版本: vue项目搭建流程