学习 Vue 3 全家桶 - Vue 项目规范和基础封装

2023-05-17 16:58:05 浏览数 (1)

# 组件库

使用 Element3

代码语言：javascript复制
npm install element3 --save

在 src/main.js 中引入

代码语言：javascript复制
import { createApp } from 'vue'
import Element3 from 'element3'
import 'element3/lib/theme-chalk/index.css'

import App from './App.vue'
import router from './router/index'
import store from './store/index'

createApp(App)
  .use(store)
  .use(router)
  .use(Element3)
  .mount('#app')

# 工具库

# Axios

代码语言：javascript复制
npm install axios --save

对业务逻辑进行封装，提供统一的请求接口，并且支持统一的错误处理。

代码语言：javascript复制
import axios from 'axios';

import { useMsgbox, Message } from 'element3'

import store from '@/store';
import { getToken } from '@/utils/auth';

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000,
});

service.interceptors.request.use(
  (config) => {
    if (store.getters.token) {
      config.headers['X-Token'] = getToken();
    }
    return config;
  },
  (error) => {
    console.log(error);
    return Promise.reject(error);
  },
);

service.interceptors.response.use(
  (response) => {
    const res = response.data;
    if (res.code !== 200) {
      console.log(res.message);
      return Promise.reject(new Error(res.message || 'Error'));
    } else {
      return res;
    }
  },
  (error) => {
    console.log(error);
    return Promise.reject(error);
  }
);

export default service;

# Sass

在项目里集成 CSS 预编译器，可以更快、更高效地管理和编写 CSS 代码。

代码语言：javascript复制
npm install -D sass

使用 Sass 语法:

代码语言：javascript复制
<style lang="scss" scoped>
$white: #fff;

.info-wrapper {
  position: fixed;
  top: 20px;
  width: 200px;
}
.info {
  padding: 20px;
  color: $white;
  background-color: #d88986;
}
</style>

# 代码和提交规范

# ESLint

代码语言：javascript复制
npm install -D eslint

ESLint 配置初始化

代码语言：javascript复制
$ npx eslint --init
# You can also run this command directly using 'npm init @eslint/config'.
# npx: 40 安装成功，用时 2.748 秒
# ? How would you like to use ESLint? ...
#   To check syntax only
# > To check syntax and find problems
# √ How would you like to use ESLint? · problems    
# √ What type of modules does your project use? · esm
# √ Which framework does your project use? · vue
# √ Does your project use TypeScript? · No / Yes
# √ Where does your code run? · browser
# √ What format do you want your config file to be in? · JSON
# The config that you've selected requires the following dependencies:

# eslint-plugin-vue@latest
# √ Would you like to install them now? · No / Yes
# √ Which package manager do you want to use? · npm
# Installing eslint-plugin-vue@latest

可以在 .eslintrc.json 中修改配置

代码语言：javascript复制
{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/essential"
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "vue"
    ],
    "rules": {
    }
}

运行 ESLint 检查

代码语言：javascript复制
npx eslint src

# Git 规范

描述信息精准的 git 提交日志，会让后期维护和 处理 Bug 时有据可查。

推荐【类别: 信息】的格式，如：

  • feat: 新功能
  • fix: 修复 bug (issue #1)
  • docs: 文档
  • style: 代码格式
  • refactor: 代码重构
  • perf: 性能优化
  • test: 测试
  • chore: 构建过程或辅助工具的变动
  • revert: 回滚到上一个版本
  • WIP: 不完整的功能
  • BREAKING: 不兼容的变动
  • compat: 兼容性
  • build: 构建
  • ci: CI
  • deps: 依赖

# 三方库

# 独立工具

像 axios、 NProgress、xlsx、clipboard 等相对独立的工具来说，引入的难度非常低。

通常来说，使用这种独立的框架需要以下两步：

  1. 安装依赖
  2. 在项目的中引入依赖

# 组件封装

如，在 Vue 3 中集成 ECharts 的最简单的方式，就是封装一个 Chart 组件，把对应 option 配置以参数的形式传递给 Chart 组件，然后组件内部进行渲染即可。

也可以根据业务实现更详细的可视化组件封装。

# 注意事项

  • 考虑到项目的长期可维护性
  • 尽量不因为排期盲目堆积使用三方库
  • 慎用 mixin 和 extends
  • 尽量减少全局属性的使用，如果必须要用，务必将所有全局变量放在一个独立文件统一管理
  • 使用三方库，尽量按需引用避免体积过大
import 工具 管理 基础 配置

0 人点赞