# vue3-learning

**Repository Path**: fangyuchuang/vue3-learning

## Basic Information

- **Project Name**: vue3-learning
- **Description**: vue3-learning
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2024-03-27
- **Last Updated**: 2025-06-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-vite-ts 学习工程

## 工程介绍：
该工程是通过bilibili中两个视频教案写。如果需要参考，可以观看教案：

 - 千锋前端Vue3.0 + Electron快速入门视频教程，基于Vue3.0+Electron 19桌面混合开发项目实战教程
 - https://www.bilibili.com/video/BV1FP4115739/

 - 尚硅谷Vue项目实战硅谷甄选，vue3项目+TypeScript前端项目一套通关
 - https://www.bilibili.com/video/BV1Xh411V7b5?p=1

 - Vite世界指南（带你从0到1深入学习 vite）
 - https://www.bilibili.com/video/BV1GN4y1M7P5

工程前面知识点的案例代码是参考《千锋前端Vue3.0 + Electron快速入门视频教程》，测试时，直接在app.vue文件中，修改需要加载首个vue，如图所示： 

- 最后一个工程案例：./views/99-综合项目  就根据视频《尚硅谷Vue项目实战硅谷甄选》的代码。如果需要参考该视频的代码，只需要把
app.vue中，启动的项目入口写为（其它的注释掉）：
  ``` ts   app.vue
    // import Demo from './views/28-mock数据/Demo.vue'
    // import Demo from './views/29-axios二次封装/Demo.vue'
    // import Demo from  './views/30-API接口统一管理/Demo.vue'
       import Demo from './views/99-综合项目/Demo.vue'
  ``` 
并使用就可以本地测试: npm run dev
- 由于《尚硅谷Vue项目实战硅谷甄选》中的后半段教案内容，使用的访问接口是尚硅谷自己的服务器，代码中修改了vite.config.js ，使用测试环境配置即可以兼容。如果是要测试尚硅谷的服务接口，使用命令：npm run test

本地mock的数据接口和尚硅谷测试服务器接口已修改一样，完全兼容。

## 工具介绍

这个工程建议使用webstorm工具，同时建议使用插件CodeGeex，可以起到很好的代码提示。开始工程前面，最好能对webstorm进行一些设置，让webstorm，在编写代码过程中，给到很好的自动提示，能让你写vue和ts代码有idea写java的乐趣。

#### 1、 webstrom 让 vue文件中的<script></script>标签内的代码前面有两个空格。
- ![输入图片说明](image.png)

#### 2、 增加caf 模板缩写设置：
![输入图片说明](image.png)

#### 3、一定要使用CodeGeex插件，使用这个AI插件，代码忘记怎么写，先写注释，它会给思路让你修改补全。