一、Vue CLI
简单来说，vue-cli就是一个搭建vue项目的脚手架，在没有vue-cli之前，我们创建vue项目可能就是手动去引入vue.js，手动去创建目录，手动去加配置文件，vue-cli就是将我们这些繁杂的操作一步化，自动生成项目的模板。具体说明请移至官方文档：https://cli.vuejs.org/zh/guide/
二、安装
1.全局安装Vue-Cli
npm install -g @vue/cli
-----------------------
yarn global add @vue/cli
2.查看版本号
vue --version
3.升级
npm update -g @vue/cli
-----------------------
yarn global upgrade --latest @vue/cli
三、创建项目
1.安装完成后，创建项目。
vue create 项目名
2.创建完成后会自动生成项目的基本结构。
四、创建组件
1.单文件组件
单文件组件：把一个组件全部内容汇合到一个文件中，文件名字是以 .vue 结尾，这个文件就是单文件组件。xxx.vue是vue的单文件组件。
每个vue的单文件组件由三个部分组成：template里面放置模板内容，script里面放置js代码，style里面放置样式。
<template>
<div>
</div>
</template>
<script>
export default {
name:'App'
}
</script>
<style>
</style>
2.使用组件的步骤
（1）导入组件
import Child from './components/Child.vue'
（2）注册组件
export default {
// name选项定义组件的名称
name: 'App',
components:{
Child
}
}
（3）使用组件
<div id="app">
<Child></Child>
</div>
五、父子组件之间传值
1.子组件
（1）子组件通过props定义属性，接收父组件传过来的数据。
（2）props中定义的属性是只读、不可修改的，不过可以在data中对父组件传递过来的)值进行中转，修改data中的数据。如果属性是一个对象，可以通过 obj.属性名 修改对象的属性值。
（3）子组件通过$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.父组件
1.父组件可以通过绑定属性，将数据传给子组件。
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
}
}
六、Element-UI
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>
七、Echarts
Echarts 是一个基于 JavaScript 的开源可视化图表库。
1.安装
npm install echarts --save
2、导入
import * as echarts from 'echarts';
3.关闭eslint语法检查
"eslintConfig": {
"rules": {
"no-unused-vars": "off"
}
}
4.准备容器
<div class="charts">
<h3>在vue项目中使用ECharts</h3>
<div id="main"></div>
</div>
5.引入 ECharts
基于准备好的dom初始化echarts实例，绘制图表。因为该项目是基于vue，所以需要在mounted生命周期中进行这一步（获取dom，需要在页面挂载完成后进行）。
export default {
name: "Test",
data() {
return {
list: [
{
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,
},
],
};
},
// 组件挂载完毕
mounted() {
// 基于准备好的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),
},
],
});
},
};
