这是我参与「第四届青训营 」笔记创作活动的第5天。
青训营大项目进行中,项目搭建作为项目开发的开始,是比较重要的。我们小组相对比较熟悉vue技术栈,因此选择用vue3开发项目。
vue cli
官网介绍: Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注在撰写应用上,而不必花好几天去纠结配置的问题。与此同时,它也为每个工具提供了调整配置的灵活性,无需 eject。
终端执行vue create xxx(项目名)命令,会有如下选配交互界面:
项目规范搭建
个人开发、团队开发离不开规范,其中代码规范、提交规范也是要在项目构建中确定好的。
代码规范
editorconfig
EditorConfig 有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格。
可在.editorconfig文件中配置
prettier
Prettier 是一款强大的代码格式化工具,支持 JavaScript、TypeScript、CSS、SCSS、Less、JSX、Angular、Vue、GraphQL、JSON、Markdown 等语言,基本上前端能用到的文件格式它都可以搞定,是当下最流行的代码格式化工具。
- 安装prettier
npm install prettier -D
在 vue cli 选择 prettier 也会有相应的安装
- 配置
.prettierrc文件 - 创建
.prettierignore忽略文件 - VSCode 需要安装 prettier 的插件
eslint
在 vue cli 中选择 eslint ,会帮我们配置好相应的 eslint 环境。
可以在.eslintrc.js文件进行修改、进一步配置。
git husky
husky是一个git hook工具,可以帮助我们触发git提交的各个阶段:pre-commit、commit-msg、pre-push
执行 npx husky-init && npm install命令,可以帮我们安装husky依赖,创建.husky文件夹,并且在package.json中添加"prepare": "husky install"脚本。
可以在我们执行git commit的时候自动对代码进行lint校验。
git commit规范
通常我们的git commit会按照统一的风格来提交,这样可以快速定位每次提交的内容,方便之后对版本进行控制,可以借助 Commitizen 工具。
Commitizen 是一个帮助我们编写规范 commit message 的工具