B端项目整体搭建（上篇）

小蜗牛de代码实验室
66 阅读3分钟

使用Imooc CLI创建项目

// 安装
npm install -g @imooc-cli/core

mkdir lego
cd lego

imooc-cli init

image.png

安装成功后，自动启动项目：

image.png

定义文件，ts可以成功导入.vue文件，并能获取它的类型；

declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

Vue CLI vs Vite

Vue CLI的功能

  • 工程脚手架
  • 开发服务器
  • 插件系统
  • 用户UI界面

Vue CLI构建是基于Webpack的，主要耗时都在Webpack的性能上；

Vite

利用浏览器的原生ES模块，基于Rollup进行构建；
不是一体化工具，目的就是一个快速的开发服务器和简单的构建工具；

对比时刻：Vite为什么这么快？

image.png

Vite的缺点

  • 只支持新版支持ES modules的浏览器
  • 第三方库也需要能支持ES modules
  • CommonJS支持有限
  • 开发构建属于两套系统，可能导致生产和开发的不一致行为；

Vite的前辈

Snowpack

ESlint

使用ESlint添加代码规范

Eslint： 规范的代码格式可以让整个工作的效率在一定程度上提升到最高；
没有规范可能出现的问题：

  • 代码难以读懂；
  • 代码提交的时候会有很多格式问题的修改，造成不必要的时间消耗；

Eslint是什么？
是一个开源的JS的lingting工具，使用espree将JS代码解析成抽象语法树（AST）， 然后通过AST来分析我们的代码；

命令行工具：

npx eslint --version
npx eslint --ext ts,vue src/**

编辑器插件：

  • Eslint插件
  • Vetur插件

深入ESLint配置文件

ESLint可用的Rules
ESLint配置文件；

module.exports = {
  root: true,
  env: {
    node: true
  },
  // 推荐使用的规则库
  'extends': [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/typescript/recommended'
  ],
  parserOptions: {
    ecmaVersion: 2020
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

prettier

ESLint解决的问题：

  • 代码质量问题
  • 代码风格问题

Prettier的理念

  • An opinionated code formatter，格式很重要，让我来帮你搞定！
  • Fewer Options: Prettier还给予了一部分配置项，可以通过.prettierrc文件修改；

ESLint prettier的工作原理：

  • 禁用所有和Pretteir冲突的ESLint的代码格式规则；
  • 将所有Pretteir的规则和修改导入ESLint中，在ESLint统一的显示这些错误；

我觉得ESLint和prettier冲突很多很麻烦，这个老哥也和我有同样的想法链接，如果ESLint满足需求，是不是没有使用prettier画蛇添足了；

项目结构规范

代码结构：针对单个文件的书写格式；
项目结构：针对这些文件应该以怎样的标准进行存放和管理； React项目文件结构

  • 按照功能或路由组织，也就是所说的feature
  • 按照文件类型

注意事项：

  • 避免多层嵌套
  • 不要过度思考

项目结构：

//静态文件
/assets
    image.png
/components
    ColorPicker.vue
/views
    Home.vue
/router
    index.ts
/store
    index.ts
    editor.ts
    user.ts
/hooks
    useRTLloader.ts
/plugins
    hotKeys.ts
/test
    ColorPicker.spec.ts
App.vue
main.ts

了解Git Flow标准

所有的这些规范都是针对特定的多人设定的，意在让多人协作的过程更加顺畅，更简单，减少不必要的冲突和时间的浪费；

预设两个分支：

  • master只能用来包括产品代码；你不能直接工作在这个master分支；
  • develop是你进行任何新的开发基础分支；
  • 这两个分支被称为长期分支；

功能开发feature，比如：feature/rss-feed

  • 仅仅存在于开发过程中，开发结束后将被删除；
  • 整合回到develop；
  • 等待更全面的测试；
  • 等待和develop一起进行发布；

管理release：

  • 新功能已经添加，bug已经修复；
  • 代码已经被测试；
  • release分支使用版本号命名的；

bug修复hotfix

  • 针对master；
  • 仅仅存在于对release的修复时，修复结束后将被删除并整合在master；

image.png

  • 根据需求，从master拉出分支；
  • 激烈的开发阶段，提交commit;
  • 开发完成，发起PR(pull request);
  • 代码评审（很重要！）
  • 部署，并且测试
  • 没问题，merge到master;
avatar
文章
阅读
粉丝