(Vue-cli)一、初始Vue-cli（安装&创建组件&父子组
Vue-cli文档 =>火速一键进入学习
一、初始Vue-cli
1.介绍&安装
Vue-cli就是Vue的开发者工具(脚手架工具)
电脑中打开cmd，首先先检查node及npm是否安装，用node -v 及 npm -v来检测版本号
① 首先在全局cmd中安装 npm install -g @vue/cli ，
后使用vue --version来检测版本号是否正确，需4.5.以上的版本。
② 如何创建项目： 使用vue create +项目名(名称内不能有中文及大写字母)例如vue create demo，选择Default Vue2，即可创建完成。
其中
public是静态目录，
src为代码目录
（其中assets为静态资源目录，一般项目中的样式，字体，图标都放在assets中；components为组件存放的包；App.vue是全局组件；main.js是入口文件，main.js中的#app实例在public的index.html中），
node_modules是项目依赖(包)，
babel.config.js是es6转es5的文件，
package.json是包的描述文件。
如何运行网页：首先跳转到根目录，再 npm run serve 指令。
③ components中每个文件就是一个组件，每个组件由三个部分组成；
xxx.vue是vue的单文件组件，template放置模板内容，script里面放置js代码，style里面放置样式代码。一般习惯组件的首字母大写。
2.创建组件
① 单文件组件
单文件组件：把一个组件全部内容汇合到一个文件中，文件名字是以 .vue 结尾，这个文件就是单文件组件。
xxx.vue是vue的单文件组件。
每个vue的单文件组件由三个部分组成：template里面放置模板内容，script里面放置js代码，style里面放置样式。
<template>
<div>
</div>
</template>
<script>
export default {
name:'Child'
}
</script>
<style>
</style>
② 使用组件的步骤
（1）导入组件：
import Child from './components/Child.vue'
（2）注册组件：
export default {
// name选项定义组件的名称
name: 'App',
components:{
Child
}
}
③ 使用组件
<div id="app">
<Child></Child>
</div>
3.父子组件之间传值
(1) 子组件
子组件通过props定义属性，接收父组件传过来的数据。
props中定义的属性是只读、不可修改的，不过可以在data中对父组件传递过来的值进行中转，以修改data中的数据。如果属性是一个对象，可以通过 obj.属性名 修改对象的属性值。
子组件通过$emit()触发自定义事件，将最新的数据作为事件对象传回去。
<div class="child">
<h3>{{title}}</h3>
<hr>
<p>车名：<input type="text" v-model="car.name"></p>
<p>车价：<input type="text" v-model="car.price"></p>
<hr>
<p>飞机名称：<input type="text" v-model="myPlaneName"></p>
<p>飞机价格：<input type="text" v-model="myPlanePrice"></p>
</div>
// 每个组件，其实就是一个导出的对象
export default {
name:'Child',
props:['car','planeName','planePrice'],
// 注意：组件里面的data一定要是一个方法，由方法返回一个对象
data() {
return {
title:'我是Child组件',
// 中转父组件传递过来的值
myPlaneName : this.planeName,
myPlanePrice : this.planePrice
}
},
watch:{
myPlaneName(val){
this.$emit('updatePName',val)
},
myPlanePrice(val){
this.$emit('updatePPrice',val)
}
}
}
(2) 父组件
父组件可以通过绑定属性，将数据传给子组件。
父组件通过绑定自定义事件，更新数据。
<div id="app">
<h2>{{title}}</h2>
<p>汽车信息：{{car}}</p>
<p>飞机信息：{{planeName}}-{{planePrice}}</p>>
<Child :car="car" :planeName="planeName" :planePrice="planePrice"
@updatePName="planeName=$event" @updatePPrice="planePrice=$event"></Child>
</div>
import Child from './components/Child.vue'
export default {
// name选项定义组件的名称
name: 'App',
// data选项定义组件的数据
data() {
return {
//定义一辆车的信息
car:{
name:'奔驰',
price:'50W'
},
//飞机信息
planeName:'波音747',
planePrice:'10Y'
}
},
components:{
Child
}
}
4.如何在脚手架的环境中，使用第三方组件库 =>>> Element-UI组件库导入并使用
ElementUI用法
(1) 安装 npm i element-ui -S
(2) 在main.js文件中：
导入ElementUI组件库import ElementUI from ' element-ui'
导入ElementUI组件库的样式import 'element-ui/lib/theme-chalk/index.css'
由于ElementUI组件库是插件，所以必须要use一哈 Vue.use(ElementUI)
后续将第三方组件库中的代码及data数据引入componetns文件中
(1) 安装
npm i element-ui -S
(2) 导入
// 导入element-ui组件库
import ElementUI from 'element-ui';
// 导入element-ui组件库的样式
import 'element-ui/lib/theme-chalk/index.css';
// 注意：element-ui组件库，是一个插件，所有的插件都要由Vue去use
Vue.use(ElementUI);
(3) 使用
<template>
<div class="el">
<h3>Element-UI组件库</h3>
<el-pagination background layout="prev, pager, next" :total="1000">
</el-pagination>
</div>
</template>
<script>
export default {
name: "Element"
};
</script>
<style>
.el {
border: green solid 1px;
padding: 10px;
margin-top: 10px;
}
</style>
5.如何在vue的工程化的环境中去使用可视化Echarts呢
(1) 在创建的项目demo安装
npm install echarts --save
(2) 在需要使用图表库的组件中导入echarts对象
import * as echarts from 'echarts';
(3) 在需要使用图表库的组件中准备容器
<div class="charts">
<h3>在vue项目中使用ECharts</h3>
<div id="main"></div>
</div>
(4) 选择示例图
在官网找到想要的示例，下载示例。
(5) 引入 ECharts
基于准备好的dom初始化echarts实例，绘制图表。因为该项目是基于vue，所以需要在mounted生命周期中进行这一步（获取dom，需要在页面挂载完成后进行）。
- 柱状图实例
在需要使用ECharts图表库的组件(components下的xxx.vue)中export default对外输出本模块变量
export default {
name: "Charts",
data(){
return {
list:[
{
title:'衬衫',
sale:5,
stock:9
},
{
title:'羊毛衫',
sale:20,
stock:19
},
{
title:'雪纺衫',
sale:36,
stock:55
},
{
title:'裤子',
sale:10,
stock:2
},
{
title:'高跟鞋',
sale:10,
stock:5
},
{
title:'袜子',
sale:20,
stock:35
},
]
}
},
mounted() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("main"));
// 绘制图表
myChart.setOption({
title: {
text: "产品销售信息",
subtext:'2021-12-18'
},
legend:{
},
tooltip: {},
xAxis: {
// 获取x轴的数据
data: this.list.map(r=>r.title)
},
yAxis: {},
// 获取系列数据
series: [
// 第一个系列显示销量信息
{
name: "销量",
type: "bar",
data: this.list.map(r=>r.sale)
},
// 第二个系列显示库存信息
{
name: "库存",
type: "bar",
data: this.list.map(r=>r.stock)
},
],
});
},
};
</script>
然后在App.vue中三部曲1.导入组件 2.注册组件3.使用组件
import Charts from './components/Charts.vue'
export default {
name: 'App',
data() {
return {
}
},
components:{
Charts
}
}
<div id="app">
<Charts></Charts>
</div>
彳亍，结束
以下是正经的丁老师的代码了(￣▽￣)～■干杯□～(￣▽￣)：通过axios获取后台数据。（注意：axios需要先安装，再导入）
// 导入axios
import axios from "axios";
export default {
name: "Test",
data() {
return {
// 定义一份数据
list: [],
};
},
methods: {
// 加载数据的方法
async getList() {
// 向后台发送请求，获取一份数据
let {data} = await axios.get("data/data2.json");
this.list = data
this.showdata()
},
// 渲染数据的方法
showdata() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("main"));
// 绘制图表
myChart.setOption({
title: {
text: "产品销售信息",
// 副标题
subtext: "2021-12-08",
},
// 图例组件
legend: {},
tooltip: {},
// X轴信息
xAxis: {
// 产品名称数据作为X轴信息展示
data: this.list.map((r) => r.title),
},
// Y轴信息
yAxis: {},
// 系列
series: [
{
name: "销量",
type: "bar",
data: this.list.map((r) => r.xl),
},
{
name: "库存",
type: "bar",
data: this.list.map((r) => r.kc),
},
],
});
},
},
// 页面挂载完成
mounted() {
this.getList();
},
};
数据：
[
{
"title": "衬衫",
"xl": 5,
"kc": 9
},
{
"title": "羊毛衫",
"xl": 20,
"kc": 19
},
{
"title": "雪纺衫",
"xl": 36,
"kc": 55
},
{
"title": "裤子",
"xl": 10,
"kc": 2
},
{
"title": "高跟鞋",
"xl": 10,
"kc": 5
},
{
"title": "袜子",
"xl": 20,
"kc": 35
}
]
ps：
export主要用于对外输出本模块变量的接口，一个文件就可以被理解为一个模块。export就是导出。
import就是在一个模块中加载另一个含有export接口的模块， import就是导入。
export default和export都能导出一个模块里面的常量，函数，文件，模块等，在其它文件或模块中通过import来导入常量，函数，文件或模块。这样就可以使用它们了。但是，在一个文件或模块中，export,import可以有多个，export default却只能有一个。
通过export方式导出，在导入的时候需要加{}大括号，export default 就不需要{}
原文链接
ps:可以在pachage.json 里off 掉半吊子提示（改了之后必须CTRL+C退出终端，重新npm run serve
Echarts是一个基于 JavaScript 的开源可视化图表库。
=>> 一键进入 Echarts官方
=>> 文档-查看API手册....去旧版本
