GitHub Copilot在VS Code中的使用Vue+Element

步骤 1: 安装 VS Code 和 GitHub Copilot

1. 安装 VS Code: 如果你还没有安装 VS Code，可以从 Visual Studio Code 官网 下载并安装。

2. 安装 GitHub Copilot: 在 VS Code 中，打开扩展侧边栏（侧边栏图标或使用快捷键 Ctrl+Shift+X），搜索 "GitHub Copilot"，然后点击安装。

步骤 2: 创建项目

1.  打开 VS Code 并创建一个新文件夹作为你的项目目录。

    

   

    

2.  打开终端：在 VS Code 中，你可以通过 Terminal > New Terminal 来打开一个新的终端窗口。

    

    

3.  初始化项目：在终端中运行以下命令来初始化一个新的 Node.js 项目并安装 Vue CLI：

    （之前请先下周node js安装官方地址 ，本文使用node 16.14.0的版本测试）

    安装vue 脚手架

   npm install -g @vue/cli

   

    

   vue create my-vue-project

   执行此脚本可能出现异常：Windows PowerShell 的执行策略限制，阻止了脚本的运行

   

    需要管理员运行power shell修改执行策略，脚本如下：

   Get-ExecutionPolicy
   Set-ExecutionPolicy RemoteSigned -Scope CurrentUser

   

    
   按照提示选择 Vue 3 预设（或者自定义配置），完成后，项目结构会被创建。

   

   

    4. 安装 Element Plus：Vue 3 需要使用 Element Plus 作为 Element UI 的替代。在项目目录中运行：

   cd my-vue-project
   npm install element-plus

   

    

   步骤 3: 配置项目

   1.  修改 main.js 或 main.ts：确保你引入了 Element Plus。例如，在 src/main.js 中添加：

      import { createApp } from 'vue'
      import App from './App.vue'
      import ElementPlus from 'element-plus'
      import 'element-plus/dist/index.css'
      
      // createApp(App).mount('#app')
      const app = createApp(App)
      app.use(ElementPlus)
      app.mount('#app')

      2. 修改 App.vue：使用 Element Plus 组件。例如，你可以添加一个按钮：

      <template>
        <img alt="Vue logo" src="./assets/logo.png">
        <HelloWorld msg="Welcome to Your Vue.js App"/>  
        <el-button type="primary">Click Me</el-button>
      </template>

      

       

      步骤 5: 运行和测试项目

      1. 运行项目：在终端中，运行：

          npm run serve

      2. 访问应用：在浏览器中访问 http://localhost:8080 查看你的 Vue 应用。

       

      

       

      可以在编辑页面直接调出Copilot

      

       提出所需要的需求，选中AI 模型就可生成所需要的逻辑代码，再做适当的调整和修改即可

      

       比如文中测试所提出的需求，生成出来的效果如下: