前端开发新篇章：AI 助力效率激增！ | 社区征文

ECMAScript 2023 - Exploring New Features

增加了一些新api

来谈谈 AI 如何赋能的前端

下面来谈谈 AI 给我带来了哪些提效和变化。

代码生成

很多时候，我们都在写重复实现过的代码，有了AI，我们可以让它快速生成对应的代码，这样多出很多时间来，开发效率也提升了。例如：

下面是它生成的代码

<template>
  <el-form :model="loginForm" :rules="rules" ref="loginForm" label-width="100px">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="loginForm.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="loginForm.password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
      <el-button @click="resetForm('loginForm')">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { ElForm, ElInput, ElFormItem, ElButton } from 'element-plus';

export default defineComponent({
  components: {
    ElForm,
    ElInput,
    ElFormItem,
    ElButton
  },
  setup() {
    const loginForm = ref({
      username: '',
      password: ''
    });

    const rules = {
      username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
      ],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, message: '密码长度不能少于 6 个字符', trigger: 'blur' }
      ]
    };

    const submitForm = (formName: string) => {
      const form = loginForm.value as any;
      form.validate((valid: boolean) => {
        if (valid) {
          alert('submit!');
          // 在这里执行登录逻辑
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    };

    const resetForm = (formName: string) => {
      const form = loginForm.value as any;
      form.resetFields();
    };

    return {
      loginForm,
      rules,
      submitForm,
      resetForm
    };
  }
});
</script>

<style scoped>
/* 在这里添加样式 */
</style>

代码优化

这样执行效率也提升了，从而技术也提升了，它会解释你的代码，并且将优化的操作一步步讲解给你。

BUG 统治者 和 调节者

在没有AI之前，相信很多小伙伴都是遇到问题[BUG] ，各种Search，当你解决完了，然后一个一个Tab 页的关闭，有没有很熟悉，在Search 的过程需要花费很大的时间去试错，时间成本花费了很多。现在有了AI，直接把报错丢给它，它可以直接给出详细的解决方案，以及建议等；当有时遇到难解决的问题，你只要不断的把诉求 push 给它，它慢慢吸收，会给你一步一步推敲出你的问题所在，从而有了新灵感。

例如Uncaught Error: [Vue warn]: Maximum recursive updates exceeded. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself.

学习资源 & 读写文档

在没有AI 之前，我们很多人找学习资源都是各种 网盘，网站去检索，资源质量参差不齐，有了AI之后，例如，我要学习Vue3，我会让 它给我推荐一些优质的资源，来进行学习，当遇到难懂的，直接 push 给 AI， 它会直接反馈给你很容易读懂内容。

最后

AI技术在开发领域带来的提升效果是全方位的，它改变了我的工作方式、优化了开发流程，并在很多方面提高了效率和质量。

前端圈发生的变化链接🔗

• css nesting 写法 [https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting]
• repack [https://www.rspack.dev/zh/]
• TypeScript 更新 [https://devblogs.microsoft.com/typescript/]
• Electron 更新 [https://www.electronjs.org/blog/electron-23-0]
• 谷歌正式发布 WebGPU [https://developer.chrome.com/blog/webgpu-release?hl=zh-cn]
• Vite 版本更新内容 [https://github.com/vitejs/vite/releases]
• Vue3 更新内容 [https://blog.vuejs.org/posts/vue-3-3]
• ES14 [https://blog.saeloun.com/2023/08/11/2023-ECMAScript-2023-new-features/]

InfoQ 原文链接 ： 前端开发新篇章：AI 助力效率激增！