vue3项目搭建 | 青训营笔记

137 阅读2分钟

这是我参与「第四届青训营 」笔记创作活动的第5天。

青训营大项目进行中,项目搭建作为项目开发的开始,是比较重要的。我们小组相对比较熟悉vue技术栈,因此选择用vue3开发项目。

vue cli

官网介绍: Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注在撰写应用上,而不必花好几天去纠结配置的问题。与此同时,它也为每个工具提供了调整配置的灵活性,无需 eject。

终端执行vue create xxx(项目名)命令,会有如下选配交互界面:

image.png

更多 vue cli 细节、配置细节

项目规范搭建

个人开发、团队开发离不开规范,其中代码规范、提交规范也是要在项目构建中确定好的。

代码规范

editorconfig

EditorConfig 有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格。

可在.editorconfig文件中配置

prettier

Prettier 是一款强大的代码格式化工具,支持 JavaScript、TypeScript、CSS、SCSS、Less、JSX、Angular、Vue、GraphQL、JSON、Markdown 等语言,基本上前端能用到的文件格式它都可以搞定,是当下最流行的代码格式化工具。

  1. 安装prettier

npm install prettier -D

在 vue cli 选择 prettier 也会有相应的安装

  1. 配置.prettierrc文件
  2. 创建.prettierignore忽略文件
  3. 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 的工具