Vue学习笔记 - 2019

一、安装Node

1. 首先安装Node环境
2. 配置环境变量：path指引Node目录，比如：path：D:/Node
3. cmd黑窗口查看环境是否配置正确：node -v 出现版本号就没问题

二、Vue-cli

2.1 初识vue-cli3

首先我们搭建Vue开发环境，这里我们使用Vue-cli（脚手架），它会帮我们生成Vue开发的项目结构，在使用Vue-cli之前，由于我们安装的方式是Npm所以要先确保当前系统安装了Node环境

1. cmd黑窗口：npm install -g @vue/cli 这是全局安装
2. 命令vue -V 查看是否安装vue成功

2.2 搭建项目

1. cmd黑窗口：vue create 项目名

2. 我们选择自定义安装，空格选中，回车确定
   
   
   
   .
   
   
   
   
   

3. 启动项目：当Npm把项目配置好后cd 到项目中，执行 npm run serve 命令

2.3 目录结构

|-- src                              // 源码目录

|  |-- components                  // vue公共组件

|  |-- router                      // vue的路由管理

|  |-- App.vue                      // 页面入口文件

|  |-- main.js                      // 程序入口文件，加载各种公共组件

|-- public                          // 静态文件，比如一些图片，json数据等

|  |-- favicon.ico                      // 图标文件

|  |-- index.html                      // 入口页面

|-- vue.config.js                          // 是一个可选的配置文件，包含了大部分的vue项目配置

|-- .babelrc                        // ES6语法编译配置

|-- .editorconfig                    // 定义代码格式

|-- .gitignore                      // git上传需要忽略的文件格式

|-- .postcsssrc                      // postcss配置文件

|-- README.md                        // 项目说明

|-- package.json                    // 项目基本信息,包依赖信息等

三、Vue的ajax

3.1 axios使用方式

``

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

axios({
    method: 'post',
    url: '/user/12345',
    data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
    }
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

四、Vue父子组件

4.1 父组件向子组件传递数据

子组件在父组件的并作为标签引入，通过设置标签的属性传递数据，在子组件用props接受，，例如下面这样，父组件parent.vue引入子组件child.vue，将父组件的数据name通过设置标签child的name属性传递给子组件，子组件通过props传递接受，接受后，在子组件内this.name就是父组件的name数据。

4.2 子组件向父组件传递数据

1. 发布订阅 发布 emit 订阅 on{}
2. on订阅，emit发布，on和emit是在Vue的原型上的，每个实例都可以调用。
3. 父亲绑定一个事件，儿子触发这个事件，并将参数传递过去

五、Vue拦截器