好看的网页千篇一律，有趣的代码万里挑一。

代码的世界属于你，你就是这里的国王，

大家好，今天继续跟着糖糖敲打出自己的梦想王国吧！

迪斯尼 三亚树酒店 居民楼

现实世界中有鳞次栉比的高楼大厦
有气势恢宏的雄伟建筑
有温馨明亮的居民楼
这些美丽的建筑如何建成的？
万丈高楼平地起，其中有个必备安全生产工具——脚手架。

脚手架

脚手架是为了保证各施工过程顺利进行而搭设的工作平台。
同样，代码王国中也有脚手架，就是Vue-cli，可以帮助我们快速搭建网页。

一、初始Vue-Cli

1. 安装

npm install -g @vue/cli
# OR
yarn global add @vue/cli

查看版本

vue --version

升级

npm update -g @vue/cli
# 或者
yarn global upgrade --latest @vue/cli

安装中 安装成功

2. 创建几个组件

2.1. 父子组件之间传值

<Goods :goodses="goodses" :carName="carName" :carPrice="carPrice" 
    @changeCarName="changeCarName" @changeCarPrice="changeCarPrice"></Goods>

// 接收属性
props:['goodses','carName','carPrice'],
    data() {
    return {
        // 备份props传递过来的参数
        myCarName:this.carName,
        myCarPrice:this.carPrice
    }
},
methods: {
        // 修改商品价格--价格每次加100
        updateGoods(id){
            this.goodses.find(g=>g.id===id).price+=100
        },
        // 删除商品
        deleteGoods(index){
            this.goodses.splice(index,1)
        },
        // 修改汽车名称
        updateCarName(){
            this.myCarName = '宝马'
            // 触发自定义事件changeCarName，将最新的汽车名称作为事件对象传回去。
            this.$emit('changeCarName',this.myCarName)
        },
        // 修改汽车价格
        updateCarPrice(){
            this.myCarPrice = '70W'
            // 触发自定义事件changeCarPrice，将最新的汽车价格作为事件对象传回去。
            this.$emit('changeCarPrice',this.myCarPrice)
        }
}

2.2. 安装Element-UI

安装

npm install element-ui

导入

// 导入element-ui组件库
import ElementUI from 'element-ui';
// 导入element-ui组件库的样式
import 'element-ui/lib/theme-chalk/index.css';
// 注意：element-ui组件库，是一个插件，所有的插件都要由Vue去use
Vue.use(ElementUI);

2.3. 安装Echarts

// 导入echarts的所有成员，并转成一个对象
import * as echarts from "echarts";
export default {
  name: "Echarts",
  data() {
      return {
          // 用户接收后台返回的数据   
          list:[]
      }
  },
  // 数据已经可以使用了   
  created() {
    // 发送ajax请求，获取数据
    this.list = [
        {
            name:'衬衫',
            count:5
        },
        {
            name:'羊毛衫',
            count:20
        },
        {
            name:'雪纺衫',
            count:36
        },
        {
            name:'裤子',
            count:10
        },
        {
            name:'鞋子',
            count:50
        }
    ]  
  },
  // 组件挂载完毕
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.querySelector(".box"));
    // 绘制图表
    myChart.setOption({
      title: {
        text: "ECharts 入门示例",
      },
      tooltip: {},
      // X轴信息   
      xAxis: {
        // 商品名称数据作为X轴信息展示
        data: this.list.map(r=>r.name),
      },
      // Y轴信息   
      yAxis: {},
      // 系列  
      series: [
        {
          name: "销量",
          type: "bar",
          // 显示每个商品的销售信息   
          data: this.list.map(r=>r.count)
        },
      ],
    });
  },
};