自动化引入 Less 变量到组件中

2024-01-13 18:37:45

小兔鲜儿项目 (Vue 3) 注意点总结

小兔鲜儿项目是一个由 Vue 3 提供支持的轻量级前端脚手架，旨在简化和加快现代 Web 开发。它提供了许多开箱即用的功能，包括开箱即用的 TypeScript 支持、代码拆分、按需加载和开箱即用的 CSS 预处理器（如 Sass 和 Less）。在使用小兔鲜儿项目时需要注意一些事项，本文将重点介绍一些需要注意的重要方面。

小兔鲜儿项目提供了自动化将 Less 变量引入组件的功能。这可以通过在 vue.config.js 文件中配置 chainWebpack 函数来实现。

// vue.config.js
module.exports = {
  chainWebpack: (config) => {
    const lessRegex = /\.less$/;
    config.module.rule('less').test(lessRegex).use('less-loader').loader('less-loader').tap(options => {
      options.lessOptions = {
        javascriptEnabled: true,
      };
      return options;
    });
  },
};

通过这种方式，可以在组件中使用 Less 变量，而无需手动导入它们。

小兔鲜儿项目遵循以下命名规范：

函数命名：

使用小驼峰式命名法。
前缀应为动词。

命名建议：

可使用常见动词约定。

动词	含义
`get`	获取
`set`	设置
`add`	添加
`remove`	移除

例如，一个获取用户数据的函数可以命名为 getUserData。

小兔鲜儿项目使用 ESLint 和 Prettier 来强制执行代码风格。推荐使用 JavaScript Standard Style 作为代码风格指南。这有助于确保代码的一致性和可读性。

小兔鲜儿项目开箱即用地支持 TypeScript。这使得开发人员能够利用 TypeScript 的类型检查和自动完成等功能。

小兔鲜儿项目支持按需加载，这有助于减少应用程序的初始大小并提高性能。可以通过使用 webpackChunkName 选项按需加载组件。

例如：

import { defineComponent, h } from 'vue';

export default defineComponent({
  name: 'MyComponent',
  webpackChunkName: 'my-chunk',
  setup() {
    // 组件逻辑
  },
  render() {
    return h('div', 'My Component');
  },
});