目录

vscode工具的简介

快捷键

建项目，选中vscode_vue3的开发空间(文件夹)

配置axios , router , element-plus

使用idea或者vscode打开vite-240文件夹

在vscode中运行此vue工程

解决跨域问题，

找到网址：配置 Vite | Vite 官方中文文档

设置服务器代理配置，自定义服务器代理规则，解决跨域问题

使用axios测试连接

仿佛解决了问题。期待进一步学习

单页面组件的访问流程

了解package.json文件，类似于maven工程的pom.xml文件

入口是index.html

在index.html中引入了，main.js文件，

---

1. vscode工具的简介

2. 快捷键

删除一行     ctrl+x     
复制一行     alt+shift+up/down
移动整行     alt+up/down 
打开终端        ctrl+shift+y  
停止服务        ctrl+c  
清屏            cls  
注释            ctrl+/  
显示/隐藏左侧边栏    ctrl+B
关闭所有已保存窗口   ctrl+W      关闭当前窗口
切换文件        ctrl+tab    或  alt+1/2/3/4  
新开窗口        Ctrl+Shift+N   


插入光标-支持多个    alt + 点击
撤销最后一次光标操作     ctrl+U
格式化代码            shift+alt+F

1. 建项目，选中vscode_vue3的开发空间(文件夹)

1. 使用cmd进入dos窗口新建vue3项目y

1. 选完之后，文件夹生成，按照提示进行下一步
2. 进入刚生成的文件，使用命令cd +tab 自动跳转到目标文件夹

1. 配置axios , router , element-plus

1. 使用idea或者vscode打开vite-240文件夹

1. 在vscode中运行此vue工程

命令是npm run dev

1. 解决跨域问题，

2. 找到网址：配置 Vite | Vite 官方中文文档

1. 设置服务器代理配置，自定义服务器代理规则，解决跨域问题

server: { port:80,// 设置端口号是80，有可能无法使用或被占用 open:true,// 设置自动打开浏览器 proxy: { '/api': { target: 'http://localhost:8080/', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, ''), } } }

1. 使用axios测试连接

1. 仿佛解决了问题。期待进一步学习

单页面组件的访问流程

1. 了解package.json文件，类似于maven工程的pom.xml文件

1. 入口是index.html

1. 在index.html中引入了，main.js文件，

import { createApp } from 'vue'
// 引(导)入App.vue文件，才能生效
// 任何一个单页面组件的使用，丢必须要引入到这里，例如下面的引入方式
import App from './App.vue'
// 想要使用element-plus，
// 第一，需要install安装组件，命令是npm i element-plus --save  
// 第二，从官网中，复制快速入门的文件引入信息
import ElementPlus from 'element-plus'
// 下面是css层叠样式表的引入
import 'element-plus/dist/index.css'

// 实例化一个app对象，类似于之前的创建vue
// 创建一个新的vue应用实例
// 从另一个文件中导入根组件,从App.vue导入根组件，
// 了解组件模块化开发，需要掌握node.js
const app = createApp(App)
// 挂载ElementPlus
app.use(ElementPlus)
// 挂载到vue的app中生效
app.mount('#app')

1. 而在main.js文件中，使用了vue的方式，引入了app.vue作为单页面访问
2. 单页面应用开发，没有页面跳转一说，只有路由，