一套Vue3+TS项目基础框架-彻底解放自我

不要抢我的跑车
2,147 阅读5分钟

文章前言 👀👀

当我们撸起袖子准备开始着手开发一个崭新的项目时，最开始要面临的就是项目基础环境的搭建而在搭建一套前端环境的时候也是相当耗时的。当然不同的开发团队都会自定自己的团队开发标准，所以要根据情况而定。但是亲手去搭建一套较为完整的基础框架在之后也可以更好的融入自己的团队，更快的上手项目。

快速搭建Vue项目 ❤❤

这里当然使用我们的Vite构建工具来快速的搭建项目了，填写自己的项目名称和选择vue-ts模板

命令：yarn create vite

VsCode代码片段编写

作为VsCode编辑器终极爱好者，当然是使用VsCode的啦

自己自定义一些代码片段有时候会比去使用一些插件效率来的更快，使用这里推荐使用VsCode代码片段来定义一些常用的代码片段。如果对VsCode代码片段有不懂的地方可以参考文章。

这里编写一个单文件组件的基本结构，可以根据自己的喜欢来定义其他的代码片段：

{
	"Vue3单文件组件组件模板": {
		"scope": "",
		"prefix": "base-v3",
		"body": [
			"<template>",
			"  <div>",
			"    <!-- 内容 -->",
			"  </div>",
			"</template>",
			"",
			"<script setup lang=\"ts\">",
			"import {} from \"vue\";",
			"</script>",
			"",
			"<style scoped></style>",
			""
		  ],
		"description": "代码片段：Vue3单文件组件"
	}
}

定义规范的目录结构

├───api           对接接口服务目录
├───assets        静态文件目录
├───components    公共组件目录
├───hooks         自定义钩子目录
├───router        路由管理目录
├───store         状态管理目录
├───styles        公共样式目录
├───types         各种类型目录
├───utils         相关工具目录
└───views         页面目录

Vite配置相关的编写 😊😊

别名配置

在 vite.config.ts 中配置一些别名，然后基本就可以在项目中使用别名了。但是TS不会提供路径提示并且会爆红，需要在 tsconfig.json 文件中配置 baseUrl 和 paths

export default defineConfig({
  // 公共基础路径
  base: "./",
  // 配置别名
  resolve: {
    alias: {
      "@": resolve(__dirname, "./src"),
    },
  },
  plugins: [vue()],
});

{
  "compilerOptions": { 
    // ......省略
    "baseUrl": "./",
    "paths": { 
      "@/*": ["src/*"] 
    },
  }
}

测试别名的使用均可以：

  1. 在template引入图片: <img src="@/assets/test.jpg" />

  2. 在script引入文件： import { testFun } from "@/utils/test";

  3. 在style引入图片：background: url("@/assets/test.jpg") no-repeat;

其他配置

server: {
    host: true,
    // 指定项目启动端口
    port: 3000,
    // 启动项目时自动打开
    open: true,
    // 允许跨域
    cors: true,
    // 开发时的解决跨域问题
    // https://cn.vitejs.dev/config/#server-proxy
    proxy: {},
},

多模式环境变量配置

参考文档：vitejs.cn/guide/env-a…

整合相关库 🤞🤞

VueRouter@4

安装：yarn add vue-router@4

在router/index.ts文件中创建路由实例

import { createRouter, createWebHashHistory } from "vue-router";
// modules 目录用于定义各种路由，分开管理路由
import TestRoutes from "./modules/TestRoutes";

// 路由集合
const allRoutes = [...TestRoutes];

/**
 * 路由实例
 */
const routerInstance = createRouter({
  history: createWebHashHistory(),
  routes: allRoutes,
});
export default routerInstance;

在main.ts文件中引入路由实例然后 .use(router) 即可

Pinia

介绍：Pinia是新一代的状态管理工具，依然是有Vuejs团队的成员开发，所以被认为是下一代的Vuex。Pinia提供了完整的TS支持、去除了mutations，只有state、getters、actions（可同步可异步）、没有模块的概念，而是一个个store分开更好的代码分割、更加的轻量级。

官方文档：pinia.vuejs.org/

安装：yarn add pinia

在main.js中创建路由实例：

import { createApp } from "vue";
import { createPinia } from "pinia";
import App from "./App.vue";

const app = createApp(App);

app.use(createPinia());

app.mount("#app");

在store/modules中定义各种store，在Vue直接引入各种store：

import { defineStore } from "pinia";

const TestStore = defineStore("TestStore", {
  state: () => {
    return {
      count: 5,
    };
  },
  getters: {
    // 第一种写法
    doubleCount: (state) => state.count * 2,
    // 第二种写法
    doubleCountOther(): number {
      return this.doubleCount * 2;
    },
  },
  actions: {
    async incrementCountAction(newCount: number) {
      this.count = newCount;
    },
  },
});

export default TestStore;

<template>
  <div>TestStore的count值：{{ testStore.count }}</div>
  <div>
    TestStore中getters的值：{{ testStore.doubleCount }}——{{
      testStore.doubleCountOther
    }}
  </div>
  <div>点击修改count的值:<button @click="clickModifyCount">修改</button></div>
</template>

<script setup lang="ts">
import TestStore from "@/store/modules/TestStore";

const testStore = TestStore();

const clickModifyCount = () => {
  const newValue = Math.round(Math.random() * 20);
  testStore.incrementCountAction(newValue);
};
</script>

<style scoped></style>

预处理器Less

这里以集成预处理器Less为例子

Vite对CSS预处理器提供了内置支持，我们只需要去安装对应的预处理器依赖：yarn add less -D 后就可以使用相关处理器的语法。

往项目中注入全局样式less文件，需要在Vite配置文件中配置：

css: {
    preprocessorOptions: {
      less: {
        additionalData: `@import "${resolve(
          __dirname,
          "src/style/全局样式文件路径.less"
        )}";`,
      },
    },
  },

在style中引用.less文件： @import "@/style/样式文件路径.less";

WindiCSS

官网：windicss.org/

安装：yarn add vite-plugin-windicss windicss -D

在Vite配置文件走配置插件：

import WindiCSS from 'vite-plugin-windicss'

export default {
  plugins: [
    WindiCSS(),
  ],
}

在引入样式文件：import "virtual:windi.css"; 就可以使用WindiCSS的功能了。

添加windiCSS配置文件： windi.config.ts

import { defineConfig } from "windicss/helpers";

export default defineConfig({
  /* 配置项... */
});

VsCode编辑器可以安装插件：WindiCSS IntelliSense 来提供一些智能提示

Mockjs

安装：yarn add mockjs 和 yarn add vite-plugin-mock -D

如何集成参考文档：github.com/vbenjs/vite… 写的非常清楚

Axios

安装：yarn add axios

Axios统一请求封装，根据需求去扩展：

import axios from "axios";

const requestInstance = axios.create({
  baseURL: import.meta.env.VITE_BASE_URL,
  timeout: 5000,
  withCredentials: false,
});

/**
 * 请求拦截器
 */
requestInstance.interceptors.request.use(
  (config) => {
    console.log("请求拦截器", config);
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

/**
 * 响应拦截器
 */
requestInstance.interceptors.response.use(
  (response) => {
    console.log("响应拦截器", response);
    const responseData = response.data as IResponseType;
    return responseData;
  },
  (error) => {
    return Promise.reject(error);
  }
);

export default requestInstance;

集成相关代码规范库 🌈🌈

Eslint

安装：yarn add eslint -D

安装完后，在项目终端中执行：npx eslint --init 去创建配置文件，它会问一下问题：

  1. How would you like to use ESLint? （你想如何使用 ESLint?）

    • 选择第三个

    • To check syntax, find problems, and enforce code style（检查语法、发现问题并强制执行代码风格）

  2. What type of modules does your project use?（你的项目使用哪种类型的模块?）

    • 选择第一个

    • JavaScript modules (import/export)

  3. Which framework does your project use? （你的项目使用哪种框架?）

    • Vue.js

  4. Does your project use TypeScript?（你的项目是否使用 TypeScript？）

    • Yes

  5. Where does your code run?（你的代码在哪里运行?）

    • Browser

  6. How would you like to define a style for your project?（你想怎样为你的项目定义风格？）

    • Use a popular style guide（使用一种流行的风格指南）

  7. Which style guide do you want to follow?（你想遵循哪一种风格指南?）

    • Airbnb

  8. What format do you want your config file to be in?（你希望你的配置文件是什么格式?）

    • Js

  9. Would you like to install them now with npm?（你想现在就用 NPM 安装它们吗?）

    • NPM YES

执行完操作后，会自动安装对应的插件并且生成配置文件 .eslintrc.js 配置文件

  1. eslint-plugin-vue@latest： 可以检查vue文件的代码

  2. @typescript-eslint/eslint-plugin@latest

  3. eslint-config-airbnb-base@latest

  4. eslint@^7.32.0 || ^8.2.0

  5. eslint-plugin-import@^2.25.2

  6. @typescript-eslint/parser@latest

image.png

在此之后eslint就开始工作了，这时候你的项目将会是一片红，这对于刚刚接触的开发者来说简直就是噩梦😂 先不着急去解决爆红，继续集成。

创建 .eslintignore 文件

*.sh
node_modules
*.md
*.woff
*.ttf
.vscode
.idea
dist
/public
/docs
.husky
.local
/bin
Dockerfile

Prettier：

安装： yarn add prettier -D

配置Prettier配置文件：在项目根目录创建 .prettierrc文件，可以参考文档

{
  "printWidth": 120,
  "useTabs": false,
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none",
  "arrowParens": "avoid",
  "bracketSpacing": true,
  "vueIndentScriptAndStyle": true
}

注：VSCode 编辑器使用 Prettier 配置需要下载插件 Prettier - Code formatter。 勾选保存后格式化，并且选择格式化文档方式为 prettierrc

创建 .prettierignore 文件

/dist/*
.local
.output.js
/node_modules/**

**/*.svg
**/*.sh

/public/*

处理ESlint和Prettier冲突

解决两者冲突问题需要用到 eslint-plugin-prettier 和 eslint-config-prettier

  • eslint-plugin-prettier 会将Prettier的规则设置到ESlint的规则当中

  • eslint-config-prettier 关闭ESLint中和Prettier中发生冲突的规则

module.exports = {
  ...
  extends: [
    'plugin:vue/essential',
    'airbnb-base',
    'plugin:prettier/recommended' // 添加prettier插件 +
  ],
  ...
}

集成代码提交规范 😜😜

首先介绍着需要是要到的几款工具：

Git Hooks

集成代码提交规范主要是围绕着Git Hooks的钩子去工作，所以先简单的了解了解Git Hooks

pre-commit：在git commit之前执行

commit-msg：在git commit之前执行

post-merge：在git commit执行后

pre-push：在git push执行前

husky

husky 可以让我们向项目中方便添加 Git Hooks，总结来说操作Git钩子的工具

安装husky：npx husky-init && npm install

执行上述命令后会在我们的根目录下生成.husky文件夹，这里面装的就是git hook的钩子函数执行文件，pre-commit钩子是在提交信息前执行的，即在我们git commit的时候触发

同时会在package.json的scripts中生成一条新的命令："prepare": "husky install"

lint-staged

lint-staged 只检测那些加入缓冲区的文件，本地暂存代码检查工具

安装 lint-staged：npm install lint-staged -D

注：可以通过 npx mrm@2 lint-staged 这个命令会同时帮你安装husky和lint-staged，并做好配置

接下来添加package.json文件添加代码：

// 检查 src 所有目录下 js,jsx,ts,tsx,json 文件，执行下面的命令
"lint-staged": {
  "src/**/*.{js,jsx,ts,tsx,json}": [
    "prettier --write",
    "eslint",
    "git add"
  ]
},

再修改 pre-commit 文件

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx lint-staged

再进行测试 当我们 git commit -m 'xx' 的时候 会先去执行 npx lint-staged

commitlint

commitlint 规范团队遵守提交信息的约定，信息检查工具

安装：npm install @commitlint/cli @commitlint/config-conventional -D

执行命令 echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js 会在根目录创建 commitlint.config.js配置文件

注意使用上面这条命令创建的配置文件不是utf8格式的，在进行 git commit的时候回报：SyntaxError: Invalid or unexpected token的错误。

所以最好的方式就是自己手动创建配置文件，然后写入上面这个代码：module.exports = {extends: ['@commitlint/config-conventional']}

commit消息的书写格式： type(必填): description

类型描述
revert回滚到上一个版本
feat新增功能
fix修复 bug
docs修改文档
test测试用例的修改
refactor代码重构，未新增任何功能和修复任何 bug
build改变构建流程，新增依赖库、工具等（例如 webpack 修改)
style仅仅修改了空格、缩进等，不改变代码逻辑
perf改善性能和体现的修改
chore修改构建流程或工具
ci自动化流程配置修改

commitizen

commitizen 可以辅助我们，帮助我们填写规范的commit信息

安装：npm install commitizen cz-conventional-changelog -D

设置一条脚本：npm set-script commit "git-cz"

配置package.json的提交信息：

"config": {
    "commitizen": {
      "path": "cz-conventional-changelog"
    }
}

之后只同 执行脚本 commit 去填写commit信息

总结

想要搭建一套较为规范的项目基础框架是一个体力活，需要考虑多方面的问题。所以在此做个笔记，日后就节约时间了~~~

avatar
文章
阅读
粉丝