一个月让自己从前端新手成为老油条（一）

wy白菜
250 阅读3分钟

image.png

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。

前言

每年都会有不少人加入程序员的行业，前端因为入门难度较低深受大家的喜爱，自然是第一选择，那刚入行的初级开发者如何能在众多对手中脱颖而出呢？自然是让公司看到自己的价值，如果不是起点就在大厂的前端开发者来说往往第一份工作会选择一个小而美的公司，但是小而美的公司往往要面临的选择是进去仅有几个前端或者你就是唯一，而如何快速完成公司的独立项目成为了一道门槛，那我们会花一个月的时间完成一整套工作中常用的后台管理系统+原生小程序开发。而在接下来的项目中我们所用到的知识为vue3+小程序。在学习之前如果不了解vue3或者小程序的可以先去了解一下基本语法。

技术选择

vue3的出现已经是两年前的事了，随着越来越多的公司选择vue3自然我们也使用vue3，考虑到Typescript的学习成本较高，目前暂不使用。

基础框架搭建

搭建一个项目自然从脚手架及构建工具选择，目前市面比较流行的是webpack和vite。因为vite构建速度相比webpack快了许多，所以这里我们选择使用vite构建项目。

npm create vite@latest vue3-vite-plus --template vue

image.png

既然我们项目基本框架搭建完成，就要考虑项目中需要使用哪些技术，最基本的请求我们就使用axios，组件库使用element-plus，路由使用vue-router，状态管理器依然使用vuex；

npm install vue-router@4
npm install vuex@next --save
npm install axios --save

编码规范

在正式开始编码前，我们最好可以规范我们的编码格式，如果是独立开发可以不考虑，如果是团队合作，自然大家统一规范比较好。接下来我们编写几个规范代码格式的文件：

  1. .editorconfig(这里需要配合vscode插件：EditorConfig for VS Code；如果不使用可以不要这个文件)

image.png

  1. .eslintignore(这里是用来忽略部分不需要eslint语法检查的文件)
# 忽略build目录下类型为js的文件的语法检查
build/*.js
# 忽略src/assets目录下文件的语法检查
src/assets
# 忽略public目录下文件的语法检查
public
.git
.vscode
node_modules
dist
  1. .eslintrc.js(用来自定义我们需要的eslint语法检查规范)

image.png 因为内容较多，就不全部放在这里了，有需要的话可以评论里找我拿源文件。

  1. .prettierrc.js

image.png 5. commitlint.config.js

module.exports = {
  extends: ["@commitlint/config-conventional"]
};
  1. stylelint.config.js

image.png 同样因为内容较多，就不放全部代码了，有需要评论里找我。

在我们写完了上面的配置文件后如果直接运行项目会发现很多报错，因为这些配置文件需要插件支持，首先vscode插件中需要ESLint、Prettier - Code formatter、EditorConfig for VS Code；其次项目中我们需要安装以下插件：@commitlint/cli（版本建议12.0.0）、@commitlint/config-conventional（版本建议12.0.0）、@vue/eslint-config-prettier、babel-eslint、eslint、eslint-plugin-prettier、eslint-plugin-vue、lint-staged、prettier、stylelint、stylelint-config-prettier、stylelint-config-standard；

image.png

代码提交规范

如果是多人合作开发项目中，有一个良好的代码提交规范可以让项目管理者一眼看到本次的提交内容，这里我们使用husky插件

npm i husky@3.1.0

这里需要注意版本问题，实测高版本无法检测提交，同时需要在package.json中添加钩子：

"husky": {
    "hooks": {
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
      "pre-commit": "lint-staged"
    }
  }

第一天就结束了哦，如果没出问题的话是可以正常按照规则提交项目的。

avatar
文章
阅读
粉丝