好看的网页千篇一律，有趣的代码万里挑一。
代码的世界属于你，你就是这里的国王，
大家好，今天继续跟着糖糖敲打出自己的梦想王国吧！
迪斯尼
三亚树酒店
居民楼
现实世界中有鳞次栉比的高楼大厦
有气势恢宏的雄伟建筑
有温馨明亮的居民楼
这些美丽的建筑如何建成的？
万丈高楼平地起，其中有个必备安全生产工具——脚手架。
脚手架
脚手架是为了保证各施工过程顺利进行而搭设的工作平台。
同样，代码王国中也有脚手架，就是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)
},
],
});
},
};
