vue 学习总结（一）[Vue-Cli脚手架、插槽、axios、代理、全局事件总线]

目录

Vue-Cli脚手架

环境搭建

脚手架创建项目结构分析 

插槽

默认插槽

具名插槽

作用域插槽

vue中的ajax

axios

案例：访问github用户接口

 代理

什么是跨域

怎么解决跨域

什么是代理

代理配置

全局事件总线

---

Vue-Cli脚手架

环境搭建

1. 首先安装Node.js环境，Node.js环境搭建完毕即可使用npm命令
2. 打开cmd命令行窗口，接下来所有操作在cmd里执行，以下红色字体为指令
3. 如果下载缓慢请配置 npm 淘宝镜像：npm config set registry http://registry.npm.taobao.org
4. 全局安装@vue/cli：npm install -g @vue/cli
5. 切换到你要创建项目的目录：cd vue-projects/
6. 使用命令创建项目：vue create demo
7. 上下方向键选择使用vue的版本，回车确定，开始自动创建项目（demo）
8. 创建完毕，进入到demo目录，cd demo
9. 启动项目：npm run serve
10. 暂停项目：快捷键Ctrl+C

Vue 脚手架隐藏了所有 webpack 相关的配置，若想查看具体的 webpakc 配置，请执行：vue inspect > output.js 

脚手架创建项目结构分析 

.文件目录
├── node_modules 
├── public
│   ├── favicon.ico: 页签图标
│   └── index.html: 主页面
├── src
│   ├── assets: 存放静态资源
│   │   └── logo.png
│   │── component: 存放组件
│   │   └── HelloWorld.vue
│   │── App.vue: 汇总所有组件
│   └── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件 
├── README.md: 应用描述文件
└── package-lock.json: 包版本控制文件

插槽

默认插槽

• 插槽相当于在组件中占一个位置，当使用者调用组件时，组件标签内的值会解析到插槽所在的位置

比如：使用者App.vue，子组件Category.vue

在App.vue中使用Category组件

<Category>
    <h1>我是将被解析到插槽中的元素</h1>
    <h2>我也同样会放置到插槽中</h2>
</Category>

在Category组件中，需要放置上面元素的位置写个slot标签

<slot>
    我是默认值，如果调用本组件的标签中没有设置元素，我将显示
</slot>

结果 

具名插槽

• 给slot标签设置name属性
• 需要放置到slot里的内容，在自身标签中设置slot属性

在App.vue中使用Category组件

<Category>
    <h1 slot="top">我会被放置到name为top的slot的位置</h1>
    <h2 slot="top">我也同样会放置到name为top的slot的位置</h2>
    <h2 slot="bottom">我会放置到name为bottom的slot的位置</h2>
</Category>

在Category组件中，需要放置上面元素的位置写个slot标签

<slot name="top">
    我是默认值，如果没有使用者制动top调用我，我将显示
</slot>
<slot name=&