1. 初始化VUE项目-DeepSeek辅助编程

打开deepseek

输入关键字： 在vscode中创建一个vue控件项目

DeepSeek 返回：

在 Visual Studio Code 中创建 Vue 项目的步骤如下：
一、环境准备
1.安装 Node.js
- 官网下载：
https://nodejs.org (建议选择 LTS 版本)
- 安装后验证：
bash
复制
node -v
npm -v
2.安装 Vue CLI
bash
复制
npm install -g @vue/cli
二、创建 Vue 项目
1.打开 VS Code 终端（快捷键 Ctrl+`）
2.创建新项目：
vue create my-vue-project
选择：
- 默认使用 Vue 3
- 或手动选择特性（推荐选择 Babel + ESLint）
3.进入项目目录：
cd my-vue-project
三、项目结构说明
├── src/
│   ├── components/    # 组件目录
│   ├── App.vue        # 根组件
│   └── main.js        # 入口文件
├── public/            # 静态资源
└── package.json       # 项目配置
四、创建自定义组件
1.在 src/components 下新建 MyComponent.vue
<template>
  <div class="my-component">
    <h2>{{ title }}</h2>
    <button @click="handleClick">点击计数 {{ count }}</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const title = '我的第一个组件'
const count = ref(0)

const handleClick = () => {
  count.value++
}
</script>

<style scoped>
.my-component {
  border: 1px solid #eee;
  padding: 20px;
}
</style>
2.在 App.vue 中使用组件：
<template>
  <div id="app">
    <MyComponent />
  </div>
</template>

<script setup>
import MyComponent from './components/MyComponent.vue'
</script>
五、运行项目
npm run serve
访问 http://localhost:8080 查看效果
六、VS Code 推荐扩展
1.Volar (Vue 官方扩展)
2.ESLint
3.Prettier - Code formatter
4.Vue VSCode Snippets
七、项目打包
npm run build
生成文件位于 dist/ 目录
常见问题处理
1.如果遇到 ESLint 报错：
- 可在.eslintrc.js 中调整规则
- 或暂时关闭：在vue.config.js 中添加：
module.exports = {
  lintOnSave: false
}
2.需要添加 Vue Router：
vue add router
提示：使用组合式 API (script setup) 需要 Vue 3.2+ 版本，如需兼容旧版本可使用传统选项式 API。

　　

运行结果：

 

 代码地址