Vue前端开发流程

1.安装环境
- 1.1 安装node
- 1.2 安装Cnpm（中国 npm 镜像的客户端）
2. 初始化项目--
- 2.1准备工作
- - 2.1.1 安装Vue-cli
  - 2.1.2 安装webpack
- 2.2 创建项目
3. 多组件和标准Vue页面
4. Vue组件之间的数据传递
- 4.1父组件向子组件传值
- 4.2子组件向父组件传值
- 4.3同级关系的数据传递
5. VueBus( Vue事务总线)
- 5.1 概念
- 5.2 Bus.js的操作
- 5.2.1创建bus.js
- 5.2.2在main.js中引入bus.js ,并且设置为全局变量
- 5.2.3使用bus.js
- 5.2.4回收bus
- 5.3 使用 emit on off
- 5.4 其它注册方式
6. 通过EventBus 实现组件之间数据传递
- - - - 优点：没有级别和关系的限制
      - 缺点： bus不会随着组件的销毁而自动销毁，需要我们手动销毁
- 6.1定义 bus.js 一般在src目录下的utils的包中创建
- 6.2在main.js 中配置全局
- 6.3基本使用
7. Axios与json
- 7.1什么是Axios
- - 7.1.1使用axios
- 7.2什么是json
- - 7.2.1 http
  - 7.2.2 前后台交互
  - 7.2.3接口的概念
8. Vue第三方套件使用
- 8.1 V-Charts
- - 8.1.1 先npm安装vue-echarts
  - 8.1.2 开发：
- 8.2 ECharts([https://echarts.apache.org/examples/zh/index.html](https://echarts.apache.org/examples/zh/index.html))
- - 8.2.1 先npm安装echarts
  - 8.2.2 查看package.json中安装好的依赖
  - 8.2.3 开发：
- 8.3 Element([https://element.eleme.cn/#/zh-CN](https://element.eleme.cn/#/zh-CN))
- - 8.3.1 element插件的安装
9. Vue项目(前端)部署上线

1.安装环境

1.1 安装node

node与npm一起捆绑安装;

下载地址：

https://nodejs.org/en/

用以下命令检查是否安装好：

node –v

npm –v

Vue前端开发流程1.安装环境2. 初始化项目–3. 多组件和标准Vue页面4. Vue组件之间的数据传递5. VueBus( Vue事务总线)6. 通过EventBus 实现组件之间数据传递7. Axios与json8. Vue第三方套件使用9. Vue项目(前端)部署上线

1.2 安装Cnpm（中国 npm 镜像的客户端）

npm install -g cnpm --registry=https://registry.npm.taobao.org

如果不行，换命令安装：

npm install --registry=https://registry.npm.taobao.org

Vue前端开发流程1.安装环境2. 初始化项目–3. 多组件和标准Vue页面4. Vue组件之间的数据传递5. VueBus( Vue事务总线)6. 通过EventBus 实现组件之间数据传递7. Axios与json8. Vue第三方套件使用9. Vue项目(前端)部署上线

用以下命令检查是否安装好：

cnpm -v

2. 初始化项目–

2.1准备工作

2.1.1 安装Vue-cli

cnpm install -g @vue/cli

安装桥接工具（脚手架工具）

cnpm install -g @vue/cli-init

用以下命令检查vue是否安装好：

vue -V (v必须大写)

2.1.2 安装webpack

webpack 是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起,打包后的文件用于在浏览器中使用。

cnpm install -g webpack

2.2 创建项目

vue init webpack my-project (2.X)

拒绝npm安装

cnpm install(国内下载)

成功下载安装

前端服务器成功启动

在浏览器中输入：

http://localhost:8080

3. 多组件和标准Vue页面

4. Vue组件之间的数据传递

4.1父组件向子组件传值

父传递: <.right :url=“url”><./right>
子接收: props: ['url’]

4.2子组件向父组件传值

父接收: <left @changeurl=“changeurl”><./left>
子抛出: this.$emit(‘changeurl’, url)

4.3同级关系的数据传递

通过介质传递，同一个字元素或者同一个父元素就是介质

this.$on(res=>{
   // 数据监听，进行数据处理
})

5. VueBus( Vue事务总线)

5.1 概念

vue bus可以实现不同组件间、不同页面间的通信，如在A页触发发点击事件，要B页面发生变化
一个中央事件总线bus，可以作为一个简单的组件传递数据，用于解决跨级和兄弟组件通信问题

5.2 Bus.js的操作

5.2.1创建bus.js

import Vue from 'vue'
 const Bus = new Vue()
  export default Bus

5.2.2在main.js中引入bus.js ,并且设置为全局变量

import bus from './bus/bus'
Vue.prototype.$bus = bus

5.2.3使用bus.js

一个组件中：

另一个组件中:

this.$bus.$on('传递的数据的名字', res => {
    // 对得到的数据的callback进行处理
     
    })

5.2.4回收bus

beforeDestroy () {
    this.$bus.$off('传递的数据的名字', { })
  }

5.3 使用 emit on off

import Bus from './Bus'
export default {
    data() {
        return {
            .........
            }
      },
  methods: {
        ....
        Bus.$emit('log', 120)
    },
  }

import Bus from './Bus'
export default {
    data() {
        return {
            .........
            }
      },
    mounted () {
       Bus.$on('log', content => { 
          console.log(content)
        });    
    }    
}

5.4 其它注册方式

Main.js中

import bus from './vuebus/Bus'
Vue.prototype.Bus = bus

使用

this.Bus.$emit('clickTest', '我在footer点击’)
this.Bus.$on('clickTest', content => {
      this.text = content
    })

6. 通过EventBus 实现组件之间数据传递

优点：没有级别和关系的限制
缺点： bus不会随着组件的销毁而自动销毁，需要我们手动销毁

6.1定义 bus.js 一般在src目录下的utils的包中创建

import Vue from "vue"  
export default new Vue()

6.2在main.js 中配置全局

6.3基本使用

from组件，在方法中添加如下所示，传递数据

to组件，在方法中进行接收数据

this.$bus.$on('row', res => { // 通过相同的名字，接收数据，并入callback的数据进行处理              
      this.Province = res
    })

to组件中记得销毁bus 不然会出现bug

beforeDestroy () {
    this.$bus.$off('row', { })
  }

7. Axios与json

7.1什么是Axios

axios 是一个基于 promise 的 HTTP 库，在浏览器和 node.js 中使用
axios主要是用于向后台发起请求的，还有在请求中做更多是可控功能

7.1.1使用axios

npm install axios --save

main.js

import axios from 'axios’
Vue.prototype.$axios = axios
this.$axios.get('/terms')
      .then(this.res1Method).catch((err) => {
        this.catchMethod(err)
      })

7.2什么是json

JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
JSON 是轻量级的文本数据交换格式
JSON 独立于语言 *
JSON 具有自我描述性，更易理解
*JSON 使用 JavaScript 语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。

7.2.1 http

HTTP协议（HyperText Transfer Protocol，超文本传输协议）是因特网上应用最为广泛的一种网络传输协议，所有的WWW文件都必须遵守这个标准。

HTTP是一个基于TCP/IP通信协议来传递数据（HTML 文件, 图片文件, 查询结果等）。

7.2.2 前后台交互

7.2.3接口的概念

8. Vue第三方套件使用

8.1 V-Charts

8.1.1 先npm安装vue-echarts

cnpm install v-charts --save

8.1.2 开发：

除了全量引用echarts，我们还可以采用按需引入的方式

main.js

import VCharts from ‘v-charts’

创建VChartsDemo.vue（在原HelloWorld.vue中修改）

<template>
  <div id="vcharts-demo">
    <ve-line :data="chartData" ref="chart1"></ve-line>
  </div>
</template>
<script type="text/ecmascript-6">
// 引入提示框组件、标题组件、工具箱组件、图例组件。
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import 'echarts/lib/component/toolbox'
import 'echarts/lib/component/legendScroll'
// 引入v-charts折线图组件。
import VeLine from 'v-charts/lib/line'
import 'v-charts/lib/style.css'

export default {
  components: {
    VeLine
  },
  data () {
    return {
      chartData: {
        columns: ['日期', '销售额-1季度'],
        rows: [
          {'日期': '1月1日', '销售额-1季度': 1523},
          {'日期': '1月2日', '销售额-1季度': 1223},
          {'日期': '1月3日', '销售额-1季度': 2123},
          {'日期': '1月4日', '销售额-1季度': 4123},
          {'日期': '1月5日', '销售额-1季度': 3123},
          {'日期': '1月6日', '销售额-1季度': 7123}
        ]
      }
    }
  },
  created () {
    // 这是模拟动态数据用的
    setTimeout(() => {
      this.chartData = {}
      this.chartData = {
        columns: ['日期', '销售额-1季度'],
        rows: [
          {'日期': '1月1日', '销售额-1季度': 1523},
          {'日期': '1月2日', '销售额-1季度': 1223},
          {'日期': '1月3日', '销售额-1季度': 2123},
          {'日期': '1月4日', '销售额-1季度': 4123},
          {'日期': '1月5日', '销售额-1季度': 3123},
          {'日期': '1月6日', '销售额-1季度': 7123},
          {'日期': '1月7日', '销售额-1季度': 1583},
          {'日期': '1月8日', '销售额-1季度': 1273},
          {'日期': '1月9日', '销售额-1季度': 2163},
          {'日期': '1月10日', '销售额-1季度': 4523},
          {'日期': '1月11日', '销售额-1季度': 3323},
          {'日期': '1月12日', '销售额-1季度': 7223}
        ]
      }
    }, 2000)
  },
  mounted () {
  }
}
</script>

<style scoped>

</style>

完成效果：

8.2 ECharts(https://echarts.apache.org/examples/zh/index.html)

8.2.1 先npm安装echarts

cnpm install echarts --save

cnpm install [email protected] --save（建议安装低版本）

8.2.2 查看package.json中安装好的依赖

8.2.3 开发：

main.js

import myCharts from './comm/js/myCharts.js'
Vue.use(myCharts)

创建myCharts.js

/**
 * 各种画echarts图表的方法都封装在这里
 * 注意：这里echarts没有采用按需引入的方式，只是为了方便学习
 */

import echarts from 'echarts'
const install = function(Vue) {
    Object.defineProperties(Vue.prototype, {
        $chart: {
            get() {
                return {
                    //画一条简单的线
                    line1: function (id) {
                        this.chart = echarts.init(document.getElementById(id));
                        this.chart.clear();

                        const optionData = {
                            xAxis: {
                                type: 'category',
                                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [{
                                data: [820, 932, 901, 934, 1290, 1330, 1320],
                                type: 'line',
                                smooth: true
                            }]
                        };

                        this.chart.setOption(optionData);
                    },
                }
            }
        }
    })
}

export default {
    install
}

创建HelloWorld

<template>
  <div class="hello">
    <div id="chart1"></div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
    }
  },
  mounted() {
    this.$chart.line1('chart1');
  }
}
</script>

<style scoped>
  #chart1 {
    width: 300px;
    height: 300px;
  }
</style>

完成效果：

注意与bug：

这里有一个坑：

直接报错"export ‘default’ (imported as ‘echarts’) was not found in ‘echarts’

重新更新echarts等各种方法都试了，还是解决不了问题

最后在Google 查出来一个问题说可能是版本问题，进行校验后发现第一次安装的为5.0，别人的4.9

经测试，echarts 不支持echarts最新版本5.0.0因此引入4.9.0

最后发现只能执行：

cnpm install [email protected] --save

才可以变更为4.9

8.3 Element(https://element.eleme.cn/#/zh-CN)

8.3.1 element插件的安装

vue 引入element-ui

vue add element

自动配置插件，只需要这一步即可

在这里插入图片描述

启动前端服务器vue

npm run dev

之后参照官方文档，选取自己需要的样式，全部复制（包括template , script , style 先保证可以运行），再进行微调。

9. Vue项目(前端)部署上线

npm run build

dist

Vue前端开发流程1.安装环境2. 初始化项目–3. 多组件和标准Vue页面4. Vue组件之间的数据传递5. VueBus( Vue事务总线)6. 通过EventBus 实现组件之间数据传递7. Axios与json8. Vue第三方套件使用9. Vue项目(前端)部署上线

Vue前端开发流程

1.安装环境

1.1 安装node

1.2 安装Cnpm（中国 npm 镜像的客户端）

2. 初始化项目–

2.1准备工作

2.1.1 安装Vue-cli

2.1.2 安装webpack

2.2 创建项目

3. 多组件和标准Vue页面

4. Vue组件之间的数据传递

4.1父组件向子组件传值

4.2子组件向父组件传值

4.3同级关系的数据传递

5. VueBus( Vue事务总线)

5.1 概念

5.2 Bus.js的操作

5.2.1创建bus.js

5.2.2在main.js中引入bus.js ,并且设置为全局变量

5.2.3使用bus.js

5.2.4回收bus

5.3 使用 emit on off

5.4 其它注册方式

6. 通过EventBus 实现组件之间数据传递

优点 ：没有级别和关系的限制

缺点： bus不会随着组件的销毁而自动销毁，需要我们手动销毁

6.1定义 bus.js 一般在src目录下的utils的包中创建

6.2在main.js 中配置全局

6.3基本使用

7. Axios与json

7.1什么是Axios

7.1.1使用axios

7.2什么是json

7.2.1 http

7.2.2 前后台交互

7.2.3接口的概念

8. Vue第三方套件使用

8.1 V-Charts

8.1.1 先npm安装vue-echarts

8.1.2 开发：

8.2 ECharts(https://echarts.apache.org/examples/zh/index.html)

8.2.1 先npm安装echarts

8.2.2 查看package.json中安装好的依赖

8.2.3 开发：

8.3 Element(https://element.eleme.cn/#/zh-CN)

8.3.1 element插件的安装

9. Vue项目(前端)部署上线

继续阅读

优点：没有级别和关系的限制