单文件组件

单文件组 全局/局部组件 data scoped 组件样式编写(sass) created异步请求(fetch/axios)正向/反向代理
为什么会解析以.vue为后缀名的单文件文件呢
因为内部安装了vue-loader插件

全局组件的注册

单文件组 全局/局部组件 data scoped 组件样式编写(sass) created异步请求(fetch/axios)正向/反向代理
Vue是原生模块,是在node-modules里的,所以不用加路径,HelloWorld是自定义模块,需要加路径

局部组件注册

单文件组 全局/局部组件 data scoped 组件样式编写(sass) created异步请求(fetch/axios)正向/反向代理

data

单文件组 全局/局部组件 data scoped 组件样式编写(sass) created异步请求(fetch/axios)正向/反向代理
为什么是函数返回对象的形式呢?
为了让每一个组件返回一份对象的独立的拷贝

scoped

父组件
单文件组 全局/局部组件 data scoped 组件样式编写(sass) created异步请求(fetch/axios)正向/反向代理
子组件加上scoped
单文件组 全局/局部组件 data scoped 组件样式编写(sass) created异步请求(fetch/axios)正向/反向代理
单文件组 全局/局部组件 data scoped 组件样式编写(sass) created异步请求(fetch/axios)正向/反向代理

同样为了组件样式更方便编写引用sass

单文件组 全局/局部组件 data scoped 组件样式编写(sass) created异步请求(fetch/axios)正向/反向代理

单文件组 全局/局部组件 data scoped 组件样式编写(sass) created异步请求(fetch/axios)正向/反向代理
scoped同样具有穿透功能
单文件组 全局/局部组件 data scoped 组件样式编写(sass) created异步请求(fetch/axios)正向/反向代理
如果是普通的css样式采用<<<就行
单文件组 全局/局部组件 data scoped 组件样式编写(sass) created异步请求(fetch/axios)正向/反向代理

可以配置别名alias

单文件组 全局/局部组件 data scoped 组件样式编写(sass) created异步请求(fetch/axios)正向/反向代理
单文件组 全局/局部组件 data scoped 组件样式编写(sass) created异步请求(fetch/axios)正向/反向代理
别忘了,配置更改,yarn serve

created异步数据请求(fetch)

单文件组 全局/局部组件 data scoped 组件样式编写(sass) created异步请求(fetch/axios)正向/反向代理

axios进行异步请求

1.yarn add axios 安装

单文件组 全局/局部组件 data scoped 组件样式编写(sass) created异步请求(fetch/axios)正向/反向代理
2.引入axios
两种方式就可以
单文件组 全局/局部组件 data scoped 组件样式编写(sass) created异步请求(fetch/axios)正向/反向代理

单文件组 全局/局部组件 data scoped 组件样式编写(sass) created异步请求(fetch/axios)正向/反向代理
以上这些请求,他们已经做了后端处理,并不需要跨域
处理跨域可以通过正向代理,反向代理的方式处理

正向代理

单文件组 全局/局部组件 data scoped 组件样式编写(sass) created异步请求(fetch/axios)正向/反向代理
单文件组 全局/局部组件 data scoped 组件样式编写(sass) created异步请求(fetch/axios)正向/反向代理
正向代理流程图
单文件组 全局/局部组件 data scoped 组件样式编写(sass) created异步请求(fetch/axios)正向/反向代理

反向代理

单文件组 全局/局部组件 data scoped 组件样式编写(sass) created异步请求(fetch/axios)正向/反向代理

相关文章: